@coopdigital/react 1.21.1 → 1.22.1

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,20 @@
+import { StandardSizesWithNone } from "../../types/index.js";
+import React, { ForwardRefExoticComponent, HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Box/Box.d.ts
+export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify a custom element to override default `div` */
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string;
+  /** **(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;
+  /** **(Optional)** Specify the Box padding. */
+  padding?: StandardSizesWithNone;
+  /** **(Optional)** Specify the Box border radius. */
+  radius?: StandardSizesWithNone;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const Box: ({ as, children, className, padding, radius, ref, ...props }: BoxProps) => JSX.Element;
+//#endregion
+export { Box as default };

package/dist/components/Box/Box.js

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+import React from "react";
+//#region src/components/Box/Box.tsx
+const Box = ({ as, children, className, padding, radius, ref, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-box", className),
+		"data-padding": padding ?? void 0,
+		"data-radius": radius ?? void 0,
+		...props
+	};
+	const element = as ?? "div";
+	return React.createElement(element, {
+		...componentProps,
+		ref
+	}, children);
+};
+//#endregion
+export { Box, Box as default };

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

@@ -0,0 +1,2 @@
+import { Box, BoxProps } from "./Box.js";
+export { Box, Box as default, BoxProps };

package/dist/components/Box/index.js

@@ -0,0 +1,5 @@
+import { Box } from "./Box.js";
+//#region src/components/Box/index.ts
+var Box_default = Box;
+//#endregion
+export { Box, Box_default as default };

package/dist/components/Card/Card.d.ts

@@ -1,8 +1,8 @@
 import { ImageProps } from "../Image/Image.js";
 import "../Image/index.js";
+import { StandardSizes } from "../../types/index.js";
 import { PictureProps } from "../Picture/Picture.js";
 import "../Picture/index.js";
-import { StandardSizes } from "../../types/index.js";
 import React, { AnchorHTMLAttributes, ForwardRefExoticComponent, HTMLAttributes, JSX, Ref } from "react";
 //#region src/components/Card/Card.d.ts
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/Flourish/Flourish.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Flourish/Flourish.tsx
 const Flourish = ({ children, className, fill = "brand-blue", ref, ...props }) => {
 	const componentProps = {
-		className: clsx("coop-flourish ", className),
+		className: clsx("coop-flourish", className),
 		fill: `var(--color-${fill})`,
 		...props
 	};

package/dist/components/Form/Form.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Form/Form.tsx
 const Form = ({ children, className, ref, ...props }) => {
 	const componentProps = {
-		className: clsx("coop-form ", className),
+		className: clsx("coop-form", className),
 		...props
 	};
 	return /* @__PURE__ */ jsx("form", {

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/LoadingSpinner/LoadingSpinner.tsx
 const LoadingSpinner = ({ className, ref, stroke = "currentColor", strokeWidth = "1px", ...props }) => {
 	const componentProps = {
-		className: clsx("coop-loading-spinner ", className),
+		className: clsx("coop-loading-spinner", className),
 		stroke,
 		strokeWidth,
 		...props

package/dist/components/Prose/Prose.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Prose/Prose.tsx
 const Prose = ({ children, className, full, ref, size, spacing, ...props }) => {
 	const componentProps = {
-		className: clsx("coop-prose ", className),
+		className: clsx("coop-prose", className),
 		"data-full": full ?? void 0,
 		"data-size": size ?? void 0,
 		"data-spacing": spacing ?? void 0,

package/dist/components/Searchbox/Searchbox.d.ts

@@ -1,6 +1,6 @@
+import { StandardSizes } from "../../types/index.js";
 import { ButtonProps } from "../Button/Button.js";
 import "../Button/index.js";
-import { StandardSizes } from "../../types/index.js";
 import { TextInputProps } from "../TextInput/TextInput.js";
 import "../TextInput/index.js";
 import React, { FormHTMLAttributes, JSX, RefObject } from "react";

package/dist/components/Squircle/Squircle.js

@@ -27,7 +27,7 @@ const SquircleSvg = ({ size, ...props }) => {
 		viewBox: "0 0 64 64",
 		xmlns: "http://www.w3.org/2000/svg",
 		children: /* @__PURE__ */ jsx("path", {
-			d: "M0,32 C0,10.56,10.56,0,32,0 S64,10.56,64,32 S53.44,64,32,64 S0,53.44,0,32",
+			d: "M62 47.4a58 58 0 0 0 0-30.8A20 20 0 0 0 49.8 3a53 53 0 0 0-35.8 0 20 20 0 0 0-12 13.5 58 58 0 0 0 0 30.8A20 20 0 0 0 14 61a52 52 0 0 0 35.8 0 20 20 0 0 0 12-13.5",
 			vectorEffect: "non-scaling-stroke"
 		})
 	});

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { AlertBanner, AlertBannerHeading, AlertBannerProps } from "./components/AlertBanner/AlertBanner.js";
 import { Image, ImageProps } from "./components/Image/Image.js";
 import { Author, AuthorProps } from "./components/Author/Author.js";
+import { Box, BoxProps } from "./components/Box/Box.js";
+import "./components/Box/index.js";
 import { Button, ButtonProps } from "./components/Button/Button.js";
 import { Picture, PictureProps } from "./components/Picture/Picture.js";
 import "./components/Picture/index.js";
@@ -29,4 +31,4 @@ import { Squircle, SquircleProps, SquircleSvgProps } from "./components/Squircle
 import { Tag, TagProps } from "./components/Tag/Tag.js";
 import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, DatePicker, DatePickerProps, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { AlertBanner, AlertBannerHeading } from "./components/AlertBanner/AlertBanner.js";
 import { Image } from "./components/Image/Image.js";
 import { Author } from "./components/Author/Author.js";
+import { Box } from "./components/Box/Box.js";
 import { LoadingSpinner } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { Button } from "./components/Button/Button.js";
 import { Picture } from "./components/Picture/Picture.js";
@@ -28,4 +29,4 @@ import { Squircle } from "./components/Squircle/Squircle.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, Author, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };
+export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 //#region src/types/index.d.ts
 export type StandardSizes = "sm" | "md" | "lg";
+export type StandardSizesWithNone = "none" | "sm" | "md" | "lg";
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.21.1",
+  "version": "1.22.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,12 +103,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.15.0",
+    "@coopdigital/styles": "^1.16.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "589224b266bc6e2d0ca95113056f4e676422f144"
+  "gitHead": "095447fa5af6d5bab3223cfd787f4eb668f4e2eb"
 }

package/src/components/Box/Box.tsx

@@ -0,0 +1,43 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import React from "react"
+
+import { StandardSizesWithNone } from "@/types"
+export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify a custom element to override default `div` */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
+  /** **(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
+  /** **(Optional)** Specify the Box padding. */
+  padding?: StandardSizesWithNone
+  /** **(Optional)** Specify the Box border radius. */
+  radius?: StandardSizesWithNone
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Box = ({
+  as,
+  children,
+  className,
+  padding,
+  radius,
+  ref,
+  ...props
+}: BoxProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-box", className),
+    "data-padding": padding ?? undefined,
+    "data-radius": radius ?? undefined,
+    ...props,
+  }
+  const element: BoxProps["as"] = as ?? "div"
+
+  return React.createElement(element, { ...componentProps, ref }, children)
+}
+
+export default Box

package/src/components/Box/index.ts

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

package/src/components/Flourish/Flourish.tsx

@@ -23,7 +23,7 @@ const Flourish = ({
   ...props
 }: FlourishProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-flourish ", className),
+    className: clsx("coop-flourish", className),
     fill: `var(--color-${fill})`,
     ...props,
   }

package/src/components/Form/Form.tsx

@@ -13,7 +13,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
 
 const Form = ({ children, className, ref, ...props }: FormProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-form ", className),
+    className: clsx("coop-form", className),
     ...props,
   }
 

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -23,7 +23,7 @@ export const LoadingSpinner = ({
   ...props
 }: LoadingSpinnerProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-loading-spinner ", className),
+    className: clsx("coop-loading-spinner", className),
     stroke,
     strokeWidth,
     ...props,

package/src/components/Prose/Prose.tsx

@@ -37,7 +37,7 @@ export const Prose = ({
   ...props
 }: ProseProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-prose ", className),
+    className: clsx("coop-prose", className),
     "data-full": full ?? undefined,
     "data-size": size ?? undefined,
     "data-spacing": spacing ?? undefined,

package/src/components/Squircle/Squircle.tsx

@@ -2,10 +2,6 @@ import type { HTMLAttributes, JSX, Ref, SVGAttributes } from "react"
 
 import clsx from "clsx"
 
-// import { useSlots } from "@/hooks"
-
-// import { hasUserBg } from "@/utils"
-
 export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
@@ -51,7 +47,7 @@ const SquircleSvg = ({ size, ...props }: SquircleSvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M0,32 C0,10.56,10.56,0,32,0 S64,10.56,64,32 S53.44,64,32,64 S0,53.44,0,32"
+        d="M62 47.4a58 58 0 0 0 0-30.8A20 20 0 0 0 49.8 3a53 53 0 0 0-35.8 0 20 20 0 0 0-12 13.5 58 58 0 0 0 0 30.8A20 20 0 0 0 14 61a52 52 0 0 0 35.8 0 20 20 0 0 0 12-13.5"
         vectorEffect="non-scaling-stroke"
       />
     </svg>

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./components/AlertBanner/AlertBanner"
 export * from "./components/Author/Author"
+export * from "./components/Box"
 export * from "./components/Button/Button"
 export * from "./components/Card/Card"
 export * from "./components/Checkbox/Checkbox"

package/src/types/index.ts

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