@coopdigital/react 0.32.0 → 0.33.1

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const Field: ({ children, className, ...props }: FieldProps) => JSX.Element;
+export default Field;

package/dist/components/Field/Field.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const Field = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field ", className),
+        ...props,
+    };
+    return jsx("div", { ...componentProps, children: children });
+};
+
+export { Field, Field as default };

package/dist/components/Field/index.d.ts

@@ -0,0 +1,4 @@
+import Field from "./Field";
+export default Field;
+export { Field };
+export * from "./Field";

package/dist/components/FieldError/FieldError.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const FieldError: ({ children, className, ...props }: FieldErrorProps) => JSX.Element;
+export default FieldError;

package/dist/components/FieldError/FieldError.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const FieldError = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-error ", className),
+        ...props,
+    };
+    return jsx("span", { ...componentProps, children: children });
+};
+
+export { FieldError, FieldError as default };

package/dist/components/FieldError/index.d.ts

@@ -0,0 +1,4 @@
+import FieldError from "./FieldError";
+export default FieldError;
+export { FieldError };
+export * from "./FieldError";

package/dist/components/FieldHint/FieldHint.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Main content inside the component. It can be any valid JSX or string. */
+    children: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+export declare const FieldHint: ({ children, className, ...props }: FieldHintProps) => JSX.Element | null;
+export default FieldHint;

package/dist/components/FieldHint/FieldHint.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const FieldHint = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-hint ", className),
+        ...props,
+    };
+    return children ? jsx("p", { ...componentProps, children: children }) : null;
+};
+
+export { FieldHint, FieldHint as default };

package/dist/components/FieldHint/index.d.ts

@@ -0,0 +1,4 @@
+import FieldHint from "./FieldHint";
+export default FieldHint;
+export { FieldHint };
+export * from "./FieldHint";

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -0,0 +1,13 @@
+import type { JSX, LabelHTMLAttributes, ReactNode } from "react";
+export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** Specify the field ID to connect FieldLabel to the field itself. */
+    htmlFor: string;
+    /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
+    isVisible?: boolean;
+}
+export declare const FieldLabel: ({ children, className, htmlFor, isVisible, ...props }: FieldLabelProps) => JSX.Element | null;
+export default FieldLabel;

package/dist/components/FieldLabel/FieldLabel.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const FieldLabel = ({ children, className, htmlFor, isVisible = true, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
+        htmlFor,
+        ...props,
+    };
+    return children && htmlFor ? jsx("label", { ...componentProps, children: children }) : null;
+};
+
+export { FieldLabel, FieldLabel as default };

package/dist/components/FieldLabel/index.d.ts

@@ -0,0 +1,4 @@
+import FieldLabel from "./FieldLabel";
+export default FieldLabel;
+export { FieldLabel };
+export * from "./FieldLabel";

package/dist/components/Input/Input.d.ts

@@ -1,13 +1,10 @@
 import type { InputHTMLAttributes, JSX } from "react";
-import { StandardSizes } from "../../../src/types";
+import { FormFieldError, StandardSizes } from "../../../src/types";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** **(Optional)** Specify the Input error message. */
-    error?: {
-        message: string;
-        type?: string;
-    } | false | null | undefined;
+    /** **(Optional)** Specify the Input error. */
+    error?: FormFieldError;
     /** **(Optional)** Specify the Input hint.
      *
      * This text is rendered under the label to provide further guidance for users.
@@ -19,6 +16,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      *
      * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
     label?: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
     /** Specify the Input name. */
     name: string;
     /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
@@ -28,5 +27,5 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** **(Optional)** Specify the Input type. */
     type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
 }
-export declare const Input: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, name, placeholder, size, type, ...props }: InputProps) => JSX.Element;
+export declare const Input: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, labelVisible, name, placeholder, size, type, ...props }: InputProps) => JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -1,8 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { useId } from 'react';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 
-const Input = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, name, placeholder, size = "md", type = "text", ...props }) => {
+const Input = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, labelVisible = true, name, placeholder, size = "md", type = "text", ...props }) => {
     var _a;
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
@@ -17,7 +20,7 @@ const Input = ({ "aria-placeholder": ariaPlaceholder, className, error = false,
         type,
         ...props,
     };
-    return (jsxs("div", { className: "coop-field", children: [label && (jsx("label", { className: "coop-form--label", htmlFor: id, children: label })), hint && jsx("p", { className: "coop-form--hint", children: hint }), error && jsx("span", { className: "coop-form--error", children: error.message }), jsx("input", { ...componentProps })] }));
+    return (jsxs(Fragment, { children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), jsx("div", { className: "coop-field-control", children: jsx("input", { ...componentProps }) })] }));
 };
 
 export { Input, Input as default };

package/dist/components/SearchBox/SearchBox.js

@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React, { useState, useId, useCallback } from 'react';
 import { Button } from '../Button/Button.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 import { SearchIcon } from '../Icon/SearchIcon.js';
 import { Input } from '../Input/Input.js';
 
@@ -53,7 +54,7 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [jsx("label", { className: labelVisible ? "" : "sr-only", htmlFor: id, children: label }), jsxs("div", { className: "coop-search-box--inner", children: [jsx(Input, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, children: [label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), jsxs("div", { className: "coop-search-box--inner", children: [jsx(Input, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
 export { SearchBox, SearchBox as default };

package/dist/index.d.ts

@@ -3,6 +3,10 @@ export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Expandable";
+export * from "./components/Field";
+export * from "./components/FieldError";
+export * from "./components/FieldHint";
+export * from "./components/FieldLabel";
 export * from "./components/Flourish";
 export * from "./components/Image";
 export * from "./components/Input";

package/dist/index.js

@@ -3,6 +3,10 @@ export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
 export { Expandable } from './components/Expandable/Expandable.js';
+export { Field } from './components/Field/Field.js';
+export { FieldError } from './components/FieldError/FieldError.js';
+export { FieldHint } from './components/FieldHint/FieldHint.js';
+export { FieldLabel } from './components/FieldLabel/FieldLabel.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
 export { Input } from './components/Input/Input.js';

package/dist/types/index.d.ts

@@ -1 +1,5 @@
 export type StandardSizes = "sm" | "md" | "lg";
+export type FormFieldError = {
+    message: string;
+    type?: string;
+} | boolean | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -63,8 +63,8 @@
     "@storybook/react-vite": "^9.1.3",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "clsx": "^2.1.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.28.0"
+    "@coopdigital/styles": "^0.29.0"
   },
-  "gitHead": "dfdb5d4d591c47722d4969c5221a3e389d8a4fab"
+  "gitHead": "765010c67a092c8501c3ea6327ffaef67df7113f"
 }

package/src/components/Field/Field.tsx

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const Field = ({ children, className, ...props }: FieldProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-field ", className),
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
+}
+
+export default Field

package/src/components/Field/index.ts

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

package/src/components/FieldError/FieldError.tsx

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldErrorProps extends HTMLAttributes<HTMLSpanElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const FieldError = ({ children, className, ...props }: FieldErrorProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-field-error ", className),
+    ...props,
+  }
+  return <span {...componentProps}>{children}</span>
+}
+
+export default FieldError

package/src/components/FieldError/index.ts

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

package/src/components/FieldHint/FieldHint.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldHintProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Main content inside the component. It can be any valid JSX or string. */
+  children: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+export const FieldHint = ({
+  children,
+  className,
+  ...props
+}: FieldHintProps): JSX.Element | null => {
+  const componentProps = {
+    className: clsx("coop-field-hint ", className),
+    ...props,
+  }
+
+  return children ? <p {...componentProps}>{children}</p> : null
+}
+
+export default FieldHint

package/src/components/FieldHint/index.ts

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

package/src/components/FieldLabel/FieldLabel.tsx

@@ -0,0 +1,31 @@
+import type { JSX, LabelHTMLAttributes, ReactNode } from "react"
+
+import clsx from "clsx"
+
+export interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** Specify the field ID to connect FieldLabel to the field itself. */
+  htmlFor: string
+  /** **(Optional)** Specify whether the FieldLabel is visible for humans or only for screen readers. */
+  isVisible?: boolean
+}
+
+export const FieldLabel = ({
+  children,
+  className,
+  htmlFor,
+  isVisible = true,
+  ...props
+}: FieldLabelProps): JSX.Element | null => {
+  const componentProps = {
+    className: clsx("coop-field-label ", isVisible ? "" : "sr-only", className),
+    htmlFor,
+    ...props,
+  }
+  return children && htmlFor ? <label {...componentProps}>{children}</label> : null
+}
+
+export default FieldLabel

package/src/components/FieldLabel/index.ts

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

package/src/components/Input/Input.tsx

@@ -3,13 +3,16 @@ import type { InputHTMLAttributes, JSX } from "react"
 import clsx from "clsx"
 import { useId } from "react"
 
-import { StandardSizes } from "../../../src/types"
+import { FormFieldError, StandardSizes } from "../../../src/types"
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+import { FieldLabel } from "../FieldLabel"
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** **(Optional)** Specify the Input error message. */
-  error?: { message: string; type?: string } | false | null | undefined // TODO: Extract this into a FieldError type
+  /** **(Optional)** Specify the Input error. */
+  error?: FormFieldError
   /** **(Optional)** Specify the Input hint.
    *
    * This text is rendered under the label to provide further guidance for users.
@@ -21,6 +24,8 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
    *
    * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
   label?: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
   /** Specify the Input name. */
   name: string
   /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
@@ -38,6 +43,7 @@ export const Input = ({
   hint,
   id,
   label,
+  labelVisible = true,
   name,
   placeholder,
   size = "md",
@@ -61,16 +67,20 @@ export const Input = ({
   }
 
   return (
-    <div className="coop-field">
+    <>
       {label && (
-        <label className="coop-form--label" htmlFor={id}>
+        <FieldLabel htmlFor={id} isVisible={labelVisible}>
           {label}
-        </label>
+        </FieldLabel>
       )}
-      {hint && <p className="coop-form--hint">{hint}</p>}
-      {error && <span className="coop-form--error">{error.message}</span>}
-      <input {...componentProps} />
-    </div>
+
+      {hint && <FieldHint>{hint}</FieldHint>}
+
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+      <div className="coop-field-control">
+        <input {...componentProps} />
+      </div>
+    </>
   )
 }
 

package/src/components/SearchBox/SearchBox.tsx

@@ -7,6 +7,7 @@ import React, { useCallback, useId, useState } from "react"
 
 import { StandardSizes } from "../../../src/types"
 import { Button, type ButtonProps } from "../Button"
+import { FieldLabel } from "../FieldLabel"
 import { SearchIcon } from "../Icon"
 import Input, { InputProps } from "../Input"
 
@@ -118,9 +119,11 @@ export const SearchBox = ({
 
   return (
     <form {...formProps}>
-      <label className={labelVisible ? "" : "sr-only"} htmlFor={id}>
-        {label}
-      </label>
+      {label && (
+        <FieldLabel htmlFor={id} isVisible={labelVisible}>
+          {label}
+        </FieldLabel>
+      )}
       <div className="coop-search-box--inner">
         <Input {...inputProps} />
         <Button {...buttonProps}>{button.label}</Button>

package/src/index.ts

@@ -3,6 +3,10 @@ export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Expandable"
+export * from "./components/Field"
+export * from "./components/FieldError"
+export * from "./components/FieldHint"
+export * from "./components/FieldLabel"
 export * from "./components/Flourish"
 export * from "./components/Image"
 export * from "./components/Input"

package/src/types/index.ts

@@ -1 +1,3 @@
 export type StandardSizes = "sm" | "md" | "lg"
+
+export type FormFieldError = { message: string; type?: string } | boolean | null | undefined