@coopdigital/react 0.48.0 → 0.49.1

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,11 @@
+import type { FormHTMLAttributes, JSX, ReactNode, Ref } from "react";
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    /** **(Optional)** Main content inside the form. This will usually be a collection of Field, Fieldset and Button components. */
+    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<HTMLFormElement>;
+}
+export declare const Form: ({ children, className, ref, ...props }: FormProps) => JSX.Element;
+export default Form;

package/dist/components/Form/Form.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const Form = ({ children, className, ref, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-form ", className),
+        ...props,
+    };
+    return (jsx("form", { ...componentProps, ref: ref, children: children }));
+};
+
+export { Form, Form as default };

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

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

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from "./components/Expandable";
 export * from "./components/Field";
 export * from "./components/Fieldset";
 export * from "./components/Flourish";
+export * from "./components/Form";
 export * from "./components/Image";
 export * from "./components/Pill";
 export * from "./components/Radio";

package/dist/index.js

@@ -7,6 +7,7 @@ export { Expandable } from './components/Expandable/Expandable.js';
 export { Field, FieldControl } from './components/Field/Field.js';
 export { Fieldset, FieldsetFields } from './components/Fieldset/Fieldset.js';
 export { Flourish } from './components/Flourish/Flourish.js';
+export { Form } from './components/Form/Form.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
 export { Radio } from './components/Radio/Radio.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.48.0",
+  "version": "0.49.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -57,18 +57,18 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
     "@playwright/test": "^1.57.0",
-    "@storybook/addon-a11y": "^10.1.0",
-    "@storybook/addon-docs": "^10.1.0",
-    "@storybook/addon-onboarding": "^10.1.0",
-    "@storybook/react-vite": "^10.1.0",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "serve": "^14.2.5",
-    "storybook": "^10.1.0"
+    "storybook": "^10.1.11"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.41.0",
+    "@coopdigital/styles": "^0.42.1",
     "clsx": "^2.1.1"
   },
-  "gitHead": "96d3459231c76b94984900894ac0ae2bac2f091b"
+  "gitHead": "55ae9bb5c240621f1047179774b45e957985a736"
 }

package/src/components/Form/Form.tsx

@@ -0,0 +1,27 @@
+import type { FormHTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /** **(Optional)** Main content inside the form. This will usually be a collection of Field, Fieldset and Button components. */
+  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<HTMLFormElement>
+}
+
+export const Form = ({ children, className, ref, ...props }: FormProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-form ", className),
+    ...props,
+  }
+
+  return (
+    <form {...componentProps} ref={ref}>
+      {children}
+    </form>
+  )
+}
+
+export default Form

package/src/components/Form/index.ts

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

package/src/index.ts

@@ -7,6 +7,7 @@ export * from "./components/Expandable"
 export * from "./components/Field"
 export * from "./components/Fieldset"
 export * from "./components/Flourish"
+export * from "./components/Form"
 export * from "./components/Image"
 export * from "./components/Pill"
 export * from "./components/Radio"