@coopdigital/react 1.20.0 → 1.21.0

package/dist/components/Squircle/Squircle.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, JSX, Ref } from "react";
+import { HTMLAttributes, JSX, Ref, SVGAttributes } from "react";
 //#region src/components/Squircle/Squircle.d.ts
 interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
@@ -7,14 +7,18 @@ interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
+}
+interface SquircleSvgProps extends SVGAttributes<SVGElement> {
   /** **(Optional)** Specify the Squircle size. */
-  size?: "sm" | "md" | "lg";
+  size?: string | number;
 }
 declare const Squircle: {
-  ({ children, className, ref, size, ...props }: SquircleProps): JSX.Element;
+  ({ children, className, ref, ...props }: SquircleProps): JSX.Element;
+  Svg: ({ size, ...props }: SquircleSvgProps) => JSX.Element;
+  Text: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
   slot: {
     name: string;
   };
 };
 //#endregion
-export { Squircle, Squircle as default, SquircleProps };
+export { Squircle, Squircle as default, SquircleProps, SquircleSvgProps };

package/dist/components/Squircle/Squircle.js

@@ -1,19 +1,49 @@
-import { hasUserBg } from "../../utils/index.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Squircle/Squircle.tsx
-const Squircle = ({ children, className, ref, size = "md", ...props }) => {
+const Squircle = ({ children, className, ref, ...props }) => {
 	const componentProps = {
-		className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
-		"data-size": size.length && size !== "md" ? size : void 0,
+		className: clsx("coop-squircle", className),
 		...props
 	};
 	return /* @__PURE__ */ jsx("figure", {
 		...componentProps,
 		ref,
-		children: /* @__PURE__ */ jsx("figcaption", { children })
+		children
 	});
 };
+const sizeMap = {
+	sm: "32",
+	md: "64",
+	lg: "96"
+};
+const SquircleSvg = ({ size, ...props }) => {
+	const safeSize = sizeMap[size] ?? size ?? "64";
+	return /* @__PURE__ */ jsx("svg", {
+		height: safeSize,
+		width: safeSize,
+		...props,
+		"aria-hidden": "true",
+		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",
+			vectorEffect: "non-scaling-stroke"
+		})
+	});
+};
+const SquircleText = ({ children, className, ...props }) => {
+	const componentProps = {
+		className,
+		...props
+	};
+	return /* @__PURE__ */ jsx("figcaption", {
+		...componentProps,
+		children
+	});
+};
+Squircle.Svg = SquircleSvg;
+Squircle.Text = SquircleText;
 Squircle.slot = { name: "Squircle" };
 //#endregion
 export { Squircle, Squircle as default };

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

@@ -1,2 +1,2 @@
-import { Squircle, SquircleProps } from "./Squircle.js";
-export { Squircle, Squircle as default, SquircleProps };
+import { Squircle, SquircleProps, SquircleSvgProps } from "./Squircle.js";
+export { Squircle, Squircle as default, SquircleProps, SquircleSvgProps };

package/dist/index.d.ts

@@ -25,8 +25,8 @@ import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./co
 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";
-import { Squircle, SquircleProps } from "./components/Squircle/Squircle.js";
+import { Squircle, SquircleProps, SquircleSvgProps } from "./components/Squircle/Squircle.js";
 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, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };
+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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -103,12 +103,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.14.0",
+    "@coopdigital/styles": "^1.15.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": "ed9a9d2eea7a2455ebcefd75bd1bc19994be87ee"
+  "gitHead": "a54fd337dade28ed2d1e1f7d4d0e2cfeb7b90c9e"
 }

package/src/components/Squircle/Squircle.tsx

@@ -1,8 +1,10 @@
-import type { HTMLAttributes, JSX, Ref } from "react"
+import type { HTMLAttributes, JSX, Ref, SVGAttributes } from "react"
 
 import clsx from "clsx"
 
-import { hasUserBg } from "@/utils"
+// 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. */
@@ -11,30 +13,65 @@ export interface SquircleProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
+}
+
+export interface SquircleSvgProps extends SVGAttributes<SVGElement> {
   /** **(Optional)** Specify the Squircle size. */
-  size?: "sm" | "md" | "lg"
+  size?: string | number
 }
 
-const Squircle = ({
-  children,
-  className,
-  ref,
-  size = "md",
-  ...props
-}: SquircleProps): JSX.Element => {
+const Squircle = ({ children, className, ref, ...props }: SquircleProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-squircle", !hasUserBg(className) && "bg-offer", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    className: clsx("coop-squircle", className),
     ...props,
   }
 
   return (
     <figure {...componentProps} ref={ref}>
-      <figcaption>{children}</figcaption>
+      {children}
     </figure>
   )
 }
 
+// oxlint-disable-next-line perfectionist/sort-objects
+const sizeMap = { sm: "32", md: "64", lg: "96" }
+
+const SquircleSvg = ({ size, ...props }: SquircleSvgProps) => {
+  const safeSize = sizeMap[size as keyof typeof sizeMap] ?? size ?? "64"
+  const dimensions = {
+    height: safeSize,
+    width: safeSize,
+  }
+  return (
+    <svg
+      {...dimensions}
+      {...props}
+      aria-hidden="true"
+      viewBox="0 0 64 64"
+      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"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  )
+}
+
+const SquircleText = ({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): JSX.Element => {
+  const componentProps = {
+    className,
+    ...props,
+  }
+  return <figcaption {...componentProps}>{children}</figcaption>
+}
+
+Squircle.Svg = SquircleSvg
+Squircle.Text = SquircleText
 Squircle.slot = { name: "Squircle" }
 
 export default Squircle