@tetrax/squircle 1.0.0

package/dist/react-native/index.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { ViewStyle } from "react-native";
+
+export interface SquircleNativeProps {
+  children?: ReactNode;
+  cornerRadius: number;
+  cornerSmoothing?: number;
+  preserveSmoothing?: boolean;
+  squircleBorder?: boolean;
+  borderColor?: string;
+  borderWidth?: number;
+  backgroundColor?: string;
+  style?: ViewStyle;
+  [key: string]: any;
+}
+
+export declare function SquircleNative(props: SquircleNativeProps): JSX.Element;
+export default SquircleNative;

package/dist/react-native/index.js

@@ -0,0 +1,360 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react-native/index.tsx
+var react_native_exports = {};
+__export(react_native_exports, {
+  SquircleNative: () => SquircleNative,
+  default: () => react_native_default
+});
+module.exports = __toCommonJS(react_native_exports);
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_react_native_svg = __toESM(require("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
+var import_jsx_runtime = require("react/jsx-runtime");
+function SquircleNative({
+  children,
+  cornerRadius,
+  cornerSmoothing = 1,
+  squircleBorder = false,
+  borderColor = "transparent",
+  borderWidth = 1,
+  backgroundColor,
+  style,
+  ...rest
+}) {
+  const [size, setSize] = (0, import_react.useState)({ width: 0, height: 0 });
+  const onLayout = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { onLayout, style: [{ position: "relative" }, style], ...rest, children: [
+    hasClip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { position: "absolute", inset: 0 }, pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_svg.default, { width, height, viewBox: `0 0 ${width} ${height}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.Defs, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.ClipPath, { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_svg.Path, { d: squirclePath }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native_svg.Rect,
+        {
+          width,
+          height,
+          fill: backgroundColor || "transparent",
+          clipPath: `url(#${clipId})`
+        }
+      ),
+      hasBorder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native_svg.Rect,
+        {
+          width,
+          height,
+          fill: "none",
+          stroke: borderColor,
+          strokeWidth: borderWidth,
+          clipPath: `url(#${clipId})`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.View,
+      {
+        style: {
+          position: "relative",
+          zIndex: 1,
+          borderRadius: hasClip ? void 0 : cornerRadius,
+          backgroundColor: hasClip ? "transparent" : backgroundColor,
+          overflow: "hidden"
+        },
+        children
+      }
+    )
+  ] });
+}
+var react_native_default = SquircleNative;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SquircleNative
+});