From 84a547744272e78abbdef08e56017053a4f9a70f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antoni=20Silvestrovi=C4=8D?= <antoni.silvestrovic@gmail.com>
Date: Fri, 10 Nov 2023 19:26:34 +0200
Subject: [PATCH] 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
---
 .changeset/config.json                        |  2 +-
 .changeset/eight-jobs-laugh.md                |  5 +++
 .changeset/little-carpets-watch.md            |  5 +++
 .changeset/pre.json                           | 13 +++++++
 packages/squircle-element-react/CHANGELOG.md  |  6 +++
 packages/squircle-element-react/package.json  |  2 +-
 .../src/StaticSquircle.tsx                    | 39 +++++++++++++++++++
 packages/squircle-element-react/src/index.tsx |  1 +
 8 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/eight-jobs-laugh.md
 create mode 100644 .changeset/little-carpets-watch.md
 create mode 100644 .changeset/pre.json
 create mode 100644 packages/squircle-element-react/src/StaticSquircle.tsx

diff --git a/.changeset/config.json b/.changeset/config.json
index 059915f..7dea7e9 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
   "changelog": "@changesets/cli/changelog",
-  "commit": false,
+  "commit": true,
   "fixed": [],
   "linked": [],
   "access": "public",
diff --git a/.changeset/eight-jobs-laugh.md b/.changeset/eight-jobs-laugh.md
new file mode 100644
index 0000000..a4fcbe6
--- /dev/null
+++ b/.changeset/eight-jobs-laugh.md
@@ -0,0 +1,5 @@
+---
+"@squircle-js/react": patch
+---
+
+Static squircle test
diff --git a/.changeset/little-carpets-watch.md b/.changeset/little-carpets-watch.md
new file mode 100644
index 0000000..b944ac6
--- /dev/null
+++ b/.changeset/little-carpets-watch.md
@@ -0,0 +1,5 @@
+---
+"@squircle-js/react": minor
+---
+
+Test StaticSquircle component
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 0000000..f20a832
--- /dev/null
+++ b/.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"
+  ]
+}
diff --git a/packages/squircle-element-react/CHANGELOG.md b/packages/squircle-element-react/CHANGELOG.md
index 1aa130c..7b76703 100644
--- a/packages/squircle-element-react/CHANGELOG.md
+++ b/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
diff --git a/packages/squircle-element-react/package.json b/packages/squircle-element-react/package.json
index f2ac8b8..1396e8e 100644
--- a/packages/squircle-element-react/package.json
+++ b/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",
diff --git a/packages/squircle-element-react/src/StaticSquircle.tsx b/packages/squircle-element-react/src/StaticSquircle.tsx
new file mode 100644
index 0000000..654eca2
--- /dev/null
+++ b/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} />
+  );
+};
diff --git a/packages/squircle-element-react/src/index.tsx b/packages/squircle-element-react/src/index.tsx
index fc1deab..9f5f329 100644
--- a/packages/squircle-element-react/src/index.tsx
+++ b/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";