squircler
Version:
� The MOST PERFECT React squircle component ever created. Zero ovals, infinite possibilities.
772 lines (769 loc) • 25.1 kB
JavaScript
import We, { forwardRef as fr, useRef as dr, useState as vr, useEffect as pr } from "react";
var fe = { exports: {} }, K = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ae;
function br() {
if (Ae) return K;
Ae = 1;
var O = We, E = Symbol.for("react.element"), d = Symbol.for("react.fragment"), c = Object.prototype.hasOwnProperty, F = O.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
function o(S, f, P) {
var s, _ = {}, y = null, A = null;
P !== void 0 && (y = "" + P), f.key !== void 0 && (y = "" + f.key), f.ref !== void 0 && (A = f.ref);
for (s in f) c.call(f, s) && !p.hasOwnProperty(s) && (_[s] = f[s]);
if (S && S.defaultProps) for (s in f = S.defaultProps, f) _[s] === void 0 && (_[s] = f[s]);
return { $$typeof: E, type: S, key: y, ref: A, props: _, _owner: F.current };
}
return K.Fragment = d, K.jsx = o, K.jsxs = o, K;
}
var B = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ie;
function gr() {
return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && function() {
var O = We, E = Symbol.for("react.element"), d = Symbol.for("react.portal"), c = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), p = Symbol.for("react.profiler"), o = Symbol.for("react.provider"), S = Symbol.for("react.context"), f = Symbol.for("react.forward_ref"), P = Symbol.for("react.suspense"), s = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), A = Symbol.for("react.offscreen"), j = Symbol.iterator, G = "@@iterator";
function re(e) {
if (e === null || typeof e != "object")
return null;
var r = j && e[j] || e[G];
return typeof r == "function" ? r : null;
}
var w = O.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function g(e) {
{
for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
t[n - 1] = arguments[n];
k("error", e, t);
}
}
function k(e, r, t) {
{
var n = w.ReactDebugCurrentFrame, u = n.getStackAddendum();
u !== "" && (r += "%s", t = t.concat([u]));
var l = t.map(function(i) {
return String(i);
});
l.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, l);
}
}
var D = !1, Y = !1, I = !1, L = !1, te = !1, N;
N = Symbol.for("react.module.reference");
function q(e) {
return !!(typeof e == "string" || typeof e == "function" || e === c || e === p || te || e === F || e === P || e === s || L || e === A || D || Y || I || typeof e == "object" && e !== null && (e.$$typeof === y || e.$$typeof === _ || e.$$typeof === o || e.$$typeof === S || e.$$typeof === f || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === N || e.getModuleId !== void 0));
}
function x(e, r, t) {
var n = e.displayName;
if (n)
return n;
var u = r.displayName || r.name || "";
return u !== "" ? t + "(" + u + ")" : t;
}
function $(e) {
return e.displayName || "Context";
}
function C(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case c:
return "Fragment";
case d:
return "Portal";
case p:
return "Profiler";
case F:
return "StrictMode";
case P:
return "Suspense";
case s:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case S:
var r = e;
return $(r) + ".Consumer";
case o:
var t = e;
return $(t._context) + ".Provider";
case f:
return x(e, e.render, "ForwardRef");
case _:
var n = e.displayName || null;
return n !== null ? n : C(e.type) || "Memo";
case y: {
var u = e, l = u._payload, i = u._init;
try {
return C(i(l));
} catch {
return null;
}
}
}
return null;
}
var W = Object.assign, J = 0, de, ve, pe, be, ge, me, ye;
function he() {
}
he.__reactDisabledLog = !0;
function Me() {
{
if (J === 0) {
de = console.log, ve = console.info, pe = console.warn, be = console.error, ge = console.group, me = console.groupCollapsed, ye = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: he,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
J++;
}
}
function Ye() {
{
if (J--, J === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: W({}, e, {
value: de
}),
info: W({}, e, {
value: ve
}),
warn: W({}, e, {
value: pe
}),
error: W({}, e, {
value: be
}),
group: W({}, e, {
value: ge
}),
groupCollapsed: W({}, e, {
value: me
}),
groupEnd: W({}, e, {
value: ye
})
});
}
J < 0 && g("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ne = w.ReactCurrentDispatcher, ae;
function H(e, r, t) {
{
if (ae === void 0)
try {
throw Error();
} catch (u) {
var n = u.stack.trim().match(/\n( *(at )?)/);
ae = n && n[1] || "";
}
return `
` + ae + e;
}
}
var ie = !1, X;
{
var Le = typeof WeakMap == "function" ? WeakMap : Map;
X = new Le();
}
function Ee(e, r) {
if (!e || ie)
return "";
{
var t = X.get(e);
if (t !== void 0)
return t;
}
var n;
ie = !0;
var u = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var l;
l = ne.current, ne.current = null, Me();
try {
if (r) {
var i = function() {
throw Error();
};
if (Object.defineProperty(i.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(i, []);
} catch (R) {
n = R;
}
Reflect.construct(e, [], i);
} else {
try {
i.call();
} catch (R) {
n = R;
}
e.call(i.prototype);
}
} else {
try {
throw Error();
} catch (R) {
n = R;
}
e();
}
} catch (R) {
if (R && n && typeof R.stack == "string") {
for (var a = R.stack.split(`
`), h = n.stack.split(`
`), v = a.length - 1, b = h.length - 1; v >= 1 && b >= 0 && a[v] !== h[b]; )
b--;
for (; v >= 1 && b >= 0; v--, b--)
if (a[v] !== h[b]) {
if (v !== 1 || b !== 1)
do
if (v--, b--, b < 0 || a[v] !== h[b]) {
var T = `
` + a[v].replace(" at new ", " at ");
return e.displayName && T.includes("<anonymous>") && (T = T.replace("<anonymous>", e.displayName)), typeof e == "function" && X.set(e, T), T;
}
while (v >= 1 && b >= 0);
break;
}
}
} finally {
ie = !1, ne.current = l, Ye(), Error.prepareStackTrace = u;
}
var V = e ? e.displayName || e.name : "", M = V ? H(V) : "";
return typeof e == "function" && X.set(e, M), M;
}
function Ue(e, r, t) {
return Ee(e, !1);
}
function Ve(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function Z(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return Ee(e, Ve(e));
if (typeof e == "string")
return H(e);
switch (e) {
case P:
return H("Suspense");
case s:
return H("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case f:
return Ue(e.render);
case _:
return Z(e.type, r, t);
case y: {
var n = e, u = n._payload, l = n._init;
try {
return Z(l(u), r, t);
} catch {
}
}
}
return "";
}
var z = Object.prototype.hasOwnProperty, Re = {}, _e = w.ReactDebugCurrentFrame;
function Q(e) {
if (e) {
var r = e._owner, t = Z(e.type, e._source, r ? r.type : null);
_e.setExtraStackFrame(t);
} else
_e.setExtraStackFrame(null);
}
function Ne(e, r, t, n, u) {
{
var l = Function.call.bind(z);
for (var i in e)
if (l(e, i)) {
var a = void 0;
try {
if (typeof e[i] != "function") {
var h = Error((n || "React class") + ": " + t + " type `" + i + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[i] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw h.name = "Invariant Violation", h;
}
a = e[i](r, i, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (v) {
a = v;
}
a && !(a instanceof Error) && (Q(u), g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, i, typeof a), Q(null)), a instanceof Error && !(a.message in Re) && (Re[a.message] = !0, Q(u), g("Failed %s type: %s", t, a.message), Q(null));
}
}
}
var qe = Array.isArray;
function oe(e) {
return qe(e);
}
function Je(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function ze(e) {
try {
return xe(e), !1;
} catch {
return !0;
}
}
function xe(e) {
return "" + e;
}
function Se(e) {
if (ze(e))
return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), xe(e);
}
var Te = w.ReactCurrentOwner, Ke = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Pe, Ce;
function Be(e) {
if (z.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function Ge(e) {
if (z.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function He(e, r) {
typeof e.ref == "string" && Te.current;
}
function Xe(e, r) {
{
var t = function() {
Pe || (Pe = !0, g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
}
function Ze(e, r) {
{
var t = function() {
Ce || (Ce = !0, g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: t,
configurable: !0
});
}
}
var Qe = function(e, r, t, n, u, l, i) {
var a = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: E,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: i,
// Record the component responsible for creating this element.
_owner: l
};
return a._store = {}, Object.defineProperty(a._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(a, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: n
}), Object.defineProperty(a, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: u
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
};
function er(e, r, t, n, u) {
{
var l, i = {}, a = null, h = null;
t !== void 0 && (Se(t), a = "" + t), Ge(r) && (Se(r.key), a = "" + r.key), Be(r) && (h = r.ref, He(r, u));
for (l in r)
z.call(r, l) && !Ke.hasOwnProperty(l) && (i[l] = r[l]);
if (e && e.defaultProps) {
var v = e.defaultProps;
for (l in v)
i[l] === void 0 && (i[l] = v[l]);
}
if (a || h) {
var b = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
a && Xe(i, b), h && Ze(i, b);
}
return Qe(e, a, h, u, n, Te.current, i);
}
}
var ue = w.ReactCurrentOwner, Oe = w.ReactDebugCurrentFrame;
function U(e) {
if (e) {
var r = e._owner, t = Z(e.type, e._source, r ? r.type : null);
Oe.setExtraStackFrame(t);
} else
Oe.setExtraStackFrame(null);
}
var se;
se = !1;
function le(e) {
return typeof e == "object" && e !== null && e.$$typeof === E;
}
function je() {
{
if (ue.current) {
var e = C(ue.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function rr(e) {
return "";
}
var $e = {};
function tr(e) {
{
var r = je();
if (!r) {
var t = typeof e == "string" ? e : e.displayName || e.name;
t && (r = `
Check the top-level render call using <` + t + ">.");
}
return r;
}
}
function we(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = tr(r);
if ($e[t])
return;
$e[t] = !0;
var n = "";
e && e._owner && e._owner !== ue.current && (n = " It was passed a child from " + C(e._owner.type) + "."), U(e), g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), U(null);
}
}
function ke(e, r) {
{
if (typeof e != "object")
return;
if (oe(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
le(n) && we(n, r);
}
else if (le(e))
e._store && (e._store.validated = !0);
else if (e) {
var u = re(e);
if (typeof u == "function" && u !== e.entries)
for (var l = u.call(e), i; !(i = l.next()).done; )
le(i.value) && we(i.value, r);
}
}
}
function nr(e) {
{
var r = e.type;
if (r == null || typeof r == "string")
return;
var t;
if (typeof r == "function")
t = r.propTypes;
else if (typeof r == "object" && (r.$$typeof === f || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === _))
t = r.propTypes;
else
return;
if (t) {
var n = C(r);
Ne(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !se) {
se = !0;
var u = C(r);
g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown");
}
typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function ar(e) {
{
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
var n = r[t];
if (n !== "children" && n !== "key") {
U(e), g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), U(null);
break;
}
}
e.ref !== null && (U(e), g("Invalid attribute `ref` supplied to `React.Fragment`."), U(null));
}
}
var De = {};
function Fe(e, r, t, n, u, l) {
{
var i = q(e);
if (!i) {
var a = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var h = rr();
h ? a += h : a += je();
var v;
e === null ? v = "null" : oe(e) ? v = "array" : e !== void 0 && e.$$typeof === E ? (v = "<" + (C(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : v = typeof e, g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", v, a);
}
var b = er(e, r, t, u, l);
if (b == null)
return b;
if (i) {
var T = r.children;
if (T !== void 0)
if (n)
if (oe(T)) {
for (var V = 0; V < T.length; V++)
ke(T[V], e);
Object.freeze && Object.freeze(T);
} else
g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
ke(T, e);
}
if (z.call(r, "key")) {
var M = C(e), R = Object.keys(r).filter(function(cr) {
return cr !== "key";
}), ce = R.length > 0 ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!De[M + ce]) {
var lr = R.length > 0 ? "{" + R.join(": ..., ") + ": ...}" : "{}";
g(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, ce, M, lr, M), De[M + ce] = !0;
}
}
return e === c ? ar(b) : nr(b), b;
}
}
function ir(e, r, t) {
return Fe(e, r, t, !0);
}
function or(e, r, t) {
return Fe(e, r, t, !1);
}
var ur = or, sr = ir;
B.Fragment = c, B.jsx = ur, B.jsxs = sr;
}()), B;
}
process.env.NODE_ENV === "production" ? fe.exports = br() : fe.exports = gr();
var m = fe.exports;
function ee(O, E, d, c) {
const p = Math.min(d, c) / 2, o = Math.min(O / 50 * p, p), S = 0.05 * o, f = 0.552 * o, P = 0.8 * o;
let s;
if (E <= 1)
s = S + (f - S) * E;
else {
const y = E - 1;
s = f + (P - f) * y;
}
return [
`M ${o} 0`,
`L ${d - o} 0`,
`C ${d - o + s} 0, ${d} ${o - s}, ${d} ${o}`,
`L ${d} ${c - o}`,
`C ${d} ${c - o + s}, ${d - o + s} ${c}, ${d - o} ${c}`,
`L ${o} ${c}`,
`C ${o - s} ${c}, 0 ${c - o + s}, 0 ${c - o}`,
`L 0 ${o}`,
`C 0 ${o - s}, ${o - s} 0, ${o} 0`,
"Z"
].join(" ");
}
const mr = fr(({
borderRadius: O = 25,
tension: E = 0.5,
width: d = 200,
height: c = 200,
as: F = "div",
stretch: p = !1,
squircleBorder: o = 0,
squircleBorderColor: S = "#000",
children: f,
style: P,
className: s = "",
..._
}, y) => {
const A = F, j = dr(null), [G, re] = vr({ width: 200, height: 200 });
pr(() => {
if (!p || !j.current) return;
const x = () => {
if (j.current) {
const C = j.current.getBoundingClientRect();
re({ width: C.width, height: C.height });
}
};
x();
const $ = new ResizeObserver(x);
return $.observe(j.current), () => $.disconnect();
}, [p]);
const w = typeof d == "number" ? d : parseInt((d == null ? void 0 : d.toString()) || "200"), g = typeof c == "number" ? c : parseInt((c == null ? void 0 : c.toString()) || "200"), k = p ? G.width : w, D = p ? G.height : g;
let Y, I;
Y = ee(O, E, k, D), I = "userSpaceOnUse";
const L = `squircle-${Math.random().toString(36).substr(2, 9)}`, te = {
width: p ? "100%" : d,
height: p ? "100%" : c,
display: p ? "block" : "inline-block",
overflow: "hidden",
clipPath: `url(#${L})`,
...P
};
if (o <= 0)
return /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
/* @__PURE__ */ m.jsx(
"svg",
{
width: "0",
height: "0",
style: { position: "absolute" },
viewBox: `0 0 ${k} ${D}`,
children: /* @__PURE__ */ m.jsx("defs", { children: /* @__PURE__ */ m.jsx("clipPath", { id: L, clipPathUnits: I, children: /* @__PURE__ */ m.jsx("path", { d: Y }) }) })
}
),
/* @__PURE__ */ m.jsx(
A,
{
ref: (x) => {
y && (typeof y == "function" ? y(x) : y.current = x), j.current !== x && (j.current = x);
},
className: `squircle ${s}`.trim(),
style: te,
..._,
children: f
}
)
] });
const N = `squircle-border-${Math.random().toString(36).substr(2, 9)}`;
let q;
if (p) {
const x = Math.max(10, k - o * 2), $ = Math.max(10, D - o * 2);
q = ee(O, E, x, $);
} else {
const x = Math.max(10, k - o * 2), $ = Math.max(10, D - o * 2);
q = ee(O, E, x, $);
}
return /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
/* @__PURE__ */ m.jsx(
"svg",
{
width: "0",
height: "0",
style: { position: "absolute" },
viewBox: `0 0 ${k} ${D}`,
children: /* @__PURE__ */ m.jsxs("defs", { children: [
/* @__PURE__ */ m.jsx("clipPath", { id: N, clipPathUnits: I, children: /* @__PURE__ */ m.jsx("path", { d: Y }) }),
/* @__PURE__ */ m.jsx("clipPath", { id: L, clipPathUnits: I, children: /* @__PURE__ */ m.jsx("path", { d: q }) })
] })
}
),
/* @__PURE__ */ m.jsx(
"div",
{
ref: j,
style: {
width: p ? "100%" : d,
height: p ? "100%" : c,
display: p ? "block" : "inline-block",
clipPath: `url(#${N})`,
background: S,
padding: o,
boxSizing: "border-box"
},
children: /* @__PURE__ */ m.jsx(
A,
{
ref: y,
className: s,
style: {
width: "100%",
height: "100%",
clipPath: `url(#${L})`,
...P
},
..._,
children: f
}
)
}
)
] });
});
mr.displayName = "Squircle";
export {
mr as Squircle
};