@coopdigital/react 1.23.0 → 1.24.0

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Section/Section.d.ts
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<section>`
+   */
+  as?: React.FC<any> | string;
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const Section: ({ as, children, className, ref, ...props }: SectionProps) => JSX.Element;
+//#endregion
+export { Section as default };

package/dist/components/Section/Section.js

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import React from "react";
+//#region src/components/Section/Section.tsx
+const Section = ({ as, children, className, ref, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-section", className),
+		...props
+	};
+	const element = as ?? "section";
+	return React.createElement(element, {
+		...componentProps,
+		ref
+	}, children);
+};
+//#endregion
+export { Section, Section as default };

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

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

package/dist/components/Section/index.js

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

package/dist/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Wrapper/Wrapper.d.ts
+export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<div>`
+   */
+  as?: React.FC<any> | string;
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const Wrapper: ({ as, children, className, ref, ...props }: WrapperProps) => JSX.Element;
+//#endregion
+export { Wrapper as default };

package/dist/components/Wrapper/Wrapper.js

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

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

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

package/dist/components/Wrapper/index.js

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

package/dist/index.d.ts

@@ -27,6 +27,8 @@ import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, Pop
 import { Radio, RadioProps } from "./components/Radio/Radio.js";
 import { RootSVG } from "./components/RootSVG/RootSVG.js";
 import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./components/Searchbox/Searchbox.js";
+import { Section, SectionProps } from "./components/Section/Section.js";
+import "./components/Section/index.js";
 import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
 import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
 import { SkipNav, SkipNavProps } from "./components/SkipNav/SkipNav.js";
@@ -34,4 +36,6 @@ 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, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, 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 };
+import { Wrapper, WrapperProps } from "./components/Wrapper/Wrapper.js";
+import "./components/Wrapper/index.js";
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, 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, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };

package/dist/index.js

@@ -23,6 +23,7 @@ import { Pill, PillBadge } from "./components/Pill/Pill.js";
 import { Radio } from "./components/Radio/Radio.js";
 import { RootSVG } from "./components/RootSVG/RootSVG.js";
 import { Searchbox, SearchboxButton, SearchboxInput } from "./components/Searchbox/Searchbox.js";
+import { Section } from "./components/Section/Section.js";
 import { Select, SelectOption, SelectOptionGroup } from "./components/Select/Select.js";
 import { Signpost } from "./components/Signpost/Signpost.js";
 import { SkipNav } from "./components/SkipNav/SkipNav.js";
@@ -30,4 +31,5 @@ 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, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, 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 };
+import { Wrapper } from "./components/Wrapper/Wrapper.js";
+export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, 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, Section, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, Wrapper };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -115,5 +115,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "c8458928ecfa27cda6cb6293952a31f68c00eed3"
+  "gitHead": "74c62ece6c7a4f0770bf52b466ccd98b36550233"
 }

package/src/components/Section/Section.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import React from "react"
+
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<section>`
+   */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | string
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Section = ({ as, children, className, ref, ...props }: SectionProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-section", className),
+    ...props,
+  }
+  const element: SectionProps["as"] = as ?? "section"
+
+  return React.createElement(element, { ...componentProps, ref }, children)
+}
+
+export default Section

package/src/components/Section/index.ts

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

package/src/components/Wrapper/Wrapper.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import React from "react"
+
+export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<div>`
+   */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | string
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Wrapper = ({ as, children, className, ref, ...props }: WrapperProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-wrap", className),
+    ...props,
+  }
+
+  const element: WrapperProps["as"] = as ?? "div"
+
+  return React.createElement(element, { ...componentProps, ref }, children)
+}
+
+export default Wrapper

package/src/components/Wrapper/index.ts

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

package/src/index.ts

@@ -22,6 +22,7 @@ export * from "./components/Popover/Popover"
 export * from "./components/Radio/Radio"
 export * from "./components/RootSVG/RootSVG"
 export * from "./components/Searchbox/Searchbox"
+export * from "./components/Section"
 export * from "./components/Select/Select"
 export * from "./components/Signpost/Signpost"
 export * from "./components/SkipNav/SkipNav"
@@ -30,3 +31,4 @@ export * from "./components/Tag/Tag"
 export * from "./components/Textarea/Textarea"
 export * from "./components/TextInput/TextInput"
 export * from "./components/ValidationSummary/ValidationSummary"
+export * from "./components/Wrapper"