@tetrax/squircle 1.0.0 → 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

@@ -1,68 +1,67 @@
-interface SquirclePathParams {
-    width: number;
-    height: number;
-    cornerRadius?: number;
-    topLeftCornerRadius?: number;
-    topRightCornerRadius?: number;
-    bottomRightCornerRadius?: number;
-    bottomLeftCornerRadius?: number;
-    cornerSmoothing?: number;
-    preserveSmoothing?: boolean;
-    g2Continuous?: boolean;
-}
-/**
- * Generate an SVG path string for a squircle rectangle.
- * Direct port of figma-squircle's getSvgPath(), with optional pure G2 Bézier mode.
- */
-declare function getSvgPath({ cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, cornerSmoothing, width, height, preserveSmoothing, g2Continuous, }: 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;
-/**
- * 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).
- *
- * @example
- * const ctx = canvas.getContext('2d');
- * ctx.beginPath();
- * drawSquircleRect(ctx, 0, 0, 200, 100, 24);
- * ctx.fillStyle = '#3b82f6';
- * ctx.fill();
- */
-declare function drawSquircleRect(ctx: CanvasRenderingContext2D | any, x: number, y: number, width: number, height: number, cornerRadius: number | {
-    tl?: number;
-    tr?: number;
-    br?: number;
-    bl?: number;
-}, smoothing?: number): void;
-
-interface SquircleClassConfig {
-    cornerRadius: number | null;
-    cornerSmoothing: number;
-    squircleBorder: boolean;
-    borderColor: string | null;
-    borderWidth: number;
-    g2Continuous: boolean;
-    restClasses: string;
-}
-/**
- * Parse Tailwind-style class names and extract squircle config.
- *
- * When `squircle-border` is present, standard Tailwind `border-{color}` and
- * `border-{width}` classes are intercepted for the squircle border overlay.
- * Opacity modifiers like `border-gray-600/50` are fully supported.
- *
- * @example
- * parseSquircleClasses("rounded-squircle-24 squircle-border border-gray-600/50")
- * // → { cornerRadius: 24, squircleBorder: true, borderColor: "rgba(75, 85, 99, 0.5)", ... }
- */
-declare function parseSquircleClasses(className?: string): SquircleClassConfig;
-
-export { type SquircleClassConfig, computeSquirclePath, drawSquircleRect, getSvgPath, parseSquircleClasses };
+interface SquirclePathParams {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+    topLeftCornerRadius?: number;
+    topRightCornerRadius?: number;
+    bottomRightCornerRadius?: number;
+    bottomLeftCornerRadius?: number;
+    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
+ * or ZSquircleView style single-Bézier mode.
+ */
+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, 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)
+ * or ZSquircleView style single-Bézier curves.
+ *
+ * @example
+ * const ctx = canvas.getContext('2d');
+ * ctx.beginPath();
+ * drawSquircleRect(ctx, 0, 0, 200, 100, 24);
+ * ctx.fillStyle = '#3b82f6';
+ * ctx.fill();
+ */
+declare function drawSquircleRect(ctx: CanvasRenderingContext2D | any, x: number, y: number, width: number, height: number, cornerRadius: number | {
+    tl?: number;
+    tr?: number;
+    br?: number;
+    bl?: number;
+}, smoothing?: number, zSquircle?: boolean): void;
+
+interface SquircleClassConfig {
+    cornerRadius: number | null;
+    cornerSmoothing: number;
+    squircleBorder: boolean;
+    borderColor: string | null;
+    borderWidth: number;
+    g2Continuous: boolean;
+    zSquircle: boolean;
+    restClasses: string;
+}
+/**
+ * Parse Tailwind-style class names and extract squircle config.
+ *
+ * When `squircle-border` is present, standard Tailwind `border-{color}` and
+ * `border-{width}` classes are intercepted for the squircle border overlay.
+ * Opacity modifiers like `border-gray-600/50` are fully supported.
+ *
+ * @example
+ * parseSquircleClasses("rounded-squircle-24 squircle-border border-gray-600/50")
+ * // → { cornerRadius: 24, squircleBorder: true, borderColor: "rgba(75, 85, 99, 0.5)", ... }
+ */
+declare function parseSquircleClasses(className?: string): SquircleClassConfig;
+
+export { type SquircleClassConfig, computeSquirclePath, drawSquircleRect, getSvgPath, parseSquircleClasses };

package/dist/core.d.ts

@@ -1,68 +1,67 @@
-interface SquirclePathParams {
-    width: number;
-    height: number;
-    cornerRadius?: number;
-    topLeftCornerRadius?: number;
-    topRightCornerRadius?: number;
-    bottomRightCornerRadius?: number;
-    bottomLeftCornerRadius?: number;
-    cornerSmoothing?: number;
-    preserveSmoothing?: boolean;
-    g2Continuous?: boolean;
-}
-/**
- * Generate an SVG path string for a squircle rectangle.
- * Direct port of figma-squircle's getSvgPath(), with optional pure G2 Bézier mode.
- */
-declare function getSvgPath({ cornerRadius, topLeftCornerRadius, topRightCornerRadius, bottomRightCornerRadius, bottomLeftCornerRadius, cornerSmoothing, width, height, preserveSmoothing, g2Continuous, }: 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;
-/**
- * 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).
- *
- * @example
- * const ctx = canvas.getContext('2d');
- * ctx.beginPath();
- * drawSquircleRect(ctx, 0, 0, 200, 100, 24);
- * ctx.fillStyle = '#3b82f6';
- * ctx.fill();
- */
-declare function drawSquircleRect(ctx: CanvasRenderingContext2D | any, x: number, y: number, width: number, height: number, cornerRadius: number | {
-    tl?: number;
-    tr?: number;
-    br?: number;
-    bl?: number;
-}, smoothing?: number): void;
-
-interface SquircleClassConfig {
-    cornerRadius: number | null;
-    cornerSmoothing: number;
-    squircleBorder: boolean;
-    borderColor: string | null;
-    borderWidth: number;
-    g2Continuous: boolean;
-    restClasses: string;
-}
-/**
- * Parse Tailwind-style class names and extract squircle config.
- *
- * When `squircle-border` is present, standard Tailwind `border-{color}` and
- * `border-{width}` classes are intercepted for the squircle border overlay.
- * Opacity modifiers like `border-gray-600/50` are fully supported.
- *
- * @example
- * parseSquircleClasses("rounded-squircle-24 squircle-border border-gray-600/50")
- * // → { cornerRadius: 24, squircleBorder: true, borderColor: "rgba(75, 85, 99, 0.5)", ... }
- */
-declare function parseSquircleClasses(className?: string): SquircleClassConfig;
-
-export { type SquircleClassConfig, computeSquirclePath, drawSquircleRect, getSvgPath, parseSquircleClasses };
+interface SquirclePathParams {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+    topLeftCornerRadius?: number;
+    topRightCornerRadius?: number;
+    bottomRightCornerRadius?: number;
+    bottomLeftCornerRadius?: number;
+    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
+ * or ZSquircleView style single-Bézier mode.
+ */
+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, 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)
+ * or ZSquircleView style single-Bézier curves.
+ *
+ * @example
+ * const ctx = canvas.getContext('2d');
+ * ctx.beginPath();
+ * drawSquircleRect(ctx, 0, 0, 200, 100, 24);
+ * ctx.fillStyle = '#3b82f6';
+ * ctx.fill();
+ */
+declare function drawSquircleRect(ctx: CanvasRenderingContext2D | any, x: number, y: number, width: number, height: number, cornerRadius: number | {
+    tl?: number;
+    tr?: number;
+    br?: number;
+    bl?: number;
+}, smoothing?: number, zSquircle?: boolean): void;
+
+interface SquircleClassConfig {
+    cornerRadius: number | null;
+    cornerSmoothing: number;
+    squircleBorder: boolean;
+    borderColor: string | null;
+    borderWidth: number;
+    g2Continuous: boolean;
+    zSquircle: boolean;
+    restClasses: string;
+}
+/**
+ * Parse Tailwind-style class names and extract squircle config.
+ *
+ * When `squircle-border` is present, standard Tailwind `border-{color}` and
+ * `border-{width}` classes are intercepted for the squircle border overlay.
+ * Opacity modifiers like `border-gray-600/50` are fully supported.
+ *
+ * @example
+ * parseSquircleClasses("rounded-squircle-24 squircle-border border-gray-600/50")
+ * // → { cornerRadius: 24, squircleBorder: true, borderColor: "rgba(75, 85, 99, 0.5)", ... }
+ */
+declare function parseSquircleClasses(className?: string): SquircleClassConfig;
+
+export { type SquircleClassConfig, computeSquirclePath, drawSquircleRect, getSvgPath, parseSquircleClasses };