@coopdigital/react 1.20.0 → 1.21.1

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