@tetrax/squircle 1.0.0

package/dist/react/index.mjs

@@ -0,0 +1,773 @@
+"use client";
+
+// src/react/index.tsx
+import React, { useRef, useState, useEffect, useMemo } from "react";
+
+// 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/core/class-parser.ts
+var ROUNDED_RE = /^rounded-squircle-(\d+)$/;
+var SMOOTHING_RE = /^corner-smoothing-(\d{1,3})$/;
+var SQUIRCLE_BORDER_WIDTH_RE = /^squircle-border-(\d+(\.\d+)?)$/;
+var TW_BORDER_COLOR_RE = /^border-(\[.+\]|[\w-]+)(\/(\d+))?$/;
+var TW_BORDER_WIDTH_RE = /^border-(\d+)$/;
+var TW_BORDER_BASE_RE = /^border$/;
+var BORDER_COLORS = {
+  "gray-50": "#f9fafb",
+  "gray-100": "#f3f4f6",
+  "gray-200": "#e5e7eb",
+  "gray-300": "#d1d5db",
+  "gray-400": "#9ca3af",
+  "gray-500": "#6b7280",
+  "gray-600": "#4b5563",
+  "gray-700": "#374151",
+  "gray-800": "#1f2937",
+  "gray-900": "#111827",
+  "slate-50": "#f8fafc",
+  "slate-100": "#f1f5f9",
+  "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1",
+  "slate-400": "#94a3b8",
+  "slate-500": "#64748b",
+  "slate-600": "#475569",
+  "slate-700": "#334155",
+  "slate-800": "#1e293b",
+  "slate-900": "#0f172a",
+  "red-50": "#fef2f2",
+  "red-100": "#fee2e2",
+  "red-200": "#fecaca",
+  "red-300": "#fca5a5",
+  "red-400": "#f87171",
+  "red-500": "#ef4444",
+  "red-600": "#dc2626",
+  "red-700": "#b91c1c",
+  "red-800": "#991b1b",
+  "red-900": "#7f1d1d",
+  "blue-50": "#eff6ff",
+  "blue-100": "#dbeafe",
+  "blue-200": "#bfdbfe",
+  "blue-300": "#93c5fd",
+  "blue-400": "#60a5fa",
+  "blue-500": "#3b82f6",
+  "blue-600": "#2563eb",
+  "blue-700": "#1d4ed8",
+  "blue-800": "#1e40af",
+  "blue-900": "#1e3a8a",
+  "green-50": "#f0fdf4",
+  "green-100": "#dcfce7",
+  "green-200": "#bbf7d0",
+  "green-300": "#86efac",
+  "green-400": "#4ade80",
+  "green-500": "#22c55e",
+  "green-600": "#16a34a",
+  "green-700": "#15803d",
+  "green-800": "#166534",
+  "green-900": "#14532d",
+  "yellow-50": "#fefce8",
+  "yellow-100": "#fef9c3",
+  "yellow-200": "#fef08a",
+  "yellow-300": "#fde047",
+  "yellow-400": "#facc15",
+  "yellow-500": "#eab308",
+  "yellow-600": "#ca8a04",
+  "yellow-700": "#a16207",
+  "yellow-800": "#854d0e",
+  "yellow-900": "#713f12",
+  "purple-50": "#faf5ff",
+  "purple-100": "#f3e8ff",
+  "purple-200": "#e9d5ff",
+  "purple-300": "#d8b4fe",
+  "purple-400": "#c084fc",
+  "purple-500": "#a855f7",
+  "purple-600": "#9333ea",
+  "purple-700": "#7e22ce",
+  "purple-800": "#6b21a8",
+  "purple-900": "#581c87",
+  "pink-50": "#fdf2f8",
+  "pink-100": "#fce7f3",
+  "pink-200": "#fbcfe8",
+  "pink-300": "#f9a8d4",
+  "pink-400": "#f472b6",
+  "pink-500": "#ec4899",
+  "pink-600": "#db2777",
+  "pink-700": "#be185d",
+  "pink-800": "#9d174d",
+  "pink-900": "#831843",
+  "orange-50": "#fff7ed",
+  "orange-100": "#ffedd5",
+  "orange-200": "#fed7aa",
+  "orange-300": "#fdba74",
+  "orange-400": "#fb923c",
+  "orange-500": "#f97316",
+  "orange-600": "#ea580c",
+  "orange-700": "#c2410c",
+  "orange-800": "#9a3412",
+  "orange-900": "#7c2d12",
+  "teal-50": "#f0fdfa",
+  "teal-100": "#ccfbf1",
+  "teal-200": "#99f6e4",
+  "teal-300": "#5eead4",
+  "teal-400": "#2dd4bf",
+  "teal-500": "#14b8a6",
+  "teal-600": "#0d9488",
+  "teal-700": "#0f766e",
+  "teal-800": "#115e59",
+  "teal-900": "#134e4a",
+  white: "#ffffff",
+  black: "#000000",
+  transparent: "transparent"
+};
+function hexToRgba(hex, opacity) {
+  const h = hex.replace(/#/g, "");
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function resolveColorToken(token, opacity) {
+  if (token.startsWith("[") && token.endsWith("]")) {
+    const raw = token.slice(1, -1);
+    if (opacity !== void 0 && raw.startsWith("#")) {
+      return hexToRgba(raw, opacity);
+    }
+    return raw;
+  }
+  const hex = BORDER_COLORS[token];
+  if (!hex) return null;
+  if (opacity !== void 0) return hexToRgba(hex, opacity);
+  return hex;
+}
+function parseSquircleClasses(className = "") {
+  const classes = className.split(/\s+/).filter(Boolean);
+  let cornerRadius = null;
+  let cornerSmoothing = 1;
+  let squircleBorder = false;
+  let borderColor = null;
+  let borderWidth = null;
+  let g2Continuous = false;
+  const rest = [];
+  for (const cls of classes) {
+    let matched = false;
+    let m = cls.match(ROUNDED_RE);
+    if (m) {
+      cornerRadius = Number(m[1]);
+      matched = true;
+    }
+    if (!matched) {
+      m = cls.match(SMOOTHING_RE);
+      if (m) {
+        cornerSmoothing = Math.min(100, Math.max(0, Number(m[1]))) / 100;
+        matched = true;
+      }
+    }
+    if (!matched && cls === "squircle-border") {
+      squircleBorder = true;
+      matched = true;
+    }
+    if (!matched && cls === "squircle-g2") {
+      g2Continuous = true;
+      matched = true;
+    }
+    if (!matched) {
+      m = cls.match(SQUIRCLE_BORDER_WIDTH_RE);
+      if (m) {
+        squircleBorder = true;
+        borderWidth = Number(m[1]);
+        matched = true;
+      }
+    }
+    if (!matched && squircleBorder) {
+      m = cls.match(TW_BORDER_WIDTH_RE);
+      if (m) {
+        borderWidth = Number(m[1]);
+        matched = true;
+      }
+      if (!matched && cls.match(TW_BORDER_BASE_RE)) {
+        borderWidth = 1;
+        matched = true;
+      }
+      if (!matched) {
+        m = cls.match(TW_BORDER_COLOR_RE);
+        if (m) {
+          const colorToken = m[1];
+          const opacityPercent = m[3] ? Number(m[3]) / 100 : void 0;
+          const resolved = resolveColorToken(colorToken, opacityPercent);
+          if (resolved) {
+            borderColor = resolved;
+            matched = true;
+          }
+        }
+      }
+    }
+    if (!matched) rest.push(cls);
+  }
+  return {
+    cornerRadius,
+    cornerSmoothing,
+    squircleBorder,
+    borderColor,
+    borderWidth: borderWidth ?? 1,
+    g2Continuous,
+    restClasses: rest.join(" ")
+  };
+}
+
+// src/react/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SquircleSvgBorder({
+  width,
+  height,
+  cornerRadius,
+  cornerSmoothing,
+  borderColor,
+  borderWidth,
+  g2Continuous
+}) {
+  if (width <= 0 || height <= 0 || cornerRadius <= 0 || borderWidth <= 0) return null;
+  const inset = borderWidth / 2;
+  const innerW = Math.max(1, width - inset * 2);
+  const innerH = Math.max(1, height - inset * 2);
+  const innerR = Math.max(0, cornerRadius - inset);
+  const pathData = computeSquirclePath(innerW, innerH, innerR, cornerSmoothing, false, g2Continuous);
+  if (!pathData) return null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("g", { transform: `translate(${inset}, ${inset})`, children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: pathData,
+          fill: "none",
+          stroke: borderColor,
+          strokeWidth: borderWidth,
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+}
+function Squircle(props) {
+  const {
+    children,
+    className = "",
+    cornerRadius: cornerRadiusProp,
+    cornerSmoothing: cornerSmoothingProp = 1,
+    preserveSmoothing: preserveSmoothingProp = false,
+    as: Tag = "div",
+    g2Continuous = false,
+    style,
+    ...rest
+  } = props;
+  const [mounted, setMounted] = useState(false);
+  const [el, setEl] = useState(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const outerRef = useRef(null);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const parsed = useMemo(() => parseSquircleClasses(className), [className]);
+  const cornerRadius = cornerRadiusProp ?? parsed.cornerRadius ?? 0;
+  const cornerSmoothing = "cornerSmoothing" in props ? cornerSmoothingProp : parsed.cornerSmoothing ?? 1;
+  const preserveSmoothing = "preserveSmoothing" in props ? !!preserveSmoothingProp : false;
+  const setRef = React.useCallback((node) => {
+    outerRef.current = node;
+    setEl(node);
+  }, []);
+  useEffect(() => {
+    if (!el) return;
+    const update = () => setSize({ width: el.offsetWidth || 0, height: el.offsetHeight || 0 });
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [el]);
+  const clipPath = useMemo(() => {
+    if (!mounted || !cornerRadius || size.width === 0 || size.height === 0) return "none";
+    const pathData = computeSquirclePath(size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous);
+    return pathData ? `path('${pathData}')` : "none";
+  }, [mounted, size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous]);
+  const squircleReady = mounted && cornerRadius > 0 && size.width > 0 && size.height > 0;
+  const showSvgBorder = squircleReady && parsed.squircleBorder;
+  const squircleStyle = {
+    ...style,
+    position: "relative",
+    opacity: squircleReady ? 1 : 0,
+    transition: squircleReady ? "opacity 80ms ease-in" : void 0
+  };
+  if (squircleReady && cornerRadius) {
+    squircleStyle.clipPath = clipPath;
+    squircleStyle.WebkitClipPath = clipPath;
+  } else if (cornerRadius) {
+    squircleStyle.borderRadius = cornerRadius;
+  }
+  const Component = Tag;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref: setRef,
+      "data-squircle": cornerRadius || void 0,
+      className: parsed.restClasses,
+      style: squircleStyle,
+      ...rest,
+      children: [
+        children,
+        showSvgBorder && /* @__PURE__ */ jsx(
+          SquircleSvgBorder,
+          {
+            width: size.width,
+            height: size.height,
+            cornerRadius,
+            cornerSmoothing,
+            borderColor: parsed.borderColor || "currentColor",
+            borderWidth: parsed.borderWidth,
+            g2Continuous
+          }
+        )
+      ]
+    }
+  );
+}
+function SquircleNoScript() {
+  return /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      dangerouslySetInnerHTML: {
+        __html: "[data-squircle]{clip-path:none!important;border-radius:attr(data-squircle)px!important;-webkit-clip-path:none!important}"
+      }
+    }
+  ) });
+}
+var globalObserverInitialized = false;
+function initGlobalSquircleObserver() {
+  if (typeof window === "undefined" || globalObserverInitialized) return;
+  globalObserverInitialized = true;
+  const resizeObservers = /* @__PURE__ */ new Map();
+  const applySquircle = (el) => {
+    const className = String(el.className || "");
+    const hasSquircleClass = className.split(/\s+/).some((cls) => cls.startsWith("rounded-squircle-"));
+    const isVoid = ["INPUT", "IMG", "BR", "HR", "SELECT", "TEXTAREA"].includes(el.tagName);
+    if (!hasSquircleClass) {
+      if (resizeObservers.has(el)) {
+        resizeObservers.get(el)?.disconnect();
+        resizeObservers.delete(el);
+        el.style.clipPath = "";
+        el.style.WebkitClipPath = "";
+        el.style.borderRadius = "";
+        const svgEl = el.__squircleBorderSvg || el.querySelector("[data-squircle-border]");
+        if (svgEl) {
+          svgEl.remove();
+        }
+      }
+      return;
+    }
+    const parsed = parseSquircleClasses(className);
+    const cornerRadius = parsed.cornerRadius;
+    const cornerSmoothing = parsed.cornerSmoothing;
+    const g2Continuous = parsed.g2Continuous;
+    if (!cornerRadius) return;
+    el.__squircleConfig = parsed;
+    if (parsed.squircleBorder) {
+      if (isVoid) {
+        const parent = el.parentElement;
+        if (parent && parent.style.position !== "absolute" && parent.style.position !== "fixed" && parent.style.position !== "relative") {
+          parent.style.position = "relative";
+        }
+      } else if (el.style.position !== "absolute" && el.style.position !== "fixed" && el.style.position !== "relative") {
+        el.style.position = "relative";
+      }
+    }
+    if (resizeObservers.has(el)) {
+      const updateFn = el.__squircleUpdate;
+      if (updateFn) {
+        updateFn();
+      }
+      return;
+    }
+    if (!resizeObservers.has(el)) {
+      const updateSize = () => {
+        const config = el.__squircleConfig || parsed;
+        const width = el.offsetWidth || 0;
+        const height = el.offsetHeight || 0;
+        if (width === 0 || height === 0) return;
+        const pathData = computeSquirclePath(width, height, config.cornerRadius || 0, config.cornerSmoothing, false, config.g2Continuous);
+        const clipPath = pathData ? `path('${pathData}')` : "none";
+        el.style.clipPath = clipPath;
+        el.style.WebkitClipPath = clipPath;
+        el.style.borderRadius = "0px";
+        if (config.squircleBorder) {
+          let svgEl = el.__squircleBorderSvg;
+          if (!svgEl && isVoid && el.nextElementSibling?.getAttribute("data-squircle-border") === "true") {
+            svgEl = el.nextElementSibling;
+            el.__squircleBorderSvg = svgEl;
+          }
+          if (!svgEl) {
+            svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svgEl.setAttribute("data-squircle-border", "true");
+            el.__squircleBorderSvg = svgEl;
+            if (isVoid) {
+              el.after(svgEl);
+            } else {
+              el.appendChild(svgEl);
+            }
+          }
+          const bw = config.borderWidth;
+          const inset = bw / 2;
+          const innerW = Math.max(1, width - inset * 2);
+          const innerH = Math.max(1, height - inset * 2);
+          const innerR = Math.max(0, (config.cornerRadius || 0) - inset);
+          const borderPathData = computeSquirclePath(innerW, innerH, innerR, config.cornerSmoothing, false, config.g2Continuous);
+          svgEl.setAttribute("width", String(width));
+          svgEl.setAttribute("height", String(height));
+          svgEl.setAttribute("viewBox", `0 0 ${width} ${height}`);
+          svgEl.setAttribute("aria-hidden", "true");
+          const posStyle = {
+            position: "absolute",
+            pointerEvents: "none",
+            overflow: "visible"
+          };
+          if (isVoid) {
+            posStyle.top = `${el.offsetTop}px`;
+            posStyle.left = `${el.offsetLeft}px`;
+          } else {
+            posStyle.top = `0px`;
+            posStyle.left = `0px`;
+          }
+          Object.assign(svgEl.style, posStyle);
+          let gEl = svgEl.querySelector("g");
+          if (!gEl) {
+            gEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            svgEl.appendChild(gEl);
+          }
+          gEl.setAttribute("transform", `translate(${inset}, ${inset})`);
+          let pathEl = svgEl.querySelector("path");
+          if (!pathEl) {
+            pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            gEl.appendChild(pathEl);
+          }
+          pathEl.setAttribute("d", borderPathData || "");
+          pathEl.setAttribute("fill", "none");
+          pathEl.setAttribute("stroke", config.borderColor || "currentColor");
+          pathEl.setAttribute("stroke-width", String(bw));
+          pathEl.setAttribute("stroke-linejoin", "round");
+        } else {
+          const svgEl = el.__squircleBorderSvg || el.querySelector("[data-squircle-border]");
+          if (svgEl) {
+            svgEl.remove();
+            el.__squircleBorderSvg = null;
+          }
+        }
+      };
+      el.__squircleUpdate = updateSize;
+      updateSize();
+      const ro = new ResizeObserver(updateSize);
+      ro.observe(el);
+      resizeObservers.set(el, ro);
+    }
+  };
+  const scan = () => {
+    const elements = document.querySelectorAll('[class*="rounded-squircle-"]');
+    elements.forEach((el) => applySquircle(el));
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      requestAnimationFrame(scan);
+    });
+  } else {
+    requestAnimationFrame(scan);
+  }
+  const mutationObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "childList") {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (el.className && String(el.className).split(/\s+/).some((c) => c.startsWith("rounded-squircle-"))) {
+              applySquircle(el);
+            }
+            el.querySelectorAll('[class*="rounded-squircle-"]').forEach((child) => {
+              applySquircle(child);
+            });
+          }
+        });
+      } else if (mutation.type === "attributes" && mutation.attributeName === "class") {
+        applySquircle(mutation.target);
+      }
+    }
+  });
+  mutationObserver.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+}
+if (typeof window !== "undefined") {
+  initGlobalSquircleObserver();
+}
+var react_default = Squircle;
+export {
+  Squircle,
+  SquircleNoScript,
+  react_default as default,
+  initGlobalSquircleObserver
+};