@tetrax/squircle 1.0.1 → 1.0.2

package/README.md

@@ -34,6 +34,7 @@ function App() {
 | `rounded-squircle-{0-96}` | Corner radius in px |
 | `corner-smoothing-{0-100}` | Smoothing (default: 100 = full squircle, G1 only) |
 | `squircle-g2` | Enable G2 curvature-continuous mode (ignores manual smoothing percent) |
+| `squircle-z` | Enable Z-Squircle (Zomato) style mode (ignores manual smoothing percent) |
 | `squircle-border` | Enable squircle border overlay (1px) |
 | `squircle-border-{n}` | Border width (e.g. `squircle-border-2`, `squircle-border-1.5`) |
 | `border-{color}` | Border color — standard Tailwind (e.g. `border-gray-200`) |
@@ -55,6 +56,16 @@ All other Tailwind classes (`bg-*`, `p-*`, `text-*`, etc.) pass through normally
   G2 Smooth
 </Squircle>
 
+// Z-Squircle (Zomato/ZSquircleView) style squircle
+<Squircle className="rounded-squircle-24 squircle-z bg-amber-500 p-4 text-white">
+  Zomato Style
+</Squircle>
+
+// Alternatively with prop:
+<Squircle cornerRadius={24} zSquircle className="bg-amber-500 p-4 text-white">
+  Zomato Style
+</Squircle>
+
 // With border (standard Tailwind)
 <Squircle className="rounded-squircle-24 squircle-border border-gray-200 bg-white p-6">
   Card with border
@@ -89,6 +100,7 @@ All other Tailwind classes (`bg-*`, `p-*`, `text-*`, etc.) pass through normally
 | `cornerRadius` | `number` | from `rounded-squircle-*` | Override corner radius |
 | `cornerSmoothing` | `number` | `1` | Override smoothing (0–1, Standard G1 only) |
 | `g2Continuous` | `boolean` | `false` | Enable pure G2 curvature continuity |
+| `zSquircle` | `boolean` | `false` | Enable Z-Squircle (Zomato) style mode |
 | `preserveSmoothing` | `boolean` | `false` | Preserve smoothing at large radii |
 | `as` | `ComponentType \| string` | `"div"` | HTML tag or component to render |
 
@@ -128,11 +140,11 @@ This works **directly on void elements** (like `<input>`, `<img>`, etc.) where a
   Hello from standard div!
 </div>
 
-<!-- Squirckled input tag (void element) — border renders perfectly! -->
+<!-- Squirckled input tag with squircle-z (void element) — border renders perfectly! -->
 <input 
   type="password"
   placeholder="Thick border: yellow-400/20"
-  class="rounded-squircle-9 squircle-border-2 border-yellow-400/20 bg-[#1B1B1B] text-white px-4 py-3 outline-none"
+  class="rounded-squircle-9 squircle-border-2 squircle-z border-yellow-400/20 bg-[#1B1B1B] text-white px-4 py-3 outline-none"
 />
 ```
 
@@ -167,6 +179,7 @@ function Card() {
 | `borderColor` | `string` | `"transparent"` | Border color |
 | `borderWidth` | `number` | `1` | Border width in dp |
 | `backgroundColor` | `string` | — | Background fill |
+| `zSquircle` | `boolean` | `false` | Enable Z-Squircle (Zomato) style mode |
 | `style` | `ViewStyle` | — | Additional styles |
 
 > React Native requires `react-native-svg` as a peer dependency.
@@ -216,6 +229,9 @@ drawSquircleRect(ctx, 10, 150, 200, 100, {
   tl: 8, tr: 32, br: 8, bl: 32
 });
 
+// Z-Squircle (Zomato) style on Canvas (radius, smoothing, zSquircle)
+drawSquircleRect(ctx, 10, 290, 200, 100, 24, 1, true);
+
 ctx.fillStyle = "#3b82f6";
 ctx.fill();
 ```
@@ -234,6 +250,7 @@ ctx.fill();
 | `cornerSmoothing` | `number` | `1` | 0 = rounded rect, 1 = full squircle |
 | `preserveSmoothing` | `boolean` | `false` | Preserve smoothing at large radii |
 | `g2Continuous` | `boolean` | `false` | Enable G2 curvature-continuous mode |
+| `zSquircle` | `boolean` | `false` | Enable Z-Squircle (Zomato) style mode |
 
 ## How It Works
 

package/dist/core.d.mts

@@ -9,25 +9,23 @@ interface SquirclePathParams {
     cornerSmoothing?: number;
     preserveSmoothing?: boolean;
     g2Continuous?: boolean;
+    zSquircle?: boolean;
 }
 /**
  * Generate an SVG path string for a squircle rectangle.
- * Direct port of figma-squircle's getSvgPath(), with optional pure G2 Bézier mode.
+ * Direct port of figma-squircle's getSvgPath(), with optional pure G2 Bézier mode
+ * or ZSquircleView style single-Bézier mode.
  */
-declare function getSvgPath({ cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, cornerSmoothing, width, height, preserveSmoothing, g2Continuous, }: SquirclePathParams): string;
+declare function getSvgPath({ cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, cornerSmoothing, width, height, preserveSmoothing, g2Continuous, zSquircle, }: SquirclePathParams): string;
 /**
  * Compute an SVG path string from width/height/radius/smoothing.
  * Convenience wrapper around getSvgPath().
  */
-declare function computeSquirclePath(width: number, height: number, cornerRadius: number, cornerSmoothing?: number, preserveSmoothing?: boolean, g2Continuous?: boolean): string;
+declare function computeSquirclePath(width: number, height: number, cornerRadius: number, cornerSmoothing?: number, preserveSmoothing?: boolean, g2Continuous?: boolean, zSquircle?: boolean): string;
 /**
  * Render a squircle rectangle directly onto a Canvas 2D context using
- * G2 curvature-continuous Bézier curves (Pavel Klavík's optimal coefficients).
- *
- * FIX #5: Rewrote to use the same *relative delta* G2 coefficients as the
- * SVG path drawer, so Canvas and SVG paths are numerically identical.
- * Previous version used accumulated offsets (0.804, 0.912, 0.961) which
- * did not match the SVG path coefficients (0.185, 0.293, 0.342).
+ * G2 curvature-continuous Bézier curves (Pavel Klavík's optimal coefficients)
+ * or ZSquircleView style single-Bézier curves.
  *
  * @example
  * const ctx = canvas.getContext('2d');
@@ -41,7 +39,7 @@ declare function drawSquircleRect(ctx: CanvasRenderingContext2D | any, x: number
     tr?: number;
     br?: number;
     bl?: number;
-}, smoothing?: number): void;
+}, smoothing?: number, zSquircle?: boolean): void;
 
 interface SquircleClassConfig {
     cornerRadius: number | null;
@@ -50,6 +48,7 @@ interface SquircleClassConfig {
     borderColor: string | null;
     borderWidth: number;
     g2Continuous: boolean;
+    zSquircle: boolean;
     restClasses: string;
 }
 /**

package/dist/core.d.ts

@@ -9,25 +9,23 @@ interface SquirclePathParams {
     cornerSmoothing?: number;
     preserveSmoothing?: boolean;
     g2Continuous?: boolean;
+    zSquircle?: boolean;
 }
 /**
  * Generate an SVG path string for a squircle rectangle.
- * Direct port of figma-squircle's getSvgPath(), with optional pure G2 Bézier mode.
+ * Direct port of figma-squircle's getSvgPath(), with optional pure G2 Bézier mode
+ * or ZSquircleView style single-Bézier mode.
  */
-declare function getSvgPath({ cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, cornerSmoothing, width, height, preserveSmoothing, g2Continuous, }: SquirclePathParams): string;
+declare function getSvgPath({ cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, cornerSmoothing, width, height, preserveSmoothing, g2Continuous, zSquircle, }: SquirclePathParams): string;
 /**
  * Compute an SVG path string from width/height/radius/smoothing.
  * Convenience wrapper around getSvgPath().
  */
-declare function computeSquirclePath(width: number, height: number, cornerRadius: number, cornerSmoothing?: number, preserveSmoothing?: boolean, g2Continuous?: boolean): string;
+declare function computeSquirclePath(width: number, height: number, cornerRadius: number, cornerSmoothing?: number, preserveSmoothing?: boolean, g2Continuous?: boolean, zSquircle?: boolean): string;
 /**
  * Render a squircle rectangle directly onto a Canvas 2D context using
- * G2 curvature-continuous Bézier curves (Pavel Klavík's optimal coefficients).
- *
- * FIX #5: Rewrote to use the same *relative delta* G2 coefficients as the
- * SVG path drawer, so Canvas and SVG paths are numerically identical.
- * Previous version used accumulated offsets (0.804, 0.912, 0.961) which
- * did not match the SVG path coefficients (0.185, 0.293, 0.342).
+ * G2 curvature-continuous Bézier curves (Pavel Klavík's optimal coefficients)
+ * or ZSquircleView style single-Bézier curves.
  *
  * @example
  * const ctx = canvas.getContext('2d');
@@ -41,7 +39,7 @@ declare function drawSquircleRect(ctx: CanvasRenderingContext2D | any, x: number
     tr?: number;
     br?: number;
     bl?: number;
-}, smoothing?: number): void;
+}, smoothing?: number, zSquircle?: boolean): void;
 
 interface SquircleClassConfig {
     cornerRadius: number | null;
@@ -50,6 +48,7 @@ interface SquircleClassConfig {
     borderColor: string | null;
     borderWidth: number;
     g2Continuous: boolean;
+    zSquircle: boolean;
     restClasses: string;
 }
 /**

package/dist/core.js

@@ -203,6 +203,25 @@ function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
     Z
   `.replace(/[\t\s\n]+/g, " ").trim();
 }
+function getZSquircleSVGPath(width, height, tl, tr, br, bl) {
+  const minSide = Math.min(width, height);
+  const rTL = tl > 0 ? Math.min(minSide / 2, 2.5 * (tl + 4)) : 0;
+  const rTR = tr > 0 ? Math.min(minSide / 2, 2.5 * (tr + 4)) : 0;
+  const rBR = br > 0 ? Math.min(minSide / 2, 2.5 * (br + 4)) : 0;
+  const rBL = bl > 0 ? Math.min(minSide / 2, 2.5 * (bl + 4)) : 0;
+  return `
+    M ${rTL} 0
+    L ${width - rTR} 0
+    ${rTR > 0 ? `C ${width} 0 ${width} 0 ${width} ${rTR}` : `L ${width} 0`}
+    L ${width} ${height - rBR}
+    ${rBR > 0 ? `C ${width} ${height} ${width} ${height} ${width - rBR} ${height}` : `L ${width} ${height}`}
+    L ${rBL} ${height}
+    ${rBL > 0 ? `C 0 ${height} 0 ${height} 0 ${height - rBL}` : `L 0 ${height}`}
+    L 0 ${rTL}
+    ${rTL > 0 ? `C 0 0 0 0 ${rTL} 0` : `L 0 0`}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
 function getSvgPath({
   cornerRadius = 0,
   topLeftCornerRadius,
@@ -213,12 +232,16 @@ function getSvgPath({
   width,
   height,
   preserveSmoothing = false,
-  g2Continuous = false
+  g2Continuous = false,
+  zSquircle = false
 }) {
   const tl = topLeftCornerRadius ?? cornerRadius;
   const tr = topRightCornerRadius ?? cornerRadius;
   const bl = bottomLeftCornerRadius ?? cornerRadius;
   const br = bottomRightCornerRadius ?? cornerRadius;
+  if (zSquircle) {
+    return getZSquircleSVGPath(width, height, tl, tr, br, bl);
+  }
   if (g2Continuous) {
     const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
       topLeftCornerRadius: tl,
@@ -272,11 +295,11 @@ function getSvgPath({
     bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
   });
 }
-function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false, zSquircle = false) {
   if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
-  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, zSquircle });
 }
-function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1) {
+function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1, zSquircle = false) {
   let tlR = 0, trR = 0, brR = 0, blR = 0;
   if (typeof cornerRadius === "number") {
     tlR = trR = brR = blR = cornerRadius;
@@ -286,6 +309,44 @@ function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1)
     brR = cornerRadius.br ?? 0;
     blR = cornerRadius.bl ?? 0;
   }
+  if (zSquircle) {
+    const minSide = Math.min(width, height);
+    const rTL2 = tlR > 0 ? Math.min(minSide / 2, 2.5 * (tlR + 4)) : 0;
+    const rTR2 = trR > 0 ? Math.min(minSide / 2, 2.5 * (trR + 4)) : 0;
+    const rBR2 = brR > 0 ? Math.min(minSide / 2, 2.5 * (brR + 4)) : 0;
+    const rBL2 = blR > 0 ? Math.min(minSide / 2, 2.5 * (blR + 4)) : 0;
+    const left2 = x;
+    const top2 = y;
+    const right2 = x + width;
+    const bottom2 = y + height;
+    ctx.moveTo(left2 + rTL2, top2);
+    ctx.lineTo(right2 - rTR2, top2);
+    if (rTR2 > 0) {
+      ctx.bezierCurveTo(right2, top2, right2, top2, right2, top2 + rTR2);
+    } else {
+      ctx.lineTo(right2, top2);
+    }
+    ctx.lineTo(right2, bottom2 - rBR2);
+    if (rBR2 > 0) {
+      ctx.bezierCurveTo(right2, bottom2, right2, bottom2, right2 - rBR2, bottom2);
+    } else {
+      ctx.lineTo(right2, bottom2);
+    }
+    ctx.lineTo(left2 + rBL2, bottom2);
+    if (rBL2 > 0) {
+      ctx.bezierCurveTo(left2, bottom2, left2, bottom2, left2, bottom2 - rBL2);
+    } else {
+      ctx.lineTo(left2, bottom2);
+    }
+    ctx.lineTo(left2, top2 + rTL2);
+    if (rTL2 > 0) {
+      ctx.bezierCurveTo(left2, top2, left2, top2, left2 + rTL2, top2);
+    } else {
+      ctx.lineTo(left2, top2);
+    }
+    ctx.closePath();
+    return;
+  }
   const { topLeft, topRight, bottomLeft, bottomRight } = distributeAndNormalize({
     topLeftCornerRadius: tlR,
     topRightCornerRadius: trR,
@@ -554,6 +615,7 @@ function parseSquircleClasses(className = "") {
   let borderColor = null;
   let borderWidth = null;
   let g2Continuous = false;
+  let zSquircle = false;
   const rest = [];
   for (const cls of classes) {
     let matched = false;
@@ -577,6 +639,10 @@ function parseSquircleClasses(className = "") {
       g2Continuous = true;
       matched = true;
     }
+    if (!matched && (cls === "squircle-z" || cls === "squircle-zsquircle")) {
+      zSquircle = true;
+      matched = true;
+    }
     if (!matched) {
       m = cls.match(SQUIRCLE_BORDER_WIDTH_RE);
       if (m) {
@@ -617,6 +683,7 @@ function parseSquircleClasses(className = "") {
     borderColor,
     borderWidth: borderWidth ?? 1,
     g2Continuous,
+    zSquircle,
     restClasses: rest.join(" ")
   };
 }

package/dist/core.mjs

@@ -174,6 +174,25 @@ function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
     Z
   `.replace(/[\t\s\n]+/g, " ").trim();
 }
+function getZSquircleSVGPath(width, height, tl, tr, br, bl) {
+  const minSide = Math.min(width, height);
+  const rTL = tl > 0 ? Math.min(minSide / 2, 2.5 * (tl + 4)) : 0;
+  const rTR = tr > 0 ? Math.min(minSide / 2, 2.5 * (tr + 4)) : 0;
+  const rBR = br > 0 ? Math.min(minSide / 2, 2.5 * (br + 4)) : 0;
+  const rBL = bl > 0 ? Math.min(minSide / 2, 2.5 * (bl + 4)) : 0;
+  return `
+    M ${rTL} 0
+    L ${width - rTR} 0
+    ${rTR > 0 ? `C ${width} 0 ${width} 0 ${width} ${rTR}` : `L ${width} 0`}
+    L ${width} ${height - rBR}
+    ${rBR > 0 ? `C ${width} ${height} ${width} ${height} ${width - rBR} ${height}` : `L ${width} ${height}`}
+    L ${rBL} ${height}
+    ${rBL > 0 ? `C 0 ${height} 0 ${height} 0 ${height - rBL}` : `L 0 ${height}`}
+    L 0 ${rTL}
+    ${rTL > 0 ? `C 0 0 0 0 ${rTL} 0` : `L 0 0`}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
 function getSvgPath({
   cornerRadius = 0,
   topLeftCornerRadius,
@@ -184,12 +203,16 @@ function getSvgPath({
   width,
   height,
   preserveSmoothing = false,
-  g2Continuous = false
+  g2Continuous = false,
+  zSquircle = false
 }) {
   const tl = topLeftCornerRadius ?? cornerRadius;
   const tr = topRightCornerRadius ?? cornerRadius;
   const bl = bottomLeftCornerRadius ?? cornerRadius;
   const br = bottomRightCornerRadius ?? cornerRadius;
+  if (zSquircle) {
+    return getZSquircleSVGPath(width, height, tl, tr, br, bl);
+  }
   if (g2Continuous) {
     const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
       topLeftCornerRadius: tl,
@@ -243,11 +266,11 @@ function getSvgPath({
     bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
   });
 }
-function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false, zSquircle = false) {
   if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
-  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, zSquircle });
 }
-function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1) {
+function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1, zSquircle = false) {
   let tlR = 0, trR = 0, brR = 0, blR = 0;
   if (typeof cornerRadius === "number") {
     tlR = trR = brR = blR = cornerRadius;
@@ -257,6 +280,44 @@ function drawSquircleRect(ctx, x, y, width, height, cornerRadius, smoothing = 1)
     brR = cornerRadius.br ?? 0;
     blR = cornerRadius.bl ?? 0;
   }
+  if (zSquircle) {
+    const minSide = Math.min(width, height);
+    const rTL2 = tlR > 0 ? Math.min(minSide / 2, 2.5 * (tlR + 4)) : 0;
+    const rTR2 = trR > 0 ? Math.min(minSide / 2, 2.5 * (trR + 4)) : 0;
+    const rBR2 = brR > 0 ? Math.min(minSide / 2, 2.5 * (brR + 4)) : 0;
+    const rBL2 = blR > 0 ? Math.min(minSide / 2, 2.5 * (blR + 4)) : 0;
+    const left2 = x;
+    const top2 = y;
+    const right2 = x + width;
+    const bottom2 = y + height;
+    ctx.moveTo(left2 + rTL2, top2);
+    ctx.lineTo(right2 - rTR2, top2);
+    if (rTR2 > 0) {
+      ctx.bezierCurveTo(right2, top2, right2, top2, right2, top2 + rTR2);
+    } else {
+      ctx.lineTo(right2, top2);
+    }
+    ctx.lineTo(right2, bottom2 - rBR2);
+    if (rBR2 > 0) {
+      ctx.bezierCurveTo(right2, bottom2, right2, bottom2, right2 - rBR2, bottom2);
+    } else {
+      ctx.lineTo(right2, bottom2);
+    }
+    ctx.lineTo(left2 + rBL2, bottom2);
+    if (rBL2 > 0) {
+      ctx.bezierCurveTo(left2, bottom2, left2, bottom2, left2, bottom2 - rBL2);
+    } else {
+      ctx.lineTo(left2, bottom2);
+    }
+    ctx.lineTo(left2, top2 + rTL2);
+    if (rTL2 > 0) {
+      ctx.bezierCurveTo(left2, top2, left2, top2, left2 + rTL2, top2);
+    } else {
+      ctx.lineTo(left2, top2);
+    }
+    ctx.closePath();
+    return;
+  }
   const { topLeft, topRight, bottomLeft, bottomRight } = distributeAndNormalize({
     topLeftCornerRadius: tlR,
     topRightCornerRadius: trR,
@@ -525,6 +586,7 @@ function parseSquircleClasses(className = "") {
   let borderColor = null;
   let borderWidth = null;
   let g2Continuous = false;
+  let zSquircle = false;
   const rest = [];
   for (const cls of classes) {
     let matched = false;
@@ -548,6 +610,10 @@ function parseSquircleClasses(className = "") {
       g2Continuous = true;
       matched = true;
     }
+    if (!matched && (cls === "squircle-z" || cls === "squircle-zsquircle")) {
+      zSquircle = true;
+      matched = true;
+    }
     if (!matched) {
       m = cls.match(SQUIRCLE_BORDER_WIDTH_RE);
       if (m) {
@@ -588,6 +654,7 @@ function parseSquircleClasses(className = "") {
     borderColor,
     borderWidth: borderWidth ?? 1,
     g2Continuous,
+    zSquircle,
     restClasses: rest.join(" ")
   };
 }

package/dist/react/index.d.mts

@@ -7,6 +7,7 @@ interface SquircleProps extends React.HTMLAttributes<HTMLDivElement> {
     preserveSmoothing?: boolean;
     as?: ComponentType | string;
     g2Continuous?: boolean;
+    zSquircle?: boolean;
 }
 /**
  * Drop-in squircle wrapper. Uses Figma's algorithm (2 Bézier curves + 1 arc per corner).

package/dist/react/index.d.ts

@@ -7,6 +7,7 @@ interface SquircleProps extends React.HTMLAttributes<HTMLDivElement> {
     preserveSmoothing?: boolean;
     as?: ComponentType | string;
     g2Continuous?: boolean;
+    zSquircle?: boolean;
 }
 /**
  * Drop-in squircle wrapper. Uses Figma's algorithm (2 Bézier curves + 1 arc per corner).

package/dist/react/index.js

@@ -215,6 +215,25 @@ function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
     Z
   `.replace(/[\t\s\n]+/g, " ").trim();
 }
+function getZSquircleSVGPath(width, height, tl, tr, br, bl) {
+  const minSide = Math.min(width, height);
+  const rTL = tl > 0 ? Math.min(minSide / 2, 2.5 * (tl + 4)) : 0;
+  const rTR = tr > 0 ? Math.min(minSide / 2, 2.5 * (tr + 4)) : 0;
+  const rBR = br > 0 ? Math.min(minSide / 2, 2.5 * (br + 4)) : 0;
+  const rBL = bl > 0 ? Math.min(minSide / 2, 2.5 * (bl + 4)) : 0;
+  return `
+    M ${rTL} 0
+    L ${width - rTR} 0
+    ${rTR > 0 ? `C ${width} 0 ${width} 0 ${width} ${rTR}` : `L ${width} 0`}
+    L ${width} ${height - rBR}
+    ${rBR > 0 ? `C ${width} ${height} ${width} ${height} ${width - rBR} ${height}` : `L ${width} ${height}`}
+    L ${rBL} ${height}
+    ${rBL > 0 ? `C 0 ${height} 0 ${height} 0 ${height - rBL}` : `L 0 ${height}`}
+    L 0 ${rTL}
+    ${rTL > 0 ? `C 0 0 0 0 ${rTL} 0` : `L 0 0`}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
 function getSvgPath({
   cornerRadius = 0,
   topLeftCornerRadius,
@@ -225,12 +244,16 @@ function getSvgPath({
   width,
   height,
   preserveSmoothing = false,
-  g2Continuous = false
+  g2Continuous = false,
+  zSquircle = false
 }) {
   const tl = topLeftCornerRadius ?? cornerRadius;
   const tr = topRightCornerRadius ?? cornerRadius;
   const bl = bottomLeftCornerRadius ?? cornerRadius;
   const br = bottomRightCornerRadius ?? cornerRadius;
+  if (zSquircle) {
+    return getZSquircleSVGPath(width, height, tl, tr, br, bl);
+  }
   if (g2Continuous) {
     const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
       topLeftCornerRadius: tl,
@@ -284,9 +307,9 @@ function getSvgPath({
     bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
   });
 }
-function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false, zSquircle = false) {
   if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
-  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, zSquircle });
 }
 
 // src/core/class-parser.ts
@@ -429,6 +452,7 @@ function parseSquircleClasses(className = "") {
   let borderColor = null;
   let borderWidth = null;
   let g2Continuous = false;
+  let zSquircle = false;
   const rest = [];
   for (const cls of classes) {
     let matched = false;
@@ -452,6 +476,10 @@ function parseSquircleClasses(className = "") {
       g2Continuous = true;
       matched = true;
     }
+    if (!matched && (cls === "squircle-z" || cls === "squircle-zsquircle")) {
+      zSquircle = true;
+      matched = true;
+    }
     if (!matched) {
       m = cls.match(SQUIRCLE_BORDER_WIDTH_RE);
       if (m) {
@@ -492,6 +520,7 @@ function parseSquircleClasses(className = "") {
     borderColor,
     borderWidth: borderWidth ?? 1,
     g2Continuous,
+    zSquircle,
     restClasses: rest.join(" ")
   };
 }
@@ -505,14 +534,15 @@ function SquircleSvgBorder({
   cornerSmoothing,
   borderColor,
   borderWidth,
-  g2Continuous
+  g2Continuous,
+  zSquircle
 }) {
   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);
+  const pathData = computeSquirclePath(innerW, innerH, innerR, cornerSmoothing, false, g2Continuous, zSquircle);
   if (!pathData) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
@@ -550,6 +580,7 @@ function Squircle(props) {
     preserveSmoothing: preserveSmoothingProp = false,
     as: Tag = "div",
     g2Continuous = false,
+    zSquircle = false,
     style,
     ...rest
   } = props;
@@ -564,6 +595,7 @@ function Squircle(props) {
   const cornerRadius = cornerRadiusProp ?? parsed.cornerRadius ?? 0;
   const cornerSmoothing = "cornerSmoothing" in props ? cornerSmoothingProp : parsed.cornerSmoothing ?? 1;
   const preserveSmoothing = "preserveSmoothing" in props ? !!preserveSmoothingProp : false;
+  const isZSquircle = "zSquircle" in props ? !!zSquircle : parsed.zSquircle;
   const setRef = import_react.default.useCallback((node) => {
     outerRef.current = node;
     setEl(node);
@@ -578,9 +610,9 @@ function Squircle(props) {
   }, [el]);
   const clipPath = (0, import_react.useMemo)(() => {
     if (!mounted || !cornerRadius || size.width === 0 || size.height === 0) return "none";
-    const pathData = computeSquirclePath(size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous);
+    const pathData = computeSquirclePath(size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, isZSquircle);
     return pathData ? `path('${pathData}')` : "none";
-  }, [mounted, size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous]);
+  }, [mounted, size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, isZSquircle]);
   const squircleReady = mounted && cornerRadius > 0 && size.width > 0 && size.height > 0;
   const showSvgBorder = squircleReady && parsed.squircleBorder;
   const squircleStyle = {
@@ -615,7 +647,8 @@ function Squircle(props) {
             cornerSmoothing,
             borderColor: parsed.borderColor || "currentColor",
             borderWidth: parsed.borderWidth,
-            g2Continuous
+            g2Continuous,
+            zSquircle: isZSquircle
           }
         )
       ]
@@ -685,7 +718,7 @@ function initGlobalSquircleObserver() {
         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 pathData = computeSquirclePath(width, height, config.cornerRadius || 0, config.cornerSmoothing, false, config.g2Continuous, config.zSquircle);
         const clipPath = pathData ? `path('${pathData}')` : "none";
         el.style.clipPath = clipPath;
         el.style.WebkitClipPath = clipPath;
@@ -711,7 +744,7 @@ function initGlobalSquircleObserver() {
           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);
+          const borderPathData = computeSquirclePath(innerW, innerH, innerR, config.cornerSmoothing, false, config.g2Continuous, config.zSquircle);
           svgEl.setAttribute("width", String(width));
           svgEl.setAttribute("height", String(height));
           svgEl.setAttribute("viewBox", `0 0 ${width} ${height}`);

package/dist/react/index.mjs

@@ -179,6 +179,25 @@ function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
     Z
   `.replace(/[\t\s\n]+/g, " ").trim();
 }
+function getZSquircleSVGPath(width, height, tl, tr, br, bl) {
+  const minSide = Math.min(width, height);
+  const rTL = tl > 0 ? Math.min(minSide / 2, 2.5 * (tl + 4)) : 0;
+  const rTR = tr > 0 ? Math.min(minSide / 2, 2.5 * (tr + 4)) : 0;
+  const rBR = br > 0 ? Math.min(minSide / 2, 2.5 * (br + 4)) : 0;
+  const rBL = bl > 0 ? Math.min(minSide / 2, 2.5 * (bl + 4)) : 0;
+  return `
+    M ${rTL} 0
+    L ${width - rTR} 0
+    ${rTR > 0 ? `C ${width} 0 ${width} 0 ${width} ${rTR}` : `L ${width} 0`}
+    L ${width} ${height - rBR}
+    ${rBR > 0 ? `C ${width} ${height} ${width} ${height} ${width - rBR} ${height}` : `L ${width} ${height}`}
+    L ${rBL} ${height}
+    ${rBL > 0 ? `C 0 ${height} 0 ${height} 0 ${height - rBL}` : `L 0 ${height}`}
+    L 0 ${rTL}
+    ${rTL > 0 ? `C 0 0 0 0 ${rTL} 0` : `L 0 0`}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
 function getSvgPath({
   cornerRadius = 0,
   topLeftCornerRadius,
@@ -189,12 +208,16 @@ function getSvgPath({
   width,
   height,
   preserveSmoothing = false,
-  g2Continuous = false
+  g2Continuous = false,
+  zSquircle = false
 }) {
   const tl = topLeftCornerRadius ?? cornerRadius;
   const tr = topRightCornerRadius ?? cornerRadius;
   const bl = bottomLeftCornerRadius ?? cornerRadius;
   const br = bottomRightCornerRadius ?? cornerRadius;
+  if (zSquircle) {
+    return getZSquircleSVGPath(width, height, tl, tr, br, bl);
+  }
   if (g2Continuous) {
     const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
       topLeftCornerRadius: tl,
@@ -248,9 +271,9 @@ function getSvgPath({
     bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
   });
 }
-function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false, zSquircle = false) {
   if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
-  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, zSquircle });
 }
 
 // src/core/class-parser.ts
@@ -393,6 +416,7 @@ function parseSquircleClasses(className = "") {
   let borderColor = null;
   let borderWidth = null;
   let g2Continuous = false;
+  let zSquircle = false;
   const rest = [];
   for (const cls of classes) {
     let matched = false;
@@ -416,6 +440,10 @@ function parseSquircleClasses(className = "") {
       g2Continuous = true;
       matched = true;
     }
+    if (!matched && (cls === "squircle-z" || cls === "squircle-zsquircle")) {
+      zSquircle = true;
+      matched = true;
+    }
     if (!matched) {
       m = cls.match(SQUIRCLE_BORDER_WIDTH_RE);
       if (m) {
@@ -456,6 +484,7 @@ function parseSquircleClasses(className = "") {
     borderColor,
     borderWidth: borderWidth ?? 1,
     g2Continuous,
+    zSquircle,
     restClasses: rest.join(" ")
   };
 }
@@ -469,14 +498,15 @@ function SquircleSvgBorder({
   cornerSmoothing,
   borderColor,
   borderWidth,
-  g2Continuous
+  g2Continuous,
+  zSquircle
 }) {
   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);
+  const pathData = computeSquirclePath(innerW, innerH, innerR, cornerSmoothing, false, g2Continuous, zSquircle);
   if (!pathData) return null;
   return /* @__PURE__ */ jsx(
     "svg",
@@ -514,6 +544,7 @@ function Squircle(props) {
     preserveSmoothing: preserveSmoothingProp = false,
     as: Tag = "div",
     g2Continuous = false,
+    zSquircle = false,
     style,
     ...rest
   } = props;
@@ -528,6 +559,7 @@ function Squircle(props) {
   const cornerRadius = cornerRadiusProp ?? parsed.cornerRadius ?? 0;
   const cornerSmoothing = "cornerSmoothing" in props ? cornerSmoothingProp : parsed.cornerSmoothing ?? 1;
   const preserveSmoothing = "preserveSmoothing" in props ? !!preserveSmoothingProp : false;
+  const isZSquircle = "zSquircle" in props ? !!zSquircle : parsed.zSquircle;
   const setRef = React.useCallback((node) => {
     outerRef.current = node;
     setEl(node);
@@ -542,9 +574,9 @@ function Squircle(props) {
   }, [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);
+    const pathData = computeSquirclePath(size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, isZSquircle);
     return pathData ? `path('${pathData}')` : "none";
-  }, [mounted, size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous]);
+  }, [mounted, size.width, size.height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, isZSquircle]);
   const squircleReady = mounted && cornerRadius > 0 && size.width > 0 && size.height > 0;
   const showSvgBorder = squircleReady && parsed.squircleBorder;
   const squircleStyle = {
@@ -579,7 +611,8 @@ function Squircle(props) {
             cornerSmoothing,
             borderColor: parsed.borderColor || "currentColor",
             borderWidth: parsed.borderWidth,
-            g2Continuous
+            g2Continuous,
+            zSquircle: isZSquircle
           }
         )
       ]
@@ -649,7 +682,7 @@ function initGlobalSquircleObserver() {
         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 pathData = computeSquirclePath(width, height, config.cornerRadius || 0, config.cornerSmoothing, false, config.g2Continuous, config.zSquircle);
         const clipPath = pathData ? `path('${pathData}')` : "none";
         el.style.clipPath = clipPath;
         el.style.WebkitClipPath = clipPath;
@@ -675,7 +708,7 @@ function initGlobalSquircleObserver() {
           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);
+          const borderPathData = computeSquirclePath(innerW, innerH, innerR, config.cornerSmoothing, false, config.g2Continuous, config.zSquircle);
           svgEl.setAttribute("width", String(width));
           svgEl.setAttribute("height", String(height));
           svgEl.setAttribute("viewBox", `0 0 ${width} ${height}`);

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

@@ -10,6 +10,7 @@ export interface SquircleNativeProps {
   borderColor?: string;
   borderWidth?: number;
   backgroundColor?: string;
+  zSquircle?: boolean;
   style?: ViewStyle;
   [key: string]: any;
 }

package/dist/react-native/index.js

@@ -214,6 +214,25 @@ function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
     Z
   `.replace(/[\t\s\n]+/g, " ").trim();
 }
+function getZSquircleSVGPath(width, height, tl, tr, br, bl) {
+  const minSide = Math.min(width, height);
+  const rTL = tl > 0 ? Math.min(minSide / 2, 2.5 * (tl + 4)) : 0;
+  const rTR = tr > 0 ? Math.min(minSide / 2, 2.5 * (tr + 4)) : 0;
+  const rBR = br > 0 ? Math.min(minSide / 2, 2.5 * (br + 4)) : 0;
+  const rBL = bl > 0 ? Math.min(minSide / 2, 2.5 * (bl + 4)) : 0;
+  return `
+    M ${rTL} 0
+    L ${width - rTR} 0
+    ${rTR > 0 ? `C ${width} 0 ${width} 0 ${width} ${rTR}` : `L ${width} 0`}
+    L ${width} ${height - rBR}
+    ${rBR > 0 ? `C ${width} ${height} ${width} ${height} ${width - rBR} ${height}` : `L ${width} ${height}`}
+    L ${rBL} ${height}
+    ${rBL > 0 ? `C 0 ${height} 0 ${height} 0 ${height - rBL}` : `L 0 ${height}`}
+    L 0 ${rTL}
+    ${rTL > 0 ? `C 0 0 0 0 ${rTL} 0` : `L 0 0`}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
 function getSvgPath({
   cornerRadius = 0,
   topLeftCornerRadius,
@@ -224,12 +243,16 @@ function getSvgPath({
   width,
   height,
   preserveSmoothing = false,
-  g2Continuous = false
+  g2Continuous = false,
+  zSquircle = false
 }) {
   const tl = topLeftCornerRadius ?? cornerRadius;
   const tr = topRightCornerRadius ?? cornerRadius;
   const bl = bottomLeftCornerRadius ?? cornerRadius;
   const br = bottomRightCornerRadius ?? cornerRadius;
+  if (zSquircle) {
+    return getZSquircleSVGPath(width, height, tl, tr, br, bl);
+  }
   if (g2Continuous) {
     const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
       topLeftCornerRadius: tl,
@@ -283,9 +306,9 @@ function getSvgPath({
     bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
   });
 }
-function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false, zSquircle = false) {
   if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
-  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, zSquircle });
 }
 
 // src/react-native/index.tsx
@@ -298,6 +321,7 @@ function SquircleNative({
   borderColor = "transparent",
   borderWidth = 1,
   backgroundColor,
+  zSquircle = false,
   style,
   ...rest
 }) {
@@ -309,7 +333,7 @@ function SquircleNative({
   const { width, height } = size;
   let squirclePath = "";
   if (width > 0 && height > 0 && cornerRadius > 0) {
-    squirclePath = computeSquirclePath(width, height, cornerRadius, cornerSmoothing);
+    squirclePath = computeSquirclePath(width, height, cornerRadius, cornerSmoothing, false, false, zSquircle);
   }
   const clipId = `sq-${Math.random().toString(36).slice(2, 9)}`;
   const hasClip = squirclePath.length > 0;

package/dist/react-native/index.mjs

@@ -179,6 +179,25 @@ function getPureBezierSVGPath(width, height, tl, tr, br, bl) {
     Z
   `.replace(/[\t\s\n]+/g, " ").trim();
 }
+function getZSquircleSVGPath(width, height, tl, tr, br, bl) {
+  const minSide = Math.min(width, height);
+  const rTL = tl > 0 ? Math.min(minSide / 2, 2.5 * (tl + 4)) : 0;
+  const rTR = tr > 0 ? Math.min(minSide / 2, 2.5 * (tr + 4)) : 0;
+  const rBR = br > 0 ? Math.min(minSide / 2, 2.5 * (br + 4)) : 0;
+  const rBL = bl > 0 ? Math.min(minSide / 2, 2.5 * (bl + 4)) : 0;
+  return `
+    M ${rTL} 0
+    L ${width - rTR} 0
+    ${rTR > 0 ? `C ${width} 0 ${width} 0 ${width} ${rTR}` : `L ${width} 0`}
+    L ${width} ${height - rBR}
+    ${rBR > 0 ? `C ${width} ${height} ${width} ${height} ${width - rBR} ${height}` : `L ${width} ${height}`}
+    L ${rBL} ${height}
+    ${rBL > 0 ? `C 0 ${height} 0 ${height} 0 ${height - rBL}` : `L 0 ${height}`}
+    L 0 ${rTL}
+    ${rTL > 0 ? `C 0 0 0 0 ${rTL} 0` : `L 0 0`}
+    Z
+  `.replace(/[\t\s\n]+/g, " ").trim();
+}
 function getSvgPath({
   cornerRadius = 0,
   topLeftCornerRadius,
@@ -189,12 +208,16 @@ function getSvgPath({
   width,
   height,
   preserveSmoothing = false,
-  g2Continuous = false
+  g2Continuous = false,
+  zSquircle = false
 }) {
   const tl = topLeftCornerRadius ?? cornerRadius;
   const tr = topRightCornerRadius ?? cornerRadius;
   const bl = bottomLeftCornerRadius ?? cornerRadius;
   const br = bottomRightCornerRadius ?? cornerRadius;
+  if (zSquircle) {
+    return getZSquircleSVGPath(width, height, tl, tr, br, bl);
+  }
   if (g2Continuous) {
     const { topLeft: topLeft2, topRight: topRight2, bottomLeft: bottomLeft2, bottomRight: bottomRight2 } = distributeAndNormalize({
       topLeftCornerRadius: tl,
@@ -248,9 +271,9 @@ function getSvgPath({
     bottomLeftPathParams: getPathParamsForCorner({ cornerSmoothing, preserveSmoothing, cornerRadius: bottomLeft.radius, roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget })
   });
 }
-function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false) {
+function computeSquirclePath(width, height, cornerRadius, cornerSmoothing = 1, preserveSmoothing = false, g2Continuous = false, zSquircle = false) {
   if (width <= 0 || height <= 0 || cornerRadius <= 0) return "";
-  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous });
+  return getSvgPath({ width, height, cornerRadius, cornerSmoothing, preserveSmoothing, g2Continuous, zSquircle });
 }
 
 // src/react-native/index.tsx
@@ -263,6 +286,7 @@ function SquircleNative({
   borderColor = "transparent",
   borderWidth = 1,
   backgroundColor,
+  zSquircle = false,
   style,
   ...rest
 }) {
@@ -274,7 +298,7 @@ function SquircleNative({
   const { width, height } = size;
   let squirclePath = "";
   if (width > 0 && height > 0 && cornerRadius > 0) {
-    squirclePath = computeSquirclePath(width, height, cornerRadius, cornerSmoothing);
+    squirclePath = computeSquirclePath(width, height, cornerRadius, cornerSmoothing, false, false, zSquircle);
   }
   const clipId = `sq-${Math.random().toString(36).slice(2, 9)}`;
   const hasClip = squirclePath.length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetrax/squircle",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Figma-accurate squircles for React & React Native with Tailwind CSS classes",
   "source": "src/index.ts",
   "main": "dist/index.js",