@scotato/react-squircle - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/components/Squircle/Squircle.d.ts

 import React from 'react';
 export interface SquircleProps {
+    width?: number;
+    height?: number;
     r1?: number;
@@ -7,4 +9,6 @@ r2?: number;
     p2?: number;
+    c?: number;
 }
-declare function Squircle(props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement): JSX.Element;
-export default Squircle;
+export declare function Squircle(props: SquircleProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare function SquircleMask(props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement): JSX.Element;
+export default SquircleMask;

dist/index.d.ts

@@ -1,3 +0,1 @@
-import Squircle, { SquircleProps as Props } from './components/Squircle/Squircle';
-export declare type SquircleProps = Props;
-export default Squircle;
+export { Squircle, SquircleMask, SquircleProps, } from './components/Squircle/Squircle';

dist/lib/squircle.d.ts

@@ -1,1 +0,11 @@
-export declare function createSquirclePath(width?: number, height?: number, r1?: number, r2?: number): string;
+interface createSquirclePathProps {
+    width?: number;
+    height?: number;
+    r1?: number;
+    r2?: number;
+    p1?: number;
+    p2?: number;
+    c?: number;
+}
+export declare function createSquirclePath(props: createSquirclePathProps): string;
+export {};

dist/react-squircle.cjs.development.js

@@ -65,72 +65,145 @@ 'use strict';
 
-function createSquirclePath(width, height, r1, r2) {
-  if (width === void 0) {
-    width = 64;
-  }
+var RATIO = 0.17650602409638552;
 
-  if (height === void 0) {
-    height = 64;
-  }
+function radiusFromC(c) {
+  var byRatio = function byRatio(val) {
+    return {
+      r1: val * RATIO,
+      r2: val
+    };
+  };
 
-  if (r1 === void 0) {
-    r1 = 0.0586;
-  }
+  switch (Number(c)) {
+    case 1:
+      return byRatio(0.0375);
 
-  if (r2 === void 0) {
-    r2 = 0.332;
+    case 2:
+      return byRatio(0.0750);
+
+    case 3:
+      return byRatio(0.1500);
+
+    case 4:
+      return byRatio(0.2984);
+
+    case 5:
+      return byRatio(0.3320);
+
+    case 6:
+      return byRatio(0.3656);
+
+    case 7:
+      return byRatio(0.3992);
+
+    case 8:
+      return byRatio(0.4328);
+
+    case 9:
+      return byRatio(0.4664);
+
+    case 10:
+      return byRatio(0.5000);
+
+    default:
+      return byRatio(0.3320);
   }
+}
 
-  var radius1 = Math.min(r1, r2);
-  var radius2 = r2;
+function createSquirclePath(props) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 64 : _props$width,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 64 : _props$height,
+      _props$r = props.r1,
+      r1 = _props$r === void 0 ? 0.0586 : _props$r,
+      _props$r2 = props.r2,
+      r2 = _props$r2 === void 0 ? 0.332 : _props$r2,
+      p1 = props.p1,
+      p2 = props.p2,
+      c = props.c;
+  var radius = Math.min(width, height);
+  var normalized1 = p1 != null ? p1 : r1 * radius;
+  var normalized2 = p2 != null ? p2 : r2 * radius;
+  var radius1 = c ? radiusFromC(c).r1 * radius : Math.min(normalized1, normalized2);
+  var radius2 = c ? radiusFromC(c).r2 * radius : normalized2;
   return "\n    M 0," + radius2 + "\n    C 0," + radius1 + " " + radius1 + ",0 " + radius2 + ",0\n    L " + (width - radius2) + ",0\n    C " + (width - radius1) + ",0 " + width + "," + radius1 + " " + width + "," + radius2 + "\n    L " + width + "," + (height - radius2) + "\n    C " + width + "," + (height - radius1) + " " + (width - radius1) + "," + height + " " + (width - radius2) + "," + height + "\n    L " + radius2 + "," + height + "\n    C " + radius1 + "," + height + " 0," + (height - radius1) + " 0," + (height - radius2) + "\n    L 0," + radius2 + "\n  ";
 }
 
-function SquircleShape(props) {
-  var width = props.width,
-      height = props.height,
-      r1 = props.r1,
-      r2 = props.r2;
-  var id = "squircle-" + width + "-" + height + "-" + r1 + "-" + r2;
-  var SquirclePath = createSquirclePath(width, height, r1, r2);
-  return React.createElement("svg", {
+function Squircle(props) {
+  var _useMeasure = useMeasure(),
+      ref = _useMeasure[0],
+      bounds = _useMeasure[1];
+
+  var r1 = props.r1,
+      r2 = props.r2,
+      p1 = props.p1,
+      p2 = props.p2,
+      c = props.c,
+      _props$width = props.width,
+      width = _props$width === void 0 ? bounds.width || 64 : _props$width,
+      _props$height = props.height,
+      height = _props$height === void 0 ? bounds.height || 64 : _props$height;
+  var SquirclePath = createSquirclePath({
+    width: width,
+    height: height,
+    r1: r1,
+    r2: r2,
+    p1: p1,
+    p2: p2,
+    c: c
+  });
+  return React.createElement("div", {
+    ref: ref
+  }, React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
-    viewBox: "0 0 " + width + " " + height
-  }, React.createElement("defs", null, React.createElement("clipPath", {
-    id: id
+    className: props.className
   }, React.createElement("path", {
     fill: "#000",
     d: SquirclePath
-  }))), React.createElement("g", {
-    clipPath: "url(#" + id + ")"
-  }, React.createElement("rect", {
-    width: width,
-    height: height,
-    fill: "#000"
   })));
 }
+function SquircleMask(props) {
+  var _useMeasure2 = useMeasure(),
+      ref = _useMeasure2[0],
+      bounds = _useMeasure2[1];
 
-function Squircle(props) {
-  var _useMeasure = useMeasure(),
-      ref = _useMeasure[0],
-      bounds = _useMeasure[1];
-
-  var _props$r = props.r1,
-      r1 = _props$r === void 0 ? 0.0586 : _props$r,
-      _props$r2 = props.r2,
-      r2 = _props$r2 === void 0 ? 0.332 : _props$r2,
+  var r1 = props.r1,
+      r2 = props.r2,
       p1 = props.p1,
       p2 = props.p2,
-      _props$width = props.width,
-      width = _props$width === void 0 ? bounds.width : _props$width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? bounds.height : _props$height;
+      c = props.c,
+      _props$width2 = props.width,
+      width = _props$width2 === void 0 ? bounds.width : _props$width2,
+      _props$height2 = props.height,
+      height = _props$height2 === void 0 ? bounds.height : _props$height2;
+  var id = "squircle-" + width + "-" + height + "-" + r1 + "-" + r2;
+  var SquirclePath = createSquirclePath({
+    width: width,
+    height: height,
+    r1: r1,
+    r2: r2,
+    p1: p1,
+    p2: p2,
+    c: c
+  });
   return React.createElement(Mask, Object.assign({
-    image: React.createElement(SquircleShape, {
+    image: React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
       width: width,
       height: height,
-      r1: p1 != null ? p1 : r1 * Math.min(width, height),
-      r2: p2 != null ? p2 : r2 * Math.min(width, height)
-    }),
+      viewBox: "0 0 " + width + " " + height
+    }, React.createElement("defs", null, React.createElement("clipPath", {
+      id: id
+    }, React.createElement("path", {
+      fill: "#000",
+      d: SquirclePath
+    }))), React.createElement("g", {
+      clipPath: "url(#" + id + ")"
+    }, React.createElement("rect", {
+      width: width,
+      height: height,
+      fill: "#000"
+    }))),
     ref: ref
@@ -140,3 +213,4 @@ }, props));
 
-exports.default = Squircle;
+exports.Squircle = Squircle;
+exports.SquircleMask = SquircleMask;
 //# sourceMappingURL=react-squircle.cjs.development.js.map

dist/react-squircle.cjs.development.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"react-squircle.cjs.development.js","sources":["../src/components/Mask/Mask.tsx","../src/lib/squircle.ts","../src/components/Squircle/Squircle.tsx"],"sourcesContent":["import React from 'react';\nimport svgToMiniDataURI from 'mini-svg-data-uri';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface MaskProps {\n  image: JSX.Element;\n}\n\nexport const Mask = React.forwardRef<\n  HTMLDivElement,\n  MaskProps & React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { image, style, children, ...rest } = props;\n  const svg = renderToStaticMarkup(props.image);\n  const dataUri = svgToMiniDataURI(svg);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      style={{\n        ...style,\n        maskImage: `url(\"${dataUri}\")`,\n        maskPosition: 'center',\n        maskRepeat: 'no-repeat',\n        WebkitMaskImage: `url(\"${dataUri}\")`,\n        WebkitMaskPosition: 'center',\n        WebkitMaskRepeat: 'no-repeat',\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n","export function createSquirclePath(\n  width: number = 64,\n  height: number = 64,\n  r1: number = 0.0586,\n  r2: number = 0.332\n) {\n  const radius1 = Math.min(r1, r2)\n  const radius2 = r2\n\n  return `\n    M 0,${radius2}\n    C 0,${radius1} ${radius1},0 ${radius2},0\n    L ${width - radius2},0\n    C ${width - radius1},0 ${width},${radius1} ${width},${radius2}\n    L ${width},${height - radius2}\n    C ${width},${height - radius1} ${width - radius1},${height} ${width - radius2},${height}\n    L ${radius2},${height}\n    C ${radius1},${height} 0,${height - radius1} 0,${height - radius2}\n    L 0,${radius2}\n  `\n}\n","import React from 'react';\nimport useMeasure from 'react-use-measure';\nimport { Mask } from '../Mask/Mask';\nimport { createSquirclePath } from '../../lib/squircle';\n\nexport interface SquircleProps {\n  r1?: number;\n  r2?: number;\n  p1?: number;\n  p2?: number;\n}\n\ninterface SquircleShapeProps {\n  width?: number;\n  height?: number;\n  r1?: number;\n  r2?: number;\n}\n\nfunction SquircleShape(props: SquircleShapeProps) {\n  const { width, height, r1, r2 } = props;\n  const id = `squircle-${width}-${height}-${r1}-${r2}`;\n  const SquirclePath = createSquirclePath(width, height, r1, r2);\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n    >\n      <defs>\n        <clipPath id={id}>\n          <path fill=\"#000\" d={SquirclePath} />\n        </clipPath>\n      </defs>\n      <g clipPath={`url(#${id})`}>\n        <rect width={width} height={height} fill=\"#000\" />\n      </g>\n    </svg>\n  );\n}\n\nfunction Squircle(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1 = 0.0586,\n    r2 = 0.332,\n    p1,\n    p2,\n    width = bounds.width,\n    height = bounds.height,\n  } = props;\n\n  return (\n    <Mask\n      image={\n        <SquircleShape\n          width={width}\n          height={height}\n          r1={p1 ?? r1 * Math.min(width, height)}\n          r2={p2 ?? r2 * Math.min(width, height)}\n        />\n      }\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nexport default Squircle;\n"],"names":["Mask","React","forwardRef","props","ref","style","children","rest","svg","renderToStaticMarkup","image","dataUri","svgToMiniDataURI","maskImage","maskPosition","maskRepeat","WebkitMaskImage","WebkitMaskPosition","WebkitMaskRepeat","createSquirclePath","width","height","r1","r2","radius1","Math","min","radius2","SquircleShape","id","SquirclePath","xmlns","viewBox","fill","d","clipPath","Squircle","useMeasure","bounds","p1","p2"],"mappings":"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"}
+{"version":3,"file":"react-squircle.cjs.development.js","sources":["../src/components/Mask/Mask.tsx","../src/lib/squircle.ts","../src/components/Squircle/Squircle.tsx"],"sourcesContent":["import React from 'react';\nimport svgToMiniDataURI from 'mini-svg-data-uri';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface MaskProps {\n  image: JSX.Element;\n}\n\nexport const Mask = React.forwardRef<\n  HTMLDivElement,\n  MaskProps & React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { image, style, children, ...rest } = props;\n  const svg = renderToStaticMarkup(props.image);\n  const dataUri = svgToMiniDataURI(svg);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      style={{\n        ...style,\n        maskImage: `url(\"${dataUri}\")`,\n        maskPosition: 'center',\n        maskRepeat: 'no-repeat',\n        WebkitMaskImage: `url(\"${dataUri}\")`,\n        WebkitMaskPosition: 'center',\n        WebkitMaskRepeat: 'no-repeat',\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n","interface createSquirclePathProps {\n  width?: number\n  height?: number\n  r1?: number\n  r2?: number\n  p1?: number\n  p2?: number\n  c?: number\n}\n\nconst RATIO = 0.17650602409638552\n\nfunction radiusFromC (c?: number) {\n  const byRatio = (val: number) => ({ r1: val * RATIO, r2: val })\n\n  switch (Number(c)) {\n    case 1:\n      return byRatio(0.0375)\n    case 2:\n      return byRatio(0.0750)\n    case 3:\n      return byRatio(0.1500)\n    case 4:\n      return byRatio(0.2984)\n    case 5:\n      return byRatio(0.3320)\n    case 6:\n      return byRatio(0.3656)\n    case 7:\n      return byRatio(0.3992)\n    case 8:\n      return byRatio(0.4328)\n    case 9:\n      return byRatio(0.4664)\n    case 10:\n      return byRatio(0.5000)\n    default:\n      return byRatio(0.3320)\n  }\n}\n\nexport function createSquirclePath(props: createSquirclePathProps) {\n  const { width = 64, height = 64, r1 = 0.0586, r2 = 0.332, p1, p2, c } = props\n  const radius = Math.min(width, height)\n  const normalized1 = p1 ?? r1 * radius\n  const normalized2 = p2 ?? r2 * radius\n  const radius1 = c ? radiusFromC(c).r1 * radius : Math.min(normalized1, normalized2)\n  const radius2 = c ? radiusFromC(c).r2 * radius : normalized2\n\n  return `\n    M 0,${radius2}\n    C 0,${radius1} ${radius1},0 ${radius2},0\n    L ${width - radius2},0\n    C ${width - radius1},0 ${width},${radius1} ${width},${radius2}\n    L ${width},${height - radius2}\n    C ${width},${height - radius1} ${width - radius1},${height} ${width - radius2},${height}\n    L ${radius2},${height}\n    C ${radius1},${height} 0,${height - radius1} 0,${height - radius2}\n    L 0,${radius2}\n  `\n}\n","import React from 'react';\nimport useMeasure from 'react-use-measure';\nimport { Mask } from '../Mask/Mask';\nimport { createSquirclePath } from '../../lib/squircle';\n\nexport interface SquircleProps {\n  width?: number;\n  height?: number;\n  r1?: number;\n  r2?: number;\n  p1?: number;\n  p2?: number;\n  c?: number;\n}\n\nexport function Squircle(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n    width = bounds.width || 64,\n    height = bounds.height || 64,\n  } = props;\n  const SquirclePath = createSquirclePath({\n    width,\n    height,\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n  });\n\n  return (\n    <div ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={width}\n        height={height}\n        className={props.className}\n      >\n        <path fill=\"#000\" d={SquirclePath} />\n      </svg>\n    </div>\n  );\n}\n\nexport function SquircleMask(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n    width = bounds.width,\n    height = bounds.height,\n  } = props;\n\n  const id = `squircle-${width}-${height}-${r1}-${r2}`;\n  const SquirclePath = createSquirclePath({ width, height, r1, r2, p1, p2, c });\n\n  return (\n    <Mask\n      image={\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n        >\n          <defs>\n            <clipPath id={id}>\n              <path fill=\"#000\" d={SquirclePath} />\n            </clipPath>\n          </defs>\n          <g clipPath={`url(#${id})`}>\n            <rect width={width} height={height} fill=\"#000\" />\n          </g>\n        </svg>\n      }\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nexport default SquircleMask;\n"],"names":["Mask","React","forwardRef","props","ref","style","children","rest","svg","renderToStaticMarkup","image","dataUri","svgToMiniDataURI","maskImage","maskPosition","maskRepeat","WebkitMaskImage","WebkitMaskPosition","WebkitMaskRepeat","RATIO","radiusFromC","c","byRatio","val","r1","r2","Number","createSquirclePath","width","height","p1","p2","radius","Math","min","normalized1","normalized2","radius1","radius2","Squircle","useMeasure","bounds","SquirclePath","xmlns","className","fill","d","SquircleMask","id","viewBox","clipPath"],"mappings":"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"}

dist/react-squircle.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=e(require("react-use-measure")),n=e(require("mini-svg-data-uri")),i=require("react-dom/server");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var l=t.forwardRef((function(e,r){var l=e.style,o=e.children,u=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])>=0||(i[r]=e[r]);return i}(e,["image","style","children"]),c=i.renderToStaticMarkup(e.image),s=n(c);return t.createElement("div",Object.assign({},u,{ref:r,style:a({},l,{maskImage:'url("'+s+'")',maskPosition:"center",maskRepeat:"no-repeat",WebkitMaskImage:'url("'+s+'")',WebkitMaskPosition:"center",WebkitMaskRepeat:"no-repeat"})}),o)}));function o(e){var r=e.width,n=e.height,i=e.r1,a=e.r2,l="squircle-"+r+"-"+n+"-"+i+"-"+a,o=function(e,t,r,n){void 0===e&&(e=64),void 0===t&&(t=64),void 0===r&&(r=.0586),void 0===n&&(n=.332);var i=Math.min(r,n);return"\n    M 0,"+n+"\n    C 0,"+i+" "+i+",0 "+n+",0\n    L "+(e-n)+",0\n    C "+(e-i)+",0 "+e+","+i+" "+e+","+n+"\n    L "+e+","+(t-n)+"\n    C "+e+","+(t-i)+" "+(e-i)+","+t+" "+(e-n)+","+t+"\n    L "+n+","+t+"\n    C "+i+","+t+" 0,"+(t-i)+" 0,"+(t-n)+"\n    L 0,"+n+"\n  "}(r,n,i,a);return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:r,height:n,viewBox:"0 0 "+r+" "+n},t.createElement("defs",null,t.createElement("clipPath",{id:l},t.createElement("path",{fill:"#000",d:o}))),t.createElement("g",{clipPath:"url(#"+l+")"},t.createElement("rect",{width:r,height:n,fill:"#000"})))}exports.default=function(e){var n=r(),i=n[0],a=n[1],u=e.r1,c=e.r2,s=void 0===c?.332:c,h=e.p1,d=e.p2,f=e.width,v=void 0===f?a.width:f,m=e.height,g=void 0===m?a.height:m;return t.createElement(l,Object.assign({image:t.createElement(o,{width:v,height:g,r1:null!=h?h:(void 0===u?.0586:u)*Math.min(v,g),r2:null!=d?d:s*Math.min(v,g)}),ref:i},e))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),t=e(require("react-use-measure")),n=e(require("mini-svg-data-uri")),i=require("react-dom/server");function a(){return(a=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var c=r.forwardRef((function(e,t){var c=e.style,u=e.children,s=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(i[t]=e[t]);return i}(e,["image","style","children"]),l=i.renderToStaticMarkup(e.image),h=n(l);return r.createElement("div",Object.assign({},s,{ref:t,style:a({},c,{maskImage:'url("'+h+'")',maskPosition:"center",maskRepeat:"no-repeat",WebkitMaskImage:'url("'+h+'")',WebkitMaskPosition:"center",WebkitMaskRepeat:"no-repeat"})}),u)}));function u(e){var r=function(e){return{r1:.17650602409638552*e,r2:e}};switch(Number(e)){case 1:return r(.0375);case 2:return r(.075);case 3:return r(.15);case 4:return r(.2984);case 5:return r(.332);case 6:return r(.3656);case 7:return r(.3992);case 8:return r(.4328);case 9:return r(.4664);case 10:return r(.5);default:return r(.332)}}function s(e){var r=e.width,t=void 0===r?64:r,n=e.height,i=void 0===n?64:n,a=e.r1,c=void 0===a?.0586:a,s=e.r2,l=void 0===s?.332:s,h=e.p1,o=e.p2,d=e.c,p=Math.min(t,i),f=null!=h?h:c*p,m=null!=o?o:l*p,v=d?u(d).r1*p:Math.min(f,m),g=d?u(d).r2*p:m;return"\n    M 0,"+g+"\n    C 0,"+v+" "+v+",0 "+g+",0\n    L "+(t-g)+",0\n    C "+(t-v)+",0 "+t+","+v+" "+t+","+g+"\n    L "+t+","+(i-g)+"\n    C "+t+","+(i-v)+" "+(t-v)+","+i+" "+(t-g)+","+i+"\n    L "+g+","+i+"\n    C "+v+","+i+" 0,"+(i-v)+" 0,"+(i-g)+"\n    L 0,"+g+"\n  "}exports.Squircle=function(e){var n=t(),i=n[0],a=n[1],c=e.width,u=void 0===c?a.width||64:c,l=e.height,h=void 0===l?a.height||64:l,o=s({width:u,height:h,r1:e.r1,r2:e.r2,p1:e.p1,p2:e.p2,c:e.c});return r.createElement("div",{ref:i},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:u,height:h,className:e.className},r.createElement("path",{fill:"#000",d:o})))},exports.SquircleMask=function(e){var n=t(),i=n[0],a=n[1],u=e.r1,l=e.r2,h=e.width,o=void 0===h?a.width:h,d=e.height,p=void 0===d?a.height:d,f="squircle-"+o+"-"+p+"-"+u+"-"+l,m=s({width:o,height:p,r1:u,r2:l,p1:e.p1,p2:e.p2,c:e.c});return r.createElement(c,Object.assign({image:r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:o,height:p,viewBox:"0 0 "+o+" "+p},r.createElement("defs",null,r.createElement("clipPath",{id:f},r.createElement("path",{fill:"#000",d:m}))),r.createElement("g",{clipPath:"url(#"+f+")"},r.createElement("rect",{width:o,height:p,fill:"#000"}))),ref:i},e))};
 //# sourceMappingURL=react-squircle.cjs.production.min.js.map

dist/react-squircle.cjs.production.min.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"react-squircle.cjs.production.min.js","sources":["../src/components/Mask/Mask.tsx","../src/components/Squircle/Squircle.tsx","../src/lib/squircle.ts"],"sourcesContent":["import React from 'react';\nimport svgToMiniDataURI from 'mini-svg-data-uri';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface MaskProps {\n  image: JSX.Element;\n}\n\nexport const Mask = React.forwardRef<\n  HTMLDivElement,\n  MaskProps & React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { image, style, children, ...rest } = props;\n  const svg = renderToStaticMarkup(props.image);\n  const dataUri = svgToMiniDataURI(svg);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      style={{\n        ...style,\n        maskImage: `url(\"${dataUri}\")`,\n        maskPosition: 'center',\n        maskRepeat: 'no-repeat',\n        WebkitMaskImage: `url(\"${dataUri}\")`,\n        WebkitMaskPosition: 'center',\n        WebkitMaskRepeat: 'no-repeat',\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n","import React from 'react';\nimport useMeasure from 'react-use-measure';\nimport { Mask } from '../Mask/Mask';\nimport { createSquirclePath } from '../../lib/squircle';\n\nexport interface SquircleProps {\n  r1?: number;\n  r2?: number;\n  p1?: number;\n  p2?: number;\n}\n\ninterface SquircleShapeProps {\n  width?: number;\n  height?: number;\n  r1?: number;\n  r2?: number;\n}\n\nfunction SquircleShape(props: SquircleShapeProps) {\n  const { width, height, r1, r2 } = props;\n  const id = `squircle-${width}-${height}-${r1}-${r2}`;\n  const SquirclePath = createSquirclePath(width, height, r1, r2);\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n    >\n      <defs>\n        <clipPath id={id}>\n          <path fill=\"#000\" d={SquirclePath} />\n        </clipPath>\n      </defs>\n      <g clipPath={`url(#${id})`}>\n        <rect width={width} height={height} fill=\"#000\" />\n      </g>\n    </svg>\n  );\n}\n\nfunction Squircle(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1 = 0.0586,\n    r2 = 0.332,\n    p1,\n    p2,\n    width = bounds.width,\n    height = bounds.height,\n  } = props;\n\n  return (\n    <Mask\n      image={\n        <SquircleShape\n          width={width}\n          height={height}\n          r1={p1 ?? r1 * Math.min(width, height)}\n          r2={p2 ?? r2 * Math.min(width, height)}\n        />\n      }\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nexport default Squircle;\n","export function createSquirclePath(\n  width: number = 64,\n  height: number = 64,\n  r1: number = 0.0586,\n  r2: number = 0.332\n) {\n  const radius1 = Math.min(r1, r2)\n  const radius2 = r2\n\n  return `\n    M 0,${radius2}\n    C 0,${radius1} ${radius1},0 ${radius2},0\n    L ${width - radius2},0\n    C ${width - radius1},0 ${width},${radius1} ${width},${radius2}\n    L ${width},${height - radius2}\n    C ${width},${height - radius1} ${width - radius1},${height} ${width - radius2},${height}\n    L ${radius2},${height}\n    C ${radius1},${height} 0,${height - radius1} 0,${height - radius2}\n    L 0,${radius2}\n  `\n}\n"],"names":["Mask","React","forwardRef","props","ref","style","children","rest","svg","renderToStaticMarkup","image","dataUri","svgToMiniDataURI","maskImage","maskPosition","maskRepeat","WebkitMaskImage","WebkitMaskPosition","WebkitMaskRepeat","SquircleShape","width","height","r1","r2","id","SquirclePath","radius1","Math","min","createSquirclePath","xmlns","viewBox","fill","d","clipPath","useMeasure","bounds","p1","p2"],"mappings":"qdAQO,IAAMA,EAAOC,EAAMC,YAGxB,SAACC,EAAOC,OACOC,EAA6BF,EAA7BE,MAAOC,EAAsBH,EAAtBG,SAAaC,qIAASJ,gCACtCK,EAAMC,uBAAqBN,EAAMO,OACjCC,EAAUC,EAAiBJ,UAG/BP,uCACMM,GACJH,IAAKA,EACLC,WACKA,GACHQ,kBAAmBF,OACnBG,aAAc,SACdC,WAAY,YACZC,wBAAyBL,OACzBM,mBAAoB,SACpBC,iBAAkB,gBAGnBZ,MCXP,SAASa,EAAchB,OACbiB,EAA0BjB,EAA1BiB,MAAOC,EAAmBlB,EAAnBkB,OAAQC,EAAWnB,EAAXmB,GAAIC,EAAOpB,EAAPoB,GACrBC,cAAiBJ,MAASC,MAAUC,MAAMC,EAC1CE,WCrBNL,EACAC,EACAC,EACAC,YAHAH,IAAAA,EAAgB,aAChBC,IAAAA,EAAiB,aACjBC,IAAAA,EAAa,gBACbC,IAAAA,EAAa,UAEPG,EAAUC,KAAKC,IAAIN,EAAIC,sBACbA,eAIRG,MAAWA,QAJHH,gBAKVH,EALUG,iBAMVH,EAAQM,SAAaN,MAASM,MAAWN,MAN/BG,aAOVH,OAASC,EAPCE,cAQVH,OAASC,EAASK,QAAWN,EAAQM,OAAWL,OAAUD,EARhDG,OAQmEF,aARnEE,MASCF,aACXK,MAAWL,SAAYA,EAASK,UAAaL,EAVnCE,gBAAAA,SDeKM,CAAmBT,EAAOC,EAAQC,EAAIC,UAGzDtB,uBACE6B,MAAM,6BACNV,MAAOA,EACPC,OAAQA,EACRU,eAAgBX,MAASC,GAEzBpB,4BACEA,4BAAUuB,GAAIA,GACZvB,wBAAM+B,KAAK,OAAOC,EAAGR,MAGzBxB,qBAAGiC,iBAAkBV,OACnBvB,wBAAMmB,MAAOA,EAAOC,OAAQA,EAAQW,KAAK,2BAMjD,SACE7B,SAEsBgC,IAAf/B,OAAKgC,SAQRjC,EANFmB,KAMEnB,EALFoB,GAAAA,aAAK,OACLc,EAIElC,EAJFkC,GACAC,EAGEnC,EAHFmC,KAGEnC,EAFFiB,MAAAA,aAAQgB,EAAOhB,UAEbjB,EADFkB,OAAAA,aAASe,EAAOf,gBAIhBpB,gBAACD,iBACCU,MACET,gBAACkB,GACCC,MAAOA,EACPC,OAAQA,EACRC,SAAIe,EAAAA,cAdL,SAcgBV,KAAKC,IAAIR,EAAOC,GAC/BE,SAAIe,EAAAA,EAAMf,EAAKI,KAAKC,IAAIR,EAAOC,KAGnCjB,IAAKA,GACDD"}
+{"version":3,"file":"react-squircle.cjs.production.min.js","sources":["../src/components/Mask/Mask.tsx","../src/lib/squircle.ts","../src/components/Squircle/Squircle.tsx"],"sourcesContent":["import React from 'react';\nimport svgToMiniDataURI from 'mini-svg-data-uri';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface MaskProps {\n  image: JSX.Element;\n}\n\nexport const Mask = React.forwardRef<\n  HTMLDivElement,\n  MaskProps & React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { image, style, children, ...rest } = props;\n  const svg = renderToStaticMarkup(props.image);\n  const dataUri = svgToMiniDataURI(svg);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      style={{\n        ...style,\n        maskImage: `url(\"${dataUri}\")`,\n        maskPosition: 'center',\n        maskRepeat: 'no-repeat',\n        WebkitMaskImage: `url(\"${dataUri}\")`,\n        WebkitMaskPosition: 'center',\n        WebkitMaskRepeat: 'no-repeat',\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n","interface createSquirclePathProps {\n  width?: number\n  height?: number\n  r1?: number\n  r2?: number\n  p1?: number\n  p2?: number\n  c?: number\n}\n\nconst RATIO = 0.17650602409638552\n\nfunction radiusFromC (c?: number) {\n  const byRatio = (val: number) => ({ r1: val * RATIO, r2: val })\n\n  switch (Number(c)) {\n    case 1:\n      return byRatio(0.0375)\n    case 2:\n      return byRatio(0.0750)\n    case 3:\n      return byRatio(0.1500)\n    case 4:\n      return byRatio(0.2984)\n    case 5:\n      return byRatio(0.3320)\n    case 6:\n      return byRatio(0.3656)\n    case 7:\n      return byRatio(0.3992)\n    case 8:\n      return byRatio(0.4328)\n    case 9:\n      return byRatio(0.4664)\n    case 10:\n      return byRatio(0.5000)\n    default:\n      return byRatio(0.3320)\n  }\n}\n\nexport function createSquirclePath(props: createSquirclePathProps) {\n  const { width = 64, height = 64, r1 = 0.0586, r2 = 0.332, p1, p2, c } = props\n  const radius = Math.min(width, height)\n  const normalized1 = p1 ?? r1 * radius\n  const normalized2 = p2 ?? r2 * radius\n  const radius1 = c ? radiusFromC(c).r1 * radius : Math.min(normalized1, normalized2)\n  const radius2 = c ? radiusFromC(c).r2 * radius : normalized2\n\n  return `\n    M 0,${radius2}\n    C 0,${radius1} ${radius1},0 ${radius2},0\n    L ${width - radius2},0\n    C ${width - radius1},0 ${width},${radius1} ${width},${radius2}\n    L ${width},${height - radius2}\n    C ${width},${height - radius1} ${width - radius1},${height} ${width - radius2},${height}\n    L ${radius2},${height}\n    C ${radius1},${height} 0,${height - radius1} 0,${height - radius2}\n    L 0,${radius2}\n  `\n}\n","import React from 'react';\nimport useMeasure from 'react-use-measure';\nimport { Mask } from '../Mask/Mask';\nimport { createSquirclePath } from '../../lib/squircle';\n\nexport interface SquircleProps {\n  width?: number;\n  height?: number;\n  r1?: number;\n  r2?: number;\n  p1?: number;\n  p2?: number;\n  c?: number;\n}\n\nexport function Squircle(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n    width = bounds.width || 64,\n    height = bounds.height || 64,\n  } = props;\n  const SquirclePath = createSquirclePath({\n    width,\n    height,\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n  });\n\n  return (\n    <div ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={width}\n        height={height}\n        className={props.className}\n      >\n        <path fill=\"#000\" d={SquirclePath} />\n      </svg>\n    </div>\n  );\n}\n\nexport function SquircleMask(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n    width = bounds.width,\n    height = bounds.height,\n  } = props;\n\n  const id = `squircle-${width}-${height}-${r1}-${r2}`;\n  const SquirclePath = createSquirclePath({ width, height, r1, r2, p1, p2, c });\n\n  return (\n    <Mask\n      image={\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n        >\n          <defs>\n            <clipPath id={id}>\n              <path fill=\"#000\" d={SquirclePath} />\n            </clipPath>\n          </defs>\n          <g clipPath={`url(#${id})`}>\n            <rect width={width} height={height} fill=\"#000\" />\n          </g>\n        </svg>\n      }\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nexport default SquircleMask;\n"],"names":["Mask","React","forwardRef","props","ref","style","children","rest","svg","renderToStaticMarkup","image","dataUri","svgToMiniDataURI","maskImage","maskPosition","maskRepeat","WebkitMaskImage","WebkitMaskPosition","WebkitMaskRepeat","radiusFromC","c","byRatio","val","r1","r2","Number","createSquirclePath","width","height","p1","p2","radius","Math","min","normalized1","normalized2","radius1","radius2","useMeasure","bounds","SquirclePath","xmlns","className","fill","d","id","viewBox","clipPath"],"mappings":"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"}

dist/react-squircle.esm.js

@@ -59,72 +59,145 @@ import React from 'react';
 
-function createSquirclePath(width, height, r1, r2) {
-  if (width === void 0) {
-    width = 64;
-  }
+var RATIO = 0.17650602409638552;
 
-  if (height === void 0) {
-    height = 64;
-  }
+function radiusFromC(c) {
+  var byRatio = function byRatio(val) {
+    return {
+      r1: val * RATIO,
+      r2: val
+    };
+  };
 
-  if (r1 === void 0) {
-    r1 = 0.0586;
-  }
+  switch (Number(c)) {
+    case 1:
+      return byRatio(0.0375);
 
-  if (r2 === void 0) {
-    r2 = 0.332;
+    case 2:
+      return byRatio(0.0750);
+
+    case 3:
+      return byRatio(0.1500);
+
+    case 4:
+      return byRatio(0.2984);
+
+    case 5:
+      return byRatio(0.3320);
+
+    case 6:
+      return byRatio(0.3656);
+
+    case 7:
+      return byRatio(0.3992);
+
+    case 8:
+      return byRatio(0.4328);
+
+    case 9:
+      return byRatio(0.4664);
+
+    case 10:
+      return byRatio(0.5000);
+
+    default:
+      return byRatio(0.3320);
   }
+}
 
-  var radius1 = Math.min(r1, r2);
-  var radius2 = r2;
+function createSquirclePath(props) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 64 : _props$width,
+      _props$height = props.height,
+      height = _props$height === void 0 ? 64 : _props$height,
+      _props$r = props.r1,
+      r1 = _props$r === void 0 ? 0.0586 : _props$r,
+      _props$r2 = props.r2,
+      r2 = _props$r2 === void 0 ? 0.332 : _props$r2,
+      p1 = props.p1,
+      p2 = props.p2,
+      c = props.c;
+  var radius = Math.min(width, height);
+  var normalized1 = p1 != null ? p1 : r1 * radius;
+  var normalized2 = p2 != null ? p2 : r2 * radius;
+  var radius1 = c ? radiusFromC(c).r1 * radius : Math.min(normalized1, normalized2);
+  var radius2 = c ? radiusFromC(c).r2 * radius : normalized2;
   return "\n    M 0," + radius2 + "\n    C 0," + radius1 + " " + radius1 + ",0 " + radius2 + ",0\n    L " + (width - radius2) + ",0\n    C " + (width - radius1) + ",0 " + width + "," + radius1 + " " + width + "," + radius2 + "\n    L " + width + "," + (height - radius2) + "\n    C " + width + "," + (height - radius1) + " " + (width - radius1) + "," + height + " " + (width - radius2) + "," + height + "\n    L " + radius2 + "," + height + "\n    C " + radius1 + "," + height + " 0," + (height - radius1) + " 0," + (height - radius2) + "\n    L 0," + radius2 + "\n  ";
 }
 
-function SquircleShape(props) {
-  var width = props.width,
-      height = props.height,
-      r1 = props.r1,
-      r2 = props.r2;
-  var id = "squircle-" + width + "-" + height + "-" + r1 + "-" + r2;
-  var SquirclePath = createSquirclePath(width, height, r1, r2);
-  return React.createElement("svg", {
+function Squircle(props) {
+  var _useMeasure = useMeasure(),
+      ref = _useMeasure[0],
+      bounds = _useMeasure[1];
+
+  var r1 = props.r1,
+      r2 = props.r2,
+      p1 = props.p1,
+      p2 = props.p2,
+      c = props.c,
+      _props$width = props.width,
+      width = _props$width === void 0 ? bounds.width || 64 : _props$width,
+      _props$height = props.height,
+      height = _props$height === void 0 ? bounds.height || 64 : _props$height;
+  var SquirclePath = createSquirclePath({
+    width: width,
+    height: height,
+    r1: r1,
+    r2: r2,
+    p1: p1,
+    p2: p2,
+    c: c
+  });
+  return React.createElement("div", {
+    ref: ref
+  }, React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
     height: height,
-    viewBox: "0 0 " + width + " " + height
-  }, React.createElement("defs", null, React.createElement("clipPath", {
-    id: id
+    className: props.className
   }, React.createElement("path", {
     fill: "#000",
     d: SquirclePath
-  }))), React.createElement("g", {
-    clipPath: "url(#" + id + ")"
-  }, React.createElement("rect", {
-    width: width,
-    height: height,
-    fill: "#000"
   })));
 }
+function SquircleMask(props) {
+  var _useMeasure2 = useMeasure(),
+      ref = _useMeasure2[0],
+      bounds = _useMeasure2[1];
 
-function Squircle(props) {
-  var _useMeasure = useMeasure(),
-      ref = _useMeasure[0],
-      bounds = _useMeasure[1];
-
-  var _props$r = props.r1,
-      r1 = _props$r === void 0 ? 0.0586 : _props$r,
-      _props$r2 = props.r2,
-      r2 = _props$r2 === void 0 ? 0.332 : _props$r2,
+  var r1 = props.r1,
+      r2 = props.r2,
       p1 = props.p1,
       p2 = props.p2,
-      _props$width = props.width,
-      width = _props$width === void 0 ? bounds.width : _props$width,
-      _props$height = props.height,
-      height = _props$height === void 0 ? bounds.height : _props$height;
+      c = props.c,
+      _props$width2 = props.width,
+      width = _props$width2 === void 0 ? bounds.width : _props$width2,
+      _props$height2 = props.height,
+      height = _props$height2 === void 0 ? bounds.height : _props$height2;
+  var id = "squircle-" + width + "-" + height + "-" + r1 + "-" + r2;
+  var SquirclePath = createSquirclePath({
+    width: width,
+    height: height,
+    r1: r1,
+    r2: r2,
+    p1: p1,
+    p2: p2,
+    c: c
+  });
   return React.createElement(Mask, Object.assign({
-    image: React.createElement(SquircleShape, {
+    image: React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
       width: width,
       height: height,
-      r1: p1 != null ? p1 : r1 * Math.min(width, height),
-      r2: p2 != null ? p2 : r2 * Math.min(width, height)
-    }),
+      viewBox: "0 0 " + width + " " + height
+    }, React.createElement("defs", null, React.createElement("clipPath", {
+      id: id
+    }, React.createElement("path", {
+      fill: "#000",
+      d: SquirclePath
+    }))), React.createElement("g", {
+      clipPath: "url(#" + id + ")"
+    }, React.createElement("rect", {
+      width: width,
+      height: height,
+      fill: "#000"
+    }))),
     ref: ref
@@ -134,3 +207,3 @@ }, props));
 
-export default Squircle;
+export { Squircle, SquircleMask };
 //# sourceMappingURL=react-squircle.esm.js.map

dist/react-squircle.esm.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"react-squircle.esm.js","sources":["../src/components/Mask/Mask.tsx","../src/lib/squircle.ts","../src/components/Squircle/Squircle.tsx"],"sourcesContent":["import React from 'react';\nimport svgToMiniDataURI from 'mini-svg-data-uri';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface MaskProps {\n  image: JSX.Element;\n}\n\nexport const Mask = React.forwardRef<\n  HTMLDivElement,\n  MaskProps & React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { image, style, children, ...rest } = props;\n  const svg = renderToStaticMarkup(props.image);\n  const dataUri = svgToMiniDataURI(svg);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      style={{\n        ...style,\n        maskImage: `url(\"${dataUri}\")`,\n        maskPosition: 'center',\n        maskRepeat: 'no-repeat',\n        WebkitMaskImage: `url(\"${dataUri}\")`,\n        WebkitMaskPosition: 'center',\n        WebkitMaskRepeat: 'no-repeat',\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n","export function createSquirclePath(\n  width: number = 64,\n  height: number = 64,\n  r1: number = 0.0586,\n  r2: number = 0.332\n) {\n  const radius1 = Math.min(r1, r2)\n  const radius2 = r2\n\n  return `\n    M 0,${radius2}\n    C 0,${radius1} ${radius1},0 ${radius2},0\n    L ${width - radius2},0\n    C ${width - radius1},0 ${width},${radius1} ${width},${radius2}\n    L ${width},${height - radius2}\n    C ${width},${height - radius1} ${width - radius1},${height} ${width - radius2},${height}\n    L ${radius2},${height}\n    C ${radius1},${height} 0,${height - radius1} 0,${height - radius2}\n    L 0,${radius2}\n  `\n}\n","import React from 'react';\nimport useMeasure from 'react-use-measure';\nimport { Mask } from '../Mask/Mask';\nimport { createSquirclePath } from '../../lib/squircle';\n\nexport interface SquircleProps {\n  r1?: number;\n  r2?: number;\n  p1?: number;\n  p2?: number;\n}\n\ninterface SquircleShapeProps {\n  width?: number;\n  height?: number;\n  r1?: number;\n  r2?: number;\n}\n\nfunction SquircleShape(props: SquircleShapeProps) {\n  const { width, height, r1, r2 } = props;\n  const id = `squircle-${width}-${height}-${r1}-${r2}`;\n  const SquirclePath = createSquirclePath(width, height, r1, r2);\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n    >\n      <defs>\n        <clipPath id={id}>\n          <path fill=\"#000\" d={SquirclePath} />\n        </clipPath>\n      </defs>\n      <g clipPath={`url(#${id})`}>\n        <rect width={width} height={height} fill=\"#000\" />\n      </g>\n    </svg>\n  );\n}\n\nfunction Squircle(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1 = 0.0586,\n    r2 = 0.332,\n    p1,\n    p2,\n    width = bounds.width,\n    height = bounds.height,\n  } = props;\n\n  return (\n    <Mask\n      image={\n        <SquircleShape\n          width={width}\n          height={height}\n          r1={p1 ?? r1 * Math.min(width, height)}\n          r2={p2 ?? r2 * Math.min(width, height)}\n        />\n      }\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nexport default Squircle;\n"],"names":["Mask","React","forwardRef","props","ref","style","children","rest","svg","renderToStaticMarkup","image","dataUri","svgToMiniDataURI","maskImage","maskPosition","maskRepeat","WebkitMaskImage","WebkitMaskPosition","WebkitMaskRepeat","createSquirclePath","width","height","r1","r2","radius1","Math","min","radius2","SquircleShape","id","SquirclePath","xmlns","viewBox","fill","d","clipPath","Squircle","useMeasure","bounds","p1","p2"],"mappings":"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"}
+{"version":3,"file":"react-squircle.esm.js","sources":["../src/components/Mask/Mask.tsx","../src/lib/squircle.ts","../src/components/Squircle/Squircle.tsx"],"sourcesContent":["import React from 'react';\nimport svgToMiniDataURI from 'mini-svg-data-uri';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\nexport interface MaskProps {\n  image: JSX.Element;\n}\n\nexport const Mask = React.forwardRef<\n  HTMLDivElement,\n  MaskProps & React.HTMLAttributes<HTMLDivElement>\n>((props, ref) => {\n  const { image, style, children, ...rest } = props;\n  const svg = renderToStaticMarkup(props.image);\n  const dataUri = svgToMiniDataURI(svg);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      style={{\n        ...style,\n        maskImage: `url(\"${dataUri}\")`,\n        maskPosition: 'center',\n        maskRepeat: 'no-repeat',\n        WebkitMaskImage: `url(\"${dataUri}\")`,\n        WebkitMaskPosition: 'center',\n        WebkitMaskRepeat: 'no-repeat',\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n","interface createSquirclePathProps {\n  width?: number\n  height?: number\n  r1?: number\n  r2?: number\n  p1?: number\n  p2?: number\n  c?: number\n}\n\nconst RATIO = 0.17650602409638552\n\nfunction radiusFromC (c?: number) {\n  const byRatio = (val: number) => ({ r1: val * RATIO, r2: val })\n\n  switch (Number(c)) {\n    case 1:\n      return byRatio(0.0375)\n    case 2:\n      return byRatio(0.0750)\n    case 3:\n      return byRatio(0.1500)\n    case 4:\n      return byRatio(0.2984)\n    case 5:\n      return byRatio(0.3320)\n    case 6:\n      return byRatio(0.3656)\n    case 7:\n      return byRatio(0.3992)\n    case 8:\n      return byRatio(0.4328)\n    case 9:\n      return byRatio(0.4664)\n    case 10:\n      return byRatio(0.5000)\n    default:\n      return byRatio(0.3320)\n  }\n}\n\nexport function createSquirclePath(props: createSquirclePathProps) {\n  const { width = 64, height = 64, r1 = 0.0586, r2 = 0.332, p1, p2, c } = props\n  const radius = Math.min(width, height)\n  const normalized1 = p1 ?? r1 * radius\n  const normalized2 = p2 ?? r2 * radius\n  const radius1 = c ? radiusFromC(c).r1 * radius : Math.min(normalized1, normalized2)\n  const radius2 = c ? radiusFromC(c).r2 * radius : normalized2\n\n  return `\n    M 0,${radius2}\n    C 0,${radius1} ${radius1},0 ${radius2},0\n    L ${width - radius2},0\n    C ${width - radius1},0 ${width},${radius1} ${width},${radius2}\n    L ${width},${height - radius2}\n    C ${width},${height - radius1} ${width - radius1},${height} ${width - radius2},${height}\n    L ${radius2},${height}\n    C ${radius1},${height} 0,${height - radius1} 0,${height - radius2}\n    L 0,${radius2}\n  `\n}\n","import React from 'react';\nimport useMeasure from 'react-use-measure';\nimport { Mask } from '../Mask/Mask';\nimport { createSquirclePath } from '../../lib/squircle';\n\nexport interface SquircleProps {\n  width?: number;\n  height?: number;\n  r1?: number;\n  r2?: number;\n  p1?: number;\n  p2?: number;\n  c?: number;\n}\n\nexport function Squircle(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n    width = bounds.width || 64,\n    height = bounds.height || 64,\n  } = props;\n  const SquirclePath = createSquirclePath({\n    width,\n    height,\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n  });\n\n  return (\n    <div ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={width}\n        height={height}\n        className={props.className}\n      >\n        <path fill=\"#000\" d={SquirclePath} />\n      </svg>\n    </div>\n  );\n}\n\nexport function SquircleMask(\n  props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement\n) {\n  const [ref, bounds] = useMeasure();\n  const {\n    r1,\n    r2,\n    p1,\n    p2,\n    c,\n    width = bounds.width,\n    height = bounds.height,\n  } = props;\n\n  const id = `squircle-${width}-${height}-${r1}-${r2}`;\n  const SquirclePath = createSquirclePath({ width, height, r1, r2, p1, p2, c });\n\n  return (\n    <Mask\n      image={\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width={width}\n          height={height}\n          viewBox={`0 0 ${width} ${height}`}\n        >\n          <defs>\n            <clipPath id={id}>\n              <path fill=\"#000\" d={SquirclePath} />\n            </clipPath>\n          </defs>\n          <g clipPath={`url(#${id})`}>\n            <rect width={width} height={height} fill=\"#000\" />\n          </g>\n        </svg>\n      }\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nexport default SquircleMask;\n"],"names":["Mask","React","forwardRef","props","ref","style","children","rest","svg","renderToStaticMarkup","image","dataUri","svgToMiniDataURI","maskImage","maskPosition","maskRepeat","WebkitMaskImage","WebkitMaskPosition","WebkitMaskRepeat","RATIO","radiusFromC","c","byRatio","val","r1","r2","Number","createSquirclePath","width","height","p1","p2","radius","Math","min","normalized1","normalized2","radius1","radius2","Squircle","useMeasure","bounds","SquirclePath","xmlns","className","fill","d","SquircleMask","id","viewBox","clipPath"],"mappings":"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"}

package.json

 {
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/components/Squircle/Squircle.tsx

@@ -7,2 +7,4 @@ import React from 'react';
 export interface SquircleProps {
+  width?: number;
+  height?: number;
   r1?: number;
@@ -12,36 +14,43 @@ r2?: number;
   p2?: number;
+  c?: number;
 }
 
-interface SquircleShapeProps {
-  width?: number;
-  height?: number;
-  r1?: number;
-  r2?: number;
-}
+export function Squircle(
+  props: SquircleProps & React.HTMLAttributes<HTMLDivElement>
+) {
+  const [ref, bounds] = useMeasure();
+  const {
+    r1,
+    r2,
+    p1,
+    p2,
+    c,
+    width = bounds.width || 64,
+    height = bounds.height || 64,
+  } = props;
+  const SquirclePath = createSquirclePath({
+    width,
+    height,
+    r1,
+    r2,
+    p1,
+    p2,
+    c,
+  });
 
-function SquircleShape(props: SquircleShapeProps) {
-  const { width, height, r1, r2 } = props;
-  const id = `squircle-${width}-${height}-${r1}-${r2}`;
-  const SquirclePath = createSquirclePath(width, height, r1, r2);
-
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-    >
-      <defs>
-        <clipPath id={id}>
-          <path fill="#000" d={SquirclePath} />
-        </clipPath>
-      </defs>
-      <g clipPath={`url(#${id})`}>
-        <rect width={width} height={height} fill="#000" />
-      </g>
-    </svg>
+    <div ref={ref}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={width}
+        height={height}
+        className={props.className}
+      >
+        <path fill="#000" d={SquirclePath} />
+      </svg>
+    </div>
   );
 }
 
-function Squircle(
+export function SquircleMask(
   props: SquircleProps & React.HTMLAttributes<HTMLDivElement> & HTMLElement
@@ -51,6 +60,7 @@ ) {
   const {
-    r1 = 0.0586,
-    r2 = 0.332,
+    r1,
+    r2,
     p1,
     p2,
+    c,
     width = bounds.width,
@@ -60,11 +70,23 @@ height = bounds.height,
 
+  const id = `squircle-${width}-${height}-${r1}-${r2}`;
+  const SquirclePath = createSquirclePath({ width, height, r1, r2, p1, p2, c });
+
   return (
     <Mask
       image={
-        <SquircleShape
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
           width={width}
           height={height}
-          r1={p1 ?? r1 * Math.min(width, height)}
-          r2={p2 ?? r2 * Math.min(width, height)}
-        />
+          viewBox={`0 0 ${width} ${height}`}
+        >
+          <defs>
+            <clipPath id={id}>
+              <path fill="#000" d={SquirclePath} />
+            </clipPath>
+          </defs>
+          <g clipPath={`url(#${id})`}>
+            <rect width={width} height={height} fill="#000" />
+          </g>
+        </svg>
       }
@@ -77,2 +99,2 @@ ref={ref}
 
-export default Squircle;
+export default SquircleMask;

src/index.tsx

@@ -1,7 +0,5 @@
-import Squircle, {
-  SquircleProps as Props,
+export {
+  Squircle,
+  SquircleMask,
+  SquircleProps,
 } from './components/Squircle/Squircle';
-
-export type SquircleProps = Props;
-
-export default Squircle;

src/lib/squircle.ts

@@ -1,10 +0,50 @@
-export function createSquirclePath(
-  width: number = 64,
-  height: number = 64,
-  r1: number = 0.0586,
-  r2: number = 0.332
-) {
-  const radius1 = Math.min(r1, r2)
-  const radius2 = r2
+interface createSquirclePathProps {
+  width?: number
+  height?: number
+  r1?: number
+  r2?: number
+  p1?: number
+  p2?: number
+  c?: number
+}
 
+const RATIO = 0.17650602409638552
+
+function radiusFromC (c?: number) {
+  const byRatio = (val: number) => ({ r1: val * RATIO, r2: val })
+
+  switch (Number(c)) {
+    case 1:
+      return byRatio(0.0375)
+    case 2:
+      return byRatio(0.0750)
+    case 3:
+      return byRatio(0.1500)
+    case 4:
+      return byRatio(0.2984)
+    case 5:
+      return byRatio(0.3320)
+    case 6:
+      return byRatio(0.3656)
+    case 7:
+      return byRatio(0.3992)
+    case 8:
+      return byRatio(0.4328)
+    case 9:
+      return byRatio(0.4664)
+    case 10:
+      return byRatio(0.5000)
+    default:
+      return byRatio(0.3320)
+  }
+}
+
+export function createSquirclePath(props: createSquirclePathProps) {
+  const { width = 64, height = 64, r1 = 0.0586, r2 = 0.332, p1, p2, c } = props
+  const radius = Math.min(width, height)
+  const normalized1 = p1 ?? r1 * radius
+  const normalized2 = p2 ?? r2 * radius
+  const radius1 = c ? radiusFromC(c).r1 * radius : Math.min(normalized1, normalized2)
+  const radius2 = c ? radiusFromC(c).r2 * radius : normalized2
+
   return `
@@ -11,0 +51,0 @@ M 0,${radius2}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56429

33.59%

Lines of code

594

51.53%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes