@tetrax/squircle 1.0.0

package/dist/core.mjs

@@ -0,0 +1,599 @@
+// 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 });
+}
+function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1) {
+  let tlR = 0, trR = 0, brR = 0, blR = 0;
+  if (typeof cornerRadius === "number") {
+    tlR = trR = brR = blR = cornerRadius;
+  } else if (cornerRadius) {
+    tlR = cornerRadius.tl ?? 0;
+    trR = cornerRadius.tr ?? 0;
+    brR = cornerRadius.br ?? 0;
+    blR = cornerRadius.bl ?? 0;
+  }
+  const { topLeft, topRight, bottomLeft, bottomRight } = distributeAndNormalize({
+    topLeftCornerRadius: tlR,
+    topRightCornerRadius: trR,
+    bottomRightCornerRadius: brR,
+    bottomLeftCornerRadius: blR,
+    width,
+    height
+  });
+  const rTL = topLeft.radius;
+  const rTR = topRight.radius;
+  const rBR = bottomRight.radius;
+  const rBL = bottomLeft.radius;
+  const left = x;
+  const top = y;
+  const right = x + width;
+  const bottom = y + height;
+  ctx.moveTo(left + rTL, top);
+  ctx.lineTo(right - rTR, top);
+  if (rTR > 0) {
+    ctx.bezierCurveTo(
+      right - rTR + 0.3 * rTR,
+      top,
+      right - rTR + 0.473 * rTR,
+      top,
+      right - rTR + 0.619 * rTR,
+      top + 0.039 * rTR
+    );
+    ctx.bezierCurveTo(
+      right - rTR + 0.804 * rTR,
+      top + 0.088 * rTR,
+      right - rTR + 0.961 * rTR,
+      top + 0.196 * rTR,
+      right,
+      top + rTR - 0.619 * rTR
+    );
+    ctx.bezierCurveTo(
+      right,
+      top + rTR - 0.319 * rTR,
+      right,
+      top + rTR - 0.146 * rTR,
+      right,
+      top + rTR
+    );
+  }
+  ctx.lineTo(right, bottom - rBR);
+  if (rBR > 0) {
+    ctx.bezierCurveTo(
+      right,
+      bottom - rBR + 0.3 * rBR,
+      right,
+      bottom - rBR + 0.473 * rBR,
+      right - 0.039 * rBR,
+      bottom - rBR + 0.619 * rBR
+    );
+    ctx.bezierCurveTo(
+      right - 0.088 * rBR,
+      bottom - rBR + 0.804 * rBR,
+      right - 0.196 * rBR,
+      bottom - rBR + 0.961 * rBR,
+      right - rBR + 0.619 * rBR,
+      bottom
+    );
+    ctx.bezierCurveTo(
+      right - rBR + 0.319 * rBR,
+      bottom,
+      right - rBR + 0.146 * rBR,
+      bottom,
+      right - rBR,
+      bottom
+    );
+  }
+  ctx.lineTo(left + rBL, bottom);
+  if (rBL > 0) {
+    ctx.bezierCurveTo(
+      left + rBL - 0.3 * rBL,
+      bottom,
+      left + rBL - 0.473 * rBL,
+      bottom,
+      left + rBL - 0.619 * rBL,
+      bottom - 0.039 * rBL
+    );
+    ctx.bezierCurveTo(
+      left + rBL - 0.804 * rBL,
+      bottom - 0.088 * rBL,
+      left + rBL - 0.961 * rBL,
+      bottom - 0.196 * rBL,
+      left,
+      bottom - rBL + 0.619 * rBL
+    );
+    ctx.bezierCurveTo(
+      left,
+      bottom - rBL + 0.319 * rBL,
+      left,
+      bottom - rBL + 0.146 * rBL,
+      left,
+      bottom - rBL
+    );
+  }
+  ctx.lineTo(left, top + rTL);
+  if (rTL > 0) {
+    ctx.bezierCurveTo(
+      left,
+      top + rTL - 0.3 * rTL,
+      left,
+      top + rTL - 0.473 * rTL,
+      left + 0.039 * rTL,
+      top + rTL - 0.619 * rTL
+    );
+    ctx.bezierCurveTo(
+      left + 0.088 * rTL,
+      top + rTL - 0.804 * rTL,
+      left + 0.196 * rTL,
+      top + rTL - 0.961 * rTL,
+      left + rTL - 0.619 * rTL,
+      top
+    );
+    ctx.bezierCurveTo(
+      left + rTL - 0.319 * rTL,
+      top,
+      left + rTL - 0.146 * rTL,
+      top,
+      left + rTL,
+      top
+    );
+  }
+  ctx.closePath();
+}
+
+// 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(" ")
+  };
+}
+export {
+  computeSquirclePath,
+  drawSquircleRect,
+  getSvgPath,
+  parseSquircleClasses
+};

package/dist/react/index.d.mts

@@ -0,0 +1,21 @@
+import React, { ReactNode, ComponentType } from 'react';
+
+interface SquircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    cornerRadius?: number;
+    cornerSmoothing?: number;
+    preserveSmoothing?: boolean;
+    as?: ComponentType | string;
+    g2Continuous?: boolean;
+}
+/**
+ * Drop-in squircle wrapper. Uses Figma's algorithm (2 Bézier curves + 1 arc per corner).
+ */
+declare function Squircle(props: SquircleProps): React.JSX.Element;
+/**
+ * Noscript fallback — place once in root layout.
+ */
+declare function SquircleNoScript(): React.JSX.Element;
+declare function initGlobalSquircleObserver(): void;
+
+export { Squircle, SquircleNoScript, type SquircleProps, Squircle as default, initGlobalSquircleObserver };

package/dist/react/index.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode, ComponentType } from 'react';
+
+interface SquircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    cornerRadius?: number;
+    cornerSmoothing?: number;
+    preserveSmoothing?: boolean;
+    as?: ComponentType | string;
+    g2Continuous?: boolean;
+}
+/**
+ * Drop-in squircle wrapper. Uses Figma's algorithm (2 Bézier curves + 1 arc per corner).
+ */
+declare function Squircle(props: SquircleProps): React.JSX.Element;
+/**
+ * Noscript fallback — place once in root layout.
+ */
+declare function SquircleNoScript(): React.JSX.Element;
+declare function initGlobalSquircleObserver(): void;
+
+export { Squircle, SquircleNoScript, type SquircleProps, Squircle as default, initGlobalSquircleObserver };