@tetrax/squircle 1.0.0

package/dist/react-native/index.mjs

@@ -0,0 +1,325 @@
+// src/react-native/index.tsx
+import { useState, useCallback } from "react";
+import { View } from "react-native";
+import Svg, { Defs, ClipPath, Path, Rect } from "react-native-svg";
+
+// src/core/squircle-path.ts
+function toRadians(deg) {
+  return deg * Math.PI / 180;
+}
+function rounded(strings, ...values) {
+  return strings.reduce((acc, str, i) => {
+    const value = values[i];
+    return typeof value === "number" ? acc + str + value.toFixed(4) : acc + str + (value ?? "");
+  }, "");
+}
+function getPathParamsForCorner({
+  cornerRadius,
+  cornerSmoothing,
+  preserveSmoothing,
+  roundingAndSmoothingBudget
+}) {
+  if (cornerRadius <= 0 || roundingAndSmoothingBudget <= 0) {
+    return { a: 0, b: 0, c: 0, d: 0, p: 0, cornerRadius: 0, arcSectionLength: 0 };
+  }
+  let p = (1 + cornerSmoothing) * cornerRadius;
+  if (!preserveSmoothing) {
+    const maxCornerSmoothing = roundingAndSmoothingBudget / cornerRadius - 1;
+    cornerSmoothing = Math.min(cornerSmoothing, maxCornerSmoothing);
+    p = Math.min(p, roundingAndSmoothingBudget);
+  }
+  const arcMeasure = 90 * (1 - cornerSmoothing);
+  const arcSectionLength = Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.sqrt(2);
+  const angleAlpha = (90 - arcMeasure) / 2;
+  const p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2));
+  const angleBeta = 45 * cornerSmoothing;
+  const c = p3ToP4Distance * Math.cos(toRadians(angleBeta));
+  const d = c * Math.tan(toRadians(angleBeta));
+  let b = (p - arcSectionLength - c - d) / 3;
+  let a = 2 * b;
+  if (preserveSmoothing && p > roundingAndSmoothingBudget) {
+    const p1ToP3MaxDistance = roundingAndSmoothingBudget - d - arcSectionLength - c;
+    const minA = p1ToP3MaxDistance / 6;
+    const maxB = p1ToP3MaxDistance - minA;
+    b = Math.min(b, maxB);
+    a = p1ToP3MaxDistance - b;
+    p = Math.min(p, roundingAndSmoothingBudget);
+  }
+  return { a, b, c, d, p, arcSectionLength, cornerRadius };
+}
+function drawTopRightPath({ cornerRadius, a, b, c, d, p, arcSectionLength }) {
+  if (cornerRadius) {
+    return rounded`c ${a} 0 ${a + b} 0 ${a + b + c} ${d} a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} ${arcSectionLength} c ${d} ${c} ${d} ${b + c} ${d} ${a + b + c}`;
+  }
+  return rounded`l ${p} 0`;
+}
+function drawBottomRightPath({ cornerRadius, a, b, c, d, p, arcSectionLength }) {
+  if (cornerRadius) {
+    return rounded`c 0 ${a} 0 ${a + b} ${-d} ${a + b + c} a ${cornerRadius} ${cornerRadius} 0 0 1 ${-arcSectionLength} ${arcSectionLength} c ${-c} ${d} ${-(b + c)} ${d} ${-(a + b + c)} ${d}`;
+  }
+  return rounded`l 0 ${p}`;
+}
+function drawBottomLeftPath({ cornerRadius, a, b, c, d, p, arcSectionLength }) {
+  if (cornerRadius) {
+    return rounded`c ${-a} 0 ${-(a + b)} 0 ${-(a + b + c)} ${-d} a ${cornerRadius} ${cornerRadius} 0 0 1 ${-arcSectionLength} ${-arcSectionLength} c ${-d} ${-c} ${-d} ${-(b + c)} ${-d} ${-(a + b + c)}`;
+  }
+  return rounded`l ${-p} 0`;
+}
+function drawTopLeftPath({ cornerRadius, a, b, c, d, p, arcSectionLength }) {
+  if (cornerRadius) {
+    return rounded`c 0 ${-a} 0 ${-(a + b)} ${d} ${-(a + b + c)} a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} ${-arcSectionLength} c ${c} ${-d} ${b + c} ${-d} ${a + b + c} ${-d}`;
+  }
+  return rounded`l 0 ${-p}`;
+}
+function getSVGPathFromPathParams({
+  width,
+  height,
+  topLeftPathParams,
+  topRightPathParams,
+  bottomRightPathParams,
+  bottomLeftPathParams
+}) {
+  return `
+    M ${width - topRightPathParams.p} 0
+    ${drawTopRightPath(topRightPathParams)}
+    L ${width} ${height - bottomRightPathParams.p}
+    ${drawBottomRightPath(bottomRightPathParams)}
+    L ${bottomLeftPathParams.p} ${height}
+    ${drawBottomLeftPath(bottomLeftPathParams)}
+    L 0 ${topLeftPathParams.p}
+    ${drawTopLeftPath(topLeftPathParams)}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
+var adjacentsByCorner = {
+  topLeft: [
+    { corner: "topRight", side: "top" },
+    { corner: "bottomLeft", side: "left" }
+  ],
+  topRight: [
+    { corner: "topLeft", side: "top" },
+    { corner: "bottomRight", side: "right" }
+  ],
+  bottomLeft: [
+    { corner: "bottomRight", side: "bottom" },
+    { corner: "topLeft", side: "left" }
+  ],
+  bottomRight: [
+    { corner: "bottomLeft", side: "bottom" },
+    { corner: "topRight", side: "right" }
+  ]
+};
+function distributeAndNormalize({
+  topLeftCornerRadius,
+  topRightCornerRadius,
+  bottomRightCornerRadius,
+  bottomLeftCornerRadius,
+  width,
+  height
+}) {
+  const roundingAndSmoothingBudgetMap = {
+    topLeft: -1,
+    topRight: -1,
+    bottomLeft: -1,
+    bottomRight: -1
+  };
+  const cornerRadiusMap = {
+    topLeft: topLeftCornerRadius,
+    topRight: topRightCornerRadius,
+    bottomLeft: bottomLeftCornerRadius,
+    bottomRight: bottomRightCornerRadius
+  };
+  Object.entries(cornerRadiusMap).sort(([, r1], [, r2]) => r2 - r1).forEach(([corner, radius]) => {
+    const adjacents = adjacentsByCorner[corner];
+    const budget = Math.min(
+      ...adjacents.map((adj) => {
+        const adjRadius = cornerRadiusMap[adj.corner];
+        if (radius === 0 && adjRadius === 0) return 0;
+        const adjBudget = roundingAndSmoothingBudgetMap[adj.corner];
+        const sideLen = adj.side === "top" || adj.side === "bottom" ? width : height;
+        return adjBudget >= 0 ? sideLen - roundingAndSmoothingBudgetMap[adj.corner] : radius / (radius + adjRadius) * sideLen;
+      })
+    );
+    roundingAndSmoothingBudgetMap[corner] = budget;
+    cornerRadiusMap[corner] = Math.min(radius, budget);
+  });
+  return {
+    topLeft: { radius: cornerRadiusMap.topLeft, roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.topLeft },
+    topRight: { radius: cornerRadiusMap.topRight, roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.topRight },
+    bottomLeft: { radius: cornerRadiusMap.bottomLeft, roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.bottomLeft },
+    bottomRight: { radius: cornerRadiusMap.bottomRight, roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.bottomRight }
+  };
+}
+function drawPureBezierTopRight(r) {
+  if (r <= 0) return "";
+  return rounded`c ${0.3 * r} 0 ${0.473 * r} 0 ${0.619 * r} ${0.039 * r} c ${0.185 * r} ${0.049 * r} ${0.293 * r} ${0.157 * r} ${0.342 * r} ${0.342 * r} c ${0.039 * r} ${0.146 * r} ${0.039 * r} ${0.319 * r} ${0.039 * r} ${0.619 * r}`;
+}
+function drawPureBezierBottomRight(r) {
+  if (r <= 0) return "";
+  return rounded`c 0 ${0.3 * r} 0 ${0.473 * r} ${-0.039 * r} ${0.619 * r} c ${-0.049 * r} ${0.185 * r} ${-0.157 * r} ${0.293 * r} ${-0.342 * r} ${0.342 * r} c ${-0.146 * r} ${0.039 * r} ${-0.319 * r} ${0.039 * r} ${-0.619 * r} ${0.039 * r}`;
+}
+function drawPureBezierBottomLeft(r) {
+  if (r <= 0) return "";
+  return rounded`c ${-0.3 * r} 0 ${-0.473 * r} 0 ${-0.619 * r} ${-0.039 * r} c ${-0.185 * r} ${-0.049 * r} ${-0.293 * r} ${-0.157 * r} ${-0.342 * r} ${-0.342 * r} c ${-0.039 * r} ${-0.146 * r} ${-0.039 * r} ${-0.319 * r} ${-0.039 * r} ${-0.619 * r}`;
+}
+function drawPureBezierTopLeft(r) {
+  if (r <= 0) return "";
+  return rounded`c 0 ${-0.3 * r} 0 ${-0.473 * r} ${0.039 * r} ${-0.619 * r} c ${0.049 * r} ${-0.185 * r} ${0.157 * r} ${-0.293 * r} ${0.342 * r} ${-0.342 * r} c ${0.146 * r} ${-0.039 * r} ${0.319 * r} ${-0.039 * r} ${0.619 * r} ${-0.039 * r}`;
+}
+function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
+  return `
+    M ${width - tr} 0
+    ${drawPureBezierTopRight(tr)}
+    L ${width} ${height - br}
+    ${drawPureBezierBottomRight(br)}
+    L ${bl} ${height}
+    ${drawPureBezierBottomLeft(bl)}
+    L 0 ${tl}
+    ${drawPureBezierTopLeft(tl)}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
+function getSvgPath({
+  cornerRadius = 0,
+  topLeftCornerRadius,
+  topRightCornerRadius,
+  bottomRightCornerRadius,
+  bottomLeftCornerRadius,
+  cornerSmoothing = 1,
+  width,
+  height,
+  preserveSmoothing = false,
+  g2Continuous = false
+}) {
+  const tl = topLeftCornerRadius ?? cornerRadius;
+  const tr = topRightCornerRadius ?? cornerRadius;
+  const bl = bottomLeftCornerRadius ?? cornerRadius;
+  const br = bottomRightCornerRadius ?? cornerRadius;
+  if (g2Continuous) {
+    const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
+      topLeftCornerRadius: tl,
+      topRightCornerRadius: tr,
+      bottomRightCornerRadius: br,
+      bottomLeftCornerRadius: bl,
+      width,
+      height
+    });
+    return getPureBezierSVGPath(
+      width,
+      height,
+      topLeft2.radius,
+      topRight2.radius,
+      bottomRight2.radius,
+      bottomLeft2.radius
+    );
+  }
+  if (tl === tr && tr === br && br === bl) {
+    const roundingAndSmoothingBudget = Math.min(width, height) / 2;
+    const clampedRadius = Math.min(tl, roundingAndSmoothingBudget);
+    const params = getPathParamsForCorner({
+      cornerRadius: clampedRadius,
+      cornerSmoothing,
+      preserveSmoothing,
+      roundingAndSmoothingBudget
+    });
+    return getSVGPathFromPathParams({
+      width,
+      height,
+      topLeftPathParams: params,
+      topRightPathParams: params,
+      bottomLeftPathParams: params,
+      bottomRightPathParams: params
+    });
+  }
+  const { topLeft, topRight, bottomLeft, bottomRight } = distributeAndNormalize({
+    topLeftCornerRadius: tl,
+    topRightCornerRadius: tr,
+    bottomRightCornerRadius: br,
+    bottomLeftCornerRadius: bl,
+    width,
+    height
+  });
+  return getSVGPathFromPathParams({
+    width,
+    height,
+    topLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: topLeft.radius, roundingAndSmoothingBudget: topLeft.roundingAndSmoothingBudget }),
+    topRightPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: topRight.radius, roundingAndSmoothingBudget: topRight.roundingAndSmoothingBudget }),
+    bottomRightPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomRight.radius, roundingAndSmoothingBudget: bottomRight.roundingAndSmoothingBudget }),
+    bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
+  });
+}
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+  if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+}
+
+// src/react-native/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SquircleNative({
+  children,
+  cornerRadius,
+  cornerSmoothing = 1,
+  squircleBorder = false,
+  borderColor = "transparent",
+  borderWidth = 1,
+  backgroundColor,
+  style,
+  ...rest
+}) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const onLayout = useCallback((event) => {
+    const { width: width2, height: height2 } = event.nativeEvent.layout;
+    setSize({ width: width2, height: height2 });
+  }, []);
+  const { width, height } = size;
+  let squirclePath = "";
+  if (width > 0 && height > 0 && cornerRadius > 0) {
+    squirclePath = computeSquirclePath(width, height, cornerRadius, cornerSmoothing);
+  }
+  const clipId = `sq-${Math.random().toString(36).slice(2, 9)}`;
+  const hasClip = squirclePath.length > 0;
+  const hasBorder = squircleBorder && borderWidth > 0 && borderColor !== "transparent";
+  return /* @__PURE__ */ jsxs(View, { onLayout, style: [{ position: "relative" }, style], ...rest, children: [
+    hasClip && /* @__PURE__ */ jsx(View, { style: { position: "absolute", inset: 0 }, pointerEvents: "none", children: /* @__PURE__ */ jsxs(Svg, { width, height, viewBox: `0 0 ${width} ${height}`, children: [
+      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsx(ClipPath, { id: clipId, children: /* @__PURE__ */ jsx(Path, { d: squirclePath }) }) }),
+      /* @__PURE__ */ jsx(
+        Rect,
+        {
+          width,
+          height,
+          fill: backgroundColor || "transparent",
+          clipPath: `url(#${clipId})`
+        }
+      ),
+      hasBorder && /* @__PURE__ */ jsx(
+        Rect,
+        {
+          width,
+          height,
+          fill: "none",
+          stroke: borderColor,
+          strokeWidth: borderWidth,
+          clipPath: `url(#${clipId})`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          position: "relative",
+          zIndex: 1,
+          borderRadius: hasClip ? void 0 : cornerRadius,
+          backgroundColor: hasClip ? "transparent" : backgroundColor,
+          overflow: "hidden"
+        },
+        children
+      }
+    )
+  ] });
+}
+var react_native_default = SquircleNative;
+export {
+  SquircleNative,
+  react_native_default as default
+};

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@tetrax/squircle",
+  "version": "1.0.0",
+  "description": "Figma-accurate squircles for React & React Native with Tailwind CSS classes",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.mjs",
+      "require": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./react-native": {
+      "import": "./dist/react-native/index.mjs",
+      "require": "./dist/react-native/index.js",
+      "types": "./dist/react-native/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.js",
+      "types": "./dist/core.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && node -e \"const fs = require('fs'); fs.mkdirSync('dist/react-native', { recursive: true }); fs.copyFileSync('src/react-native/index.d.ts', 'dist/react-native/index.d.ts')\"",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-svg": ">=12.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.8",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "squircle",
+    "react",
+    "react-native",
+    "figma",
+    "tailwind",
+    "css",
+    "clip-path",
+    "corners"
+  ],
+  "license": "MIT"
+}