StaticSquircle (#11)

* Added StaticSquircle test component

* Added missing `style` prop.

* Added changeset for test component

* Added test component version

* Exited pre mode

* commit: true

* docs(changeset): Static squircle test

Author: bring-shrubbery

.changeset/config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
-  "commit": false,
+  "commit": true,
   "fixed": [],
   "linked": [],
   "access": "public",

.changeset/eight-jobs-laugh.md

@@ -0,0 +1,5 @@
+---
+"@squircle-js/react": patch
+---
+
+Static squircle test

.changeset/little-carpets-watch.md

@@ -0,0 +1,5 @@
+---
+"@squircle-js/react": minor
+---
+
+Test StaticSquircle component

.changeset/pre.json

@@ -0,0 +1,13 @@
+{
+  "mode": "exit",
+  "tag": "dev",
+  "initialVersions": {
+    "web": "1.0.0",
+    "eslint-config-custom": "0.0.0",
+    "@squircle-js/react": "1.1.0",
+    "tsconfig": "1.0.0"
+  },
+  "changesets": [
+    "little-carpets-watch"
+  ]
+}

packages/squircle-element-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @squircle-js/react
 
+## 1.2.0-dev.0
+
+### Minor Changes
+
+- ba8c348: Test StaticSquircle component
+
 ## 1.1.0
 
 ### Minor Changes

packages/squircle-element-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@squircle-js/react",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.2.0-dev.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

packages/squircle-element-react/src/StaticSquircle.tsx

@@ -0,0 +1,39 @@
+import { Slot } from "@radix-ui/react-slot";
+import { getSvgPath } from "figma-squircle";
+import { ComponentPropsWithoutRef, PropsWithChildren, useMemo } from "react";
+
+type StaticSquircleProps = {
+  asChild?: boolean;
+
+  width: number;
+  height: number;
+  cornerRadius: number;
+  cornerSmoothing: number;
+};
+
+export const StaticSquircle = ({
+  asChild,
+  width,
+  height,
+  cornerRadius,
+  cornerSmoothing,
+  style,
+  ...props
+}: PropsWithChildren<
+  StaticSquircleProps & ComponentPropsWithoutRef<"div">
+>) => {
+  const Component = asChild ? Slot : "div";
+
+  const path = useMemo(() => {
+    return getSvgPath({
+      width,
+      height,
+      cornerRadius,
+      cornerSmoothing,
+    });
+  }, [width, height, cornerRadius, cornerSmoothing]);
+
+  return (
+    <Component style={{ clipPath: `path('${path}')`, ...style }} {...props} />
+  );
+};

packages/squircle-element-react/src/index.tsx

@@ -69,3 +69,4 @@ function Squircle<E extends React.ElementType = "div">({
 }
 
 export { Squircle, type SquircleProps };
+export * from "./StaticSquircle";