Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

corners

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

corners - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/index.mjs

210

dist/index.d.ts

@@ -1,136 +0,108 @@

// Generated by dts-bundle-generator v7.1.0
import * as react from 'react';
import { ForwardRefExoticComponent, FC, AllHTMLAttributes, RefObject } from 'react';
import { AllHTMLAttributes, FC, ForwardRefExoticComponent, MutableRefObject } from 'react';
declare const HTML_TAG_NAMES: ReadonlyArray<string>;
type ElementOf<T extends ReadonlyArray<any>> = T[number];
type HTMLTagName = ElementOf<typeof HTML_TAG_NAMES>;
export declare const HTML_TAG_NAMES: ReadonlyArray<string>;
export type ElementOf<T extends ReadonlyArray<any>> = T[number];
export type HTMLTagName = ElementOf<typeof HTML_TAG_NAMES>;
declare const createComponentFactory: (baseOptions?: Partial<CornerOptions>, ...corners: (DrawCorner | null)[]) => (<P>(WrappedComponent: string | ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions>) => FC<AllHTMLAttributes<any> & P>) & {
[x: string]: FC<AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => FC<AllHTMLAttributes<any>>;
};
[x: string]: FC<AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => FC<AllHTMLAttributes<any>>;
};
};
export interface Corners {
(...cornerFns: (DrawCorner | null)[]): {
options: (opts: Partial<CornerOptions>) => ReturnType<typeof createComponentFactory>;
size: (s: number) => ReturnType<typeof createComponentFactory>;
};
interface Corners {
(...cornerFns: (DrawCorner | null)[]): {
options: (opts: Partial<CornerOptions>) => ReturnType<typeof createComponentFactory>;
size: (s: number) => ReturnType<typeof createComponentFactory>;
};
}
declare const corners: Corners;
export type Fragment<T> = {
[K in keyof T]?: Fragment<T[K]>;
type Fragment<T> = {
[K in keyof T]?: Fragment<T[K]>;
};
export type SvgPathString = string;
export type Pathfinder = (height: number, width: number, cornerSize?: number) => SvgPathString;
export type CreatePathfinder = (defaultCornerSize: number, ...corners: (DrawCorner | null)[]) => Pathfinder;
export declare const createPathfinder: CreatePathfinder;
export declare const createClipPathfinder: CreatePathfinder;
export declare const findPath: (cornerPoints: [
PointPair,
PointPair,
PointPair,
PointPair
], corners: [
DrawCorner,
DrawCorner,
DrawCorner,
DrawCorner
]) => SvgPathString;
export declare const chamfer: DrawCorner;
export declare const straight: DrawCorner;
export declare const roundedNaive: DrawCorner;
export declare const round: DrawCorner;
export declare const rounded: (<P>(WrappedComponent: string | import("react").ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => import("react").FC<import("react").AllHTMLAttributes<any> & P>) & {
[x: string]: import("react").FC<import("react").AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => import("react").FC<import("react").AllHTMLAttributes<any>>;
};
type SvgPathString = string;
type Pathfinder = (height: number, width: number, cornerSize?: number) => SvgPathString;
type CreatePathfinder = (defaultCornerSize: number, ...corners: (DrawCorner | null)[]) => Pathfinder;
declare const createPathfinder: CreatePathfinder;
declare const createClipPathfinder: CreatePathfinder;
declare const findPath: (cornerPoints: [PointPair, PointPair, PointPair, PointPair], corners: [DrawCorner, DrawCorner, DrawCorner, DrawCorner]) => SvgPathString;
declare const chamfer: DrawCorner;
declare const straight: DrawCorner;
declare const roundedNaive: DrawCorner;
declare const round: DrawCorner;
declare const rounded: (<P>(WrappedComponent: string | react.ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => react.FC<react.AllHTMLAttributes<any> & P>) & {
[x: string]: react.FC<react.AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => react.FC<react.AllHTMLAttributes<any>>;
};
};
export declare const chamfered: (<P>(WrappedComponent: string | import("react").ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => import("react").FC<import("react").AllHTMLAttributes<any> & P>) & {
[x: string]: import("react").FC<import("react").AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => import("react").FC<import("react").AllHTMLAttributes<any>>;
};
declare const chamfered: (<P>(WrappedComponent: string | react.ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => react.FC<react.AllHTMLAttributes<any> & P>) & {
[x: string]: react.FC<react.AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => react.FC<react.AllHTMLAttributes<any>>;
};
};
export declare const semiChamfered: (<P>(WrappedComponent: string | import("react").ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => import("react").FC<import("react").AllHTMLAttributes<any> & P>) & {
[x: string]: import("react").FC<import("react").AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => import("react").FC<import("react").AllHTMLAttributes<any>>;
};
declare const semiChamfered: (<P>(WrappedComponent: string | react.ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => react.FC<react.AllHTMLAttributes<any> & P>) & {
[x: string]: react.FC<react.AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => react.FC<react.AllHTMLAttributes<any>>;
};
};
export declare const demiChamfered: (<P>(WrappedComponent: string | import("react").ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => import("react").FC<import("react").AllHTMLAttributes<any> & P>) & {
[x: string]: import("react").FC<import("react").AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => import("react").FC<import("react").AllHTMLAttributes<any>>;
};
declare const demiChamfered: (<P>(WrappedComponent: string | react.ForwardRefExoticComponent<P>, additionalOptions?: Partial<CornerOptions> | undefined) => react.FC<react.AllHTMLAttributes<any> & P>) & {
[x: string]: react.FC<react.AllHTMLAttributes<any>> & {
with: (options: Partial<CornerOptions>) => react.FC<react.AllHTMLAttributes<any>>;
};
};
export type Scale2d = {
width: number;
height: number;
type Scale2d = {
width: number;
height: number;
};
export declare const useSize: (target: MutableRefObject<HTMLElement | null>) => Scale2d;
export type SVGCommand = [
`curve`,
Point2d,
Point2d,
Point2d
] | [
`line`,
Point2d
] | [
`symmetric`,
Point2d,
Point2d
];
export type FinalSVGCommand = [
`curve`,
Point2d,
Point2d
] | [
`line`
] | [
`symmetric`,
Point2d
];
export type CornerSpec = Readonly<[
...SVGCommand[],
FinalSVGCommand
]>;
export declare const createCorner: (spec: readonly [
...(SVGCommand | FinalSVGCommand)[],
SVGCommand | FinalSVGCommand
]) => DrawCorner;
export type SvgCommandCode = `C` | `L` | `M` | `Q` | `S`;
export declare function writePathPoint(x: number, y: number, command?: SvgCommandCode): string;
export type Point2d = {
x: number;
y: number;
declare const useSize: (target: RefObject<HTMLElement>) => Scale2d;
type Interpolate = (from: number, to: number, completionRatio?: number) => number;
declare const interpolate: Interpolate;
type SVGCommand = [`curve`, Point2d, Point2d, Point2d] | [`line`, Point2d] | [`symmetric`, Point2d, Point2d];
type FinalSVGCommand = [`curve`, Point2d, Point2d] | [`line`] | [`symmetric`, Point2d];
type CornerSpec = Readonly<[...SVGCommand[], FinalSVGCommand]>;
declare const createCorner: (spec: readonly [...(SVGCommand | FinalSVGCommand)[], SVGCommand | FinalSVGCommand]) => DrawCorner;
type SvgCommandCode = `C` | `L` | `M` | `Q` | `S`;
declare function writePathPoint(x: number, y: number, command?: SvgCommandCode): string;
type Point2d = {
x: number;
y: number;
};
export type PointPair = {
p1: Point2d;
p2: Point2d;
type PointPair = {
p1: Point2d;
p2: Point2d;
};
export type OneManyOrNull<T> = T | T[] | null;
export type Scraps<T extends object> = OneManyOrNull<Fragment<T>>;
export declare const harvest: <T extends object>(base: T) => (scraps: Scraps<T>) => T[];
export type DrawCorner = (p1: Point2d, p2: Point2d, idx: number) => string[];
export type Layer = {
pathfinder: Pathfinder;
color: string;
offset: Point2d;
blur: number;
spread: number;
stroke: {
color: string;
dashArray: number[];
width: number;
} | null;
type OneManyOrNull<T> = T | T[] | null;
type Scraps<T extends object> = OneManyOrNull<Fragment<T>>;
declare const harvest: <T extends object>(base: T) => (scraps: Scraps<T>) => T[];
type DrawCorner = (p1: Point2d, p2: Point2d, idx: number) => string[];
type Layer = {
pathfinder: Pathfinder;
color: string;
offset: Point2d;
blur: number;
spread: number;
stroke: {
color: string;
dashArray: number[];
width: number;
} | null;
className: string;
};
export type CornerOptions = {
cornerSize: number;
noClipping: boolean;
above: Scraps<Layer>;
below: Scraps<Layer>;
type CornerOptions = {
cornerSize: number;
noClipping: boolean;
above: Scraps<Layer>;
below: Scraps<Layer>;
};
export {
corners as default,
};
export {};
export { CornerOptions, CornerSpec, CreatePathfinder, DrawCorner, ElementOf, HTMLTagName, HTML_TAG_NAMES, Interpolate, Layer, OneManyOrNull, Pathfinder, Point2d, PointPair, Scraps, chamfer, chamfered, createClipPathfinder, createCorner, createPathfinder, corners as default, demiChamfered, findPath, harvest, interpolate, round, rounded, roundedNaive, semiChamfered, straight, useSize, writePathPoint };

@@ -7,576 +7,48 @@ var __create = Object.create;

var __hasOwnProp = Object.prototype.hasOwnProperty;
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __reExport = (target, module, copyDefault, desc) => {
if (module && typeof module === "object" || typeof module === "function") {
for (let key of __getOwnPropNames(module))
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
__defProp(target, key, { get: () => module[key], enumerable: !(desc = __getOwnPropDesc(module, key)) || desc.enumerable });
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return target;
return to;
};
var __toESM = (module, isNodeMode) => {
return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", !isNodeMode && module && module.__esModule ? { get: () => module.default, enumerable: true } : { value: module, enumerable: true })), module);
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// node_modules/@juggle/resize-observer/lib/exports/resize-observer.umd.js
var require_resize_observer_umd = __commonJS({
"node_modules/@juggle/resize-observer/lib/exports/resize-observer.umd.js"(exports, module) {
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ResizeObserver = {}));
})(exports, function(exports2) {
"use strict";
var resizeObservers = [];
var hasActiveObservations = function() {
return resizeObservers.some(function(ro) {
return ro.activeTargets.length > 0;
});
};
var hasSkippedObservations = function() {
return resizeObservers.some(function(ro) {
return ro.skippedTargets.length > 0;
});
};
var msg = "ResizeObserver loop completed with undelivered notifications.";
var deliverResizeLoopError = function() {
var event;
if (typeof ErrorEvent === "function") {
event = new ErrorEvent("error", {
message: msg
});
} else {
event = document.createEvent("Event");
event.initEvent("error", false, false);
event.message = msg;
}
window.dispatchEvent(event);
};
var ResizeObserverBoxOptions;
(function(ResizeObserverBoxOptions2) {
ResizeObserverBoxOptions2["BORDER_BOX"] = "border-box";
ResizeObserverBoxOptions2["CONTENT_BOX"] = "content-box";
ResizeObserverBoxOptions2["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
var freeze = function(obj) {
return Object.freeze(obj);
};
var ResizeObserverSize = function() {
function ResizeObserverSize2(inlineSize, blockSize) {
this.inlineSize = inlineSize;
this.blockSize = blockSize;
freeze(this);
}
return ResizeObserverSize2;
}();
var DOMRectReadOnly = function() {
function DOMRectReadOnly2(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.top = this.y;
this.left = this.x;
this.bottom = this.top + this.height;
this.right = this.left + this.width;
return freeze(this);
}
DOMRectReadOnly2.prototype.toJSON = function() {
var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
return { x, y, top, right, bottom, left, width, height };
};
DOMRectReadOnly2.fromRect = function(rectangle) {
return new DOMRectReadOnly2(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
};
return DOMRectReadOnly2;
}();
var isSVG = function(target) {
return target instanceof SVGElement && "getBBox" in target;
};
var isHidden = function(target) {
if (isSVG(target)) {
var _a = target.getBBox(), width = _a.width, height = _a.height;
return !width && !height;
}
var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
return !(offsetWidth || offsetHeight || target.getClientRects().length);
};
var isElement = function(obj) {
var _a, _b;
if (obj instanceof Element) {
return true;
}
var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
return !!(scope && obj instanceof scope.Element);
};
var isReplacedElement = function(target) {
switch (target.tagName) {
case "INPUT":
if (target.type !== "image") {
break;
}
case "VIDEO":
case "AUDIO":
case "EMBED":
case "OBJECT":
case "CANVAS":
case "IFRAME":
case "IMG":
return true;
}
return false;
};
var global = typeof window !== "undefined" ? window : {};
var cache = /* @__PURE__ */ new WeakMap();
var scrollRegexp = /auto|scroll/;
var verticalRegexp = /^tb|vertical/;
var IE = /msie|trident/i.test(global.navigator && global.navigator.userAgent);
var parseDimension = function(pixel) {
return parseFloat(pixel || "0");
};
var size = function(inlineSize, blockSize, switchSizes) {
if (inlineSize === void 0) {
inlineSize = 0;
}
if (blockSize === void 0) {
blockSize = 0;
}
if (switchSizes === void 0) {
switchSizes = false;
}
return new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
};
var zeroBoxes = freeze({
devicePixelContentBoxSize: size(),
borderBoxSize: size(),
contentBoxSize: size(),
contentRect: new DOMRectReadOnly(0, 0, 0, 0)
});
var calculateBoxSizes = function(target, forceRecalculation) {
if (forceRecalculation === void 0) {
forceRecalculation = false;
}
if (cache.has(target) && !forceRecalculation) {
return cache.get(target);
}
if (isHidden(target)) {
cache.set(target, zeroBoxes);
return zeroBoxes;
}
var cs = getComputedStyle(target);
var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
var removePadding = !IE && cs.boxSizing === "border-box";
var switchSizes = verticalRegexp.test(cs.writingMode || "");
var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || "");
var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || "");
var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
var horizontalPadding = paddingLeft + paddingRight;
var verticalPadding = paddingTop + paddingBottom;
var horizontalBorderArea = borderLeft + borderRight;
var verticalBorderArea = borderTop + borderBottom;
var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
var boxes = freeze({
devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
contentBoxSize: size(contentWidth, contentHeight, switchSizes),
contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
});
cache.set(target, boxes);
return boxes;
};
var calculateBoxSize = function(target, observedBox, forceRecalculation) {
var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
switch (observedBox) {
case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
return devicePixelContentBoxSize;
case ResizeObserverBoxOptions.BORDER_BOX:
return borderBoxSize;
default:
return contentBoxSize;
}
};
var ResizeObserverEntry = function() {
function ResizeObserverEntry2(target) {
var boxes = calculateBoxSizes(target);
this.target = target;
this.contentRect = boxes.contentRect;
this.borderBoxSize = freeze([boxes.borderBoxSize]);
this.contentBoxSize = freeze([boxes.contentBoxSize]);
this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
}
return ResizeObserverEntry2;
}();
var calculateDepthForNode = function(node) {
if (isHidden(node)) {
return Infinity;
}
var depth = 0;
var parent = node.parentNode;
while (parent) {
depth += 1;
parent = parent.parentNode;
}
return depth;
};
var broadcastActiveObservations = function() {
var shallowestDepth = Infinity;
var callbacks2 = [];
resizeObservers.forEach(function processObserver(ro) {
if (ro.activeTargets.length === 0) {
return;
}
var entries = [];
ro.activeTargets.forEach(function processTarget(ot) {
var entry = new ResizeObserverEntry(ot.target);
var targetDepth = calculateDepthForNode(ot.target);
entries.push(entry);
ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
if (targetDepth < shallowestDepth) {
shallowestDepth = targetDepth;
}
});
callbacks2.push(function resizeObserverCallback() {
ro.callback.call(ro.observer, entries, ro.observer);
});
ro.activeTargets.splice(0, ro.activeTargets.length);
});
for (var _i = 0, callbacks_1 = callbacks2; _i < callbacks_1.length; _i++) {
var callback = callbacks_1[_i];
callback();
}
return shallowestDepth;
};
var gatherActiveObservationsAtDepth = function(depth) {
resizeObservers.forEach(function processObserver(ro) {
ro.activeTargets.splice(0, ro.activeTargets.length);
ro.skippedTargets.splice(0, ro.skippedTargets.length);
ro.observationTargets.forEach(function processTarget(ot) {
if (ot.isActive()) {
if (calculateDepthForNode(ot.target) > depth) {
ro.activeTargets.push(ot);
} else {
ro.skippedTargets.push(ot);
}
}
});
});
};
var process = function() {
var depth = 0;
gatherActiveObservationsAtDepth(depth);
while (hasActiveObservations()) {
depth = broadcastActiveObservations();
gatherActiveObservationsAtDepth(depth);
}
if (hasSkippedObservations()) {
deliverResizeLoopError();
}
return depth > 0;
};
var trigger;
var callbacks = [];
var notify = function() {
return callbacks.splice(0).forEach(function(cb) {
return cb();
});
};
var queueMicroTask = function(callback) {
if (!trigger) {
var toggle_1 = 0;
var el_1 = document.createTextNode("");
var config = { characterData: true };
new MutationObserver(function() {
return notify();
}).observe(el_1, config);
trigger = function() {
el_1.textContent = "" + (toggle_1 ? toggle_1-- : toggle_1++);
};
}
callbacks.push(callback);
trigger();
};
var queueResizeObserver = function(cb) {
queueMicroTask(function ResizeObserver2() {
requestAnimationFrame(cb);
});
};
var watching = 0;
var isWatching = function() {
return !!watching;
};
var CATCH_PERIOD = 250;
var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
var events = [
"resize",
"load",
"transitionend",
"animationend",
"animationstart",
"animationiteration",
"keyup",
"keydown",
"mouseup",
"mousedown",
"mouseover",
"mouseout",
"blur",
"focus"
];
var time = function(timeout) {
if (timeout === void 0) {
timeout = 0;
}
return Date.now() + timeout;
};
var scheduled = false;
var Scheduler = function() {
function Scheduler2() {
var _this = this;
this.stopped = true;
this.listener = function() {
return _this.schedule();
};
}
Scheduler2.prototype.run = function(timeout) {
var _this = this;
if (timeout === void 0) {
timeout = CATCH_PERIOD;
}
if (scheduled) {
return;
}
scheduled = true;
var until = time(timeout);
queueResizeObserver(function() {
var elementsHaveResized = false;
try {
elementsHaveResized = process();
} finally {
scheduled = false;
timeout = until - time();
if (!isWatching()) {
return;
}
if (elementsHaveResized) {
_this.run(1e3);
} else if (timeout > 0) {
_this.run(timeout);
} else {
_this.start();
}
}
});
};
Scheduler2.prototype.schedule = function() {
this.stop();
this.run();
};
Scheduler2.prototype.observe = function() {
var _this = this;
var cb = function() {
return _this.observer && _this.observer.observe(document.body, observerConfig);
};
document.body ? cb() : global.addEventListener("DOMContentLoaded", cb);
};
Scheduler2.prototype.start = function() {
var _this = this;
if (this.stopped) {
this.stopped = false;
this.observer = new MutationObserver(this.listener);
this.observe();
events.forEach(function(name) {
return global.addEventListener(name, _this.listener, true);
});
}
};
Scheduler2.prototype.stop = function() {
var _this = this;
if (!this.stopped) {
this.observer && this.observer.disconnect();
events.forEach(function(name) {
return global.removeEventListener(name, _this.listener, true);
});
this.stopped = true;
}
};
return Scheduler2;
}();
var scheduler = new Scheduler();
var updateCount = function(n) {
!watching && n > 0 && scheduler.start();
watching += n;
!watching && scheduler.stop();
};
var skipNotifyOnElement = function(target) {
return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
};
var ResizeObservation = function() {
function ResizeObservation2(target, observedBox) {
this.target = target;
this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
this.lastReportedSize = {
inlineSize: 0,
blockSize: 0
};
}
ResizeObservation2.prototype.isActive = function() {
var size2 = calculateBoxSize(this.target, this.observedBox, true);
if (skipNotifyOnElement(this.target)) {
this.lastReportedSize = size2;
}
if (this.lastReportedSize.inlineSize !== size2.inlineSize || this.lastReportedSize.blockSize !== size2.blockSize) {
return true;
}
return false;
};
return ResizeObservation2;
}();
var ResizeObserverDetail = function() {
function ResizeObserverDetail2(resizeObserver, callback) {
this.activeTargets = [];
this.skippedTargets = [];
this.observationTargets = [];
this.observer = resizeObserver;
this.callback = callback;
}
return ResizeObserverDetail2;
}();
var observerMap = /* @__PURE__ */ new WeakMap();
var getObservationIndex = function(observationTargets, target) {
for (var i2 = 0; i2 < observationTargets.length; i2 += 1) {
if (observationTargets[i2].target === target) {
return i2;
}
}
return -1;
};
var ResizeObserverController = function() {
function ResizeObserverController2() {
}
ResizeObserverController2.connect = function(resizeObserver, callback) {
var detail = new ResizeObserverDetail(resizeObserver, callback);
observerMap.set(resizeObserver, detail);
};
ResizeObserverController2.observe = function(resizeObserver, target, options) {
var detail = observerMap.get(resizeObserver);
var firstObservation = detail.observationTargets.length === 0;
if (getObservationIndex(detail.observationTargets, target) < 0) {
firstObservation && resizeObservers.push(detail);
detail.observationTargets.push(new ResizeObservation(target, options && options.box));
updateCount(1);
scheduler.schedule();
}
};
ResizeObserverController2.unobserve = function(resizeObserver, target) {
var detail = observerMap.get(resizeObserver);
var index = getObservationIndex(detail.observationTargets, target);
var lastObservation = detail.observationTargets.length === 1;
if (index >= 0) {
lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
detail.observationTargets.splice(index, 1);
updateCount(-1);
}
};
ResizeObserverController2.disconnect = function(resizeObserver) {
var _this = this;
var detail = observerMap.get(resizeObserver);
detail.observationTargets.slice().forEach(function(ot) {
return _this.unobserve(resizeObserver, ot.target);
});
detail.activeTargets.splice(0, detail.activeTargets.length);
};
return ResizeObserverController2;
}();
var ResizeObserver = function() {
function ResizeObserver2(callback) {
if (arguments.length === 0) {
throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (typeof callback !== "function") {
throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
}
ResizeObserverController.connect(this, callback);
}
ResizeObserver2.prototype.observe = function(target, options) {
if (arguments.length === 0) {
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (!isElement(target)) {
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
}
ResizeObserverController.observe(this, target, options);
};
ResizeObserver2.prototype.unobserve = function(target) {
if (arguments.length === 0) {
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (!isElement(target)) {
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
}
ResizeObserverController.unobserve(this, target);
};
ResizeObserver2.prototype.disconnect = function() {
ResizeObserverController.disconnect(this);
};
ResizeObserver2.toString = function() {
return "function ResizeObserver () { [polyfill code] }";
};
return ResizeObserver2;
}();
exports2.ResizeObserver = ResizeObserver;
exports2.ResizeObserverEntry = ResizeObserverEntry;
exports2.ResizeObserverSize = ResizeObserverSize;
Object.defineProperty(exports2, "__esModule", { value: true });
});
}
// src/index.ts
var src_exports = {};
__export(src_exports, {
HTML_TAG_NAMES: () => HTML_TAG_NAMES,
chamfer: () => chamfer,
chamfered: () => chamfered,
createClipPathfinder: () => createClipPathfinder,
createCorner: () => createCorner,
createPathfinder: () => createPathfinder,
default: () => src_default,
demiChamfered: () => demiChamfered,
findPath: () => findPath,
harvest: () => harvest,
interpolate: () => interpolate,
round: () => round,
rounded: () => rounded,
roundedNaive: () => roundedNaive,
semiChamfered: () => semiChamfered,
straight: () => straight,
useSize: () => useSize,
writePathPoint: () => writePathPoint
});
module.exports = __toCommonJS(src_exports);
// node_modules/raf-schd/dist/raf-schd.cjs.js
var require_raf_schd_cjs = __commonJS({
"node_modules/raf-schd/dist/raf-schd.cjs.js"(exports, module) {
"use strict";
var rafSchd = function rafSchd2(fn) {
var lastArgs = [];
var frameId = null;
var wrapperFn = function wrapperFn2() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
lastArgs = args;
if (frameId) {
return;
}
frameId = requestAnimationFrame(function() {
frameId = null;
fn.apply(void 0, lastArgs);
});
};
wrapperFn.cancel = function() {
if (!frameId) {
return;
}
cancelAnimationFrame(frameId);
frameId = null;
};
return wrapperFn;
};
module.exports = rafSchd;
}
});
// src/utils/interpolate.ts

@@ -680,3 +152,5 @@ var interpolate = (from, to, completionRatio = 0.5) => from + completionRatio * (to - from);

var createPathfinder = createPathfinderCore(findCornerPointsForPath);
var createClipPathfinder = createPathfinderCore(findCornerPointsForClipPath);
var createClipPathfinder = createPathfinderCore(
findCornerPointsForClipPath
);
var expandCorners = (...corners2) => {

@@ -835,124 +309,79 @@ var _a, _b, _c, _d;

// src/react/withCorners.ts
import { createElement, useId, useRef } from "react";
var import_react2 = require("react");
// src/react/ClippingPath.tsx
import React from "react";
var SvgClippingPath = ({ id, d }) => /* @__PURE__ */ React.createElement("svg", {
width: "10",
height: "10",
viewBox: "0 0 10 10",
style: { position: `absolute`, opacity: 0, pointerEvents: `none` }
}, /* @__PURE__ */ React.createElement("clipPath", {
id,
clipPathUnits: "objectBoundingBox"
}, /* @__PURE__ */ React.createElement("path", {
d
})));
var import_jsx_runtime = require("react/jsx-runtime");
var SvgClippingPath = ({ id, d }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"svg",
{
width: "10",
height: "10",
viewBox: "0 0 10 10",
style: { position: `absolute`, opacity: 0, pointerEvents: `none` },
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id, clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d }) })
}
);
// src/react/Layers.tsx
import React2 from "react";
// src/react/SvgLayers.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var SvgLayers = ({ pathfinder, above, below, base }) => {
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, [below, above].map((layerScraps, idx) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: [below, above].map((layerScraps, idx) => {
const layers = harvest(DEFAULT_LAYER)(layerScraps);
return layers.map(({ spread, color, blur, offset, stroke }) => {
var _a, _b;
const height = Math.max(base.height + spread, 0);
const width = Math.max(base.width + spread, 0);
const cornerSize = Math.max(base.cornerSize + spread, 1);
const strokeWidth = (_a = stroke == null ? void 0 : stroke.width) != null ? _a : 0;
const viewBox = [
-0.5 * strokeWidth,
-0.5 * strokeWidth,
width + strokeWidth,
height + strokeWidth
];
const d = pathfinder(height, width, cornerSize);
return /* @__PURE__ */ React2.createElement("svg", {
key: `${idx === 0 ? `below` : `above`}-${offset.x}-${offset.y}-${spread}-${color}-${blur}-${stroke}`,
width: width + strokeWidth,
height: height + strokeWidth,
viewBox: viewBox.join(` `),
fillRule: "evenodd",
style: {
position: `absolute`,
top: -0.5 * (spread + strokeWidth) - offset.y,
left: -0.5 * (spread + strokeWidth) + offset.x,
pointerEvents: `none`,
zIndex: idx === 0 ? -1 : 1,
filter: blur ? `blur(${blur}px)` : void 0
}
}, /* @__PURE__ */ React2.createElement("path", {
d,
fill: color,
stroke: stroke == null ? void 0 : stroke.color,
strokeDasharray: (_b = stroke == null ? void 0 : stroke.dashArray) == null ? void 0 : _b.join(` `),
strokeWidth: stroke == null ? void 0 : stroke.width
}));
});
}));
return layers.map(
({ spread, color, blur, offset, stroke, className }) => {
var _a, _b;
const height = Math.max(base.height + spread, 0);
const width = Math.max(base.width + spread, 0);
const cornerSize = Math.max(base.cornerSize + spread, 1);
const strokeWidth = (_a = stroke == null ? void 0 : stroke.width) != null ? _a : 0;
const viewBox = [
-0.5 * strokeWidth,
-0.5 * strokeWidth,
width + strokeWidth,
height + strokeWidth
];
const d = pathfinder(height, width, cornerSize);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"svg",
{
width: width + strokeWidth,
height: height + strokeWidth,
viewBox: viewBox.join(` `),
fillRule: "evenodd",
className,
style: {
position: `absolute`,
top: -0.5 * (spread + strokeWidth) - offset.y,
left: -0.5 * (spread + strokeWidth) + offset.x,
pointerEvents: `none`,
zIndex: idx === 0 ? -1 : 1,
filter: blur ? `blur(${blur}px)` : void 0
},
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"path",
{
d,
fill: color,
stroke: stroke == null ? void 0 : stroke.color,
strokeDasharray: (_b = stroke == null ? void 0 : stroke.dashArray) == null ? void 0 : _b.join(` `),
strokeWidth: stroke == null ? void 0 : stroke.width
}
)
},
`${idx === 0 ? `below` : `above`}-${offset.x}-${offset.y}-${spread}-${color}-${blur}-${stroke}`
);
}
);
}) });
};
// src/react/useSize.ts
import { useState, useLayoutEffect } from "react";
// node_modules/@react-hook/resize-observer/dist/esm/index.mjs
var import_resize_observer = __toESM(require_resize_observer_umd(), 1);
// node_modules/@react-hook/passive-layout-effect/dist/esm/index.mjs
import e from "react";
var t = e[typeof document != "undefined" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"];
var esm_default = t;
// node_modules/@react-hook/latest/dist/esm/index.mjs
import { useRef as r, useEffect as t2 } from "react";
var esm_default2 = (e3) => {
var a = r(e3);
return t2(() => {
a.current = e3;
}), a;
};
// node_modules/@react-hook/resize-observer/dist/esm/index.mjs
var import_raf_schd = __toESM(require_raf_schd_cjs(), 1);
function e2() {
}
var i;
var s = typeof window != "undefined" && "ResizeObserver" in window ? window.ResizeObserver : import_resize_observer.ResizeObserver;
function esm_default3(r3, u) {
var v, a, f = i || (v = /* @__PURE__ */ new Map(), a = new s((0, import_raf_schd.default)((e3, r4) => {
for (var t3 = function(t4) {
var n2 = v.get(e3[t4].target);
n2 == null || n2.forEach((n3) => n3(e3[t4], r4));
}, n = 0; n < e3.length; n++)
t3(n);
})), i = { observer: a, subscribe(e3, r4) {
var t3;
a.observe(e3);
var n = (t3 = v.get(e3)) !== null && t3 !== void 0 ? t3 : [];
n.push(r4), v.set(e3, n);
}, unsubscribe(e3, r4) {
var t3, n = (t3 = v.get(e3)) !== null && t3 !== void 0 ? t3 : [];
if (n.length === 1)
return a.unobserve(e3), void v.delete(e3);
var o2 = n.indexOf(r4);
o2 !== -1 && n.splice(o2, 1), v.set(e3, n);
} }), c = esm_default2(u);
return esm_default(() => {
function t3(e3, r4) {
n || c.current(e3, r4);
}
var n = 0, o2 = r3 && "current" in r3 ? r3.current : r3;
return o2 ? (f.subscribe(o2, t3), () => {
n = 1, f.unsubscribe(o2, t3);
}) : e2;
}, [r3, f, c]), f.observer;
}
// src/react/useSize.ts
var import_react = require("react");
var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
var useSize = (target) => {
const [size, setSize] = useState({
const [size, setSize] = (0, import_react.useState)({
width: 0,
height: 0
});
useLayoutEffect(() => {
(0, import_react.useLayoutEffect)(() => {
if (target == null ? void 0 : target.current) {

@@ -963,3 +392,3 @@ const boundingRect = target.current.getBoundingClientRect();

}, [target]);
esm_default3(target, (entry) => {
(0, import_resize_observer.default)(target, (entry) => {
setSize({

@@ -980,24 +409,30 @@ height: entry.borderBoxSize[0].blockSize,

var _a;
const pathId = useId ? useId() : Math.random().toString();
const nodeRef = useRef(null);
const pathId = import_react2.useId ? (0, import_react2.useId)() : Math.random().toString();
const nodeRef = (0, import_react2.useRef)(null);
const { height, width } = useSize(nodeRef);
return createElement(WrappedComponent, {
...props,
ref: nodeRef,
style: {
position: `relative`,
zIndex: 0,
...props.style,
clipPath: clipPathfinder ? `url(#${pathId})` : void 0,
background: noClipping ? `none` : (_a = props.style) == null ? void 0 : _a.background
}
}, clipPathfinder && SvgClippingPath({
id: pathId,
d: clipPathfinder(height, width, cornerSize)
}), pathfinder && SvgLayers({
pathfinder,
above,
below,
base: { width, height, cornerSize }
}), props.children);
return (0, import_react2.createElement)(
WrappedComponent,
{
...props,
ref: nodeRef,
style: {
position: `relative`,
zIndex: 0,
...props.style,
clipPath: clipPathfinder ? `url(#${pathId})` : void 0,
background: noClipping ? `none` : (_a = props.style) == null ? void 0 : _a.background
}
},
clipPathfinder && SvgClippingPath({
id: pathId,
d: clipPathfinder(height, width, cornerSize)
}),
pathfinder && SvgLayers({
pathfinder,
above,
below,
base: { width, height, cornerSize }
}),
`children` in props ? props.children : null
);
};

@@ -1050,3 +485,3 @@ return WithCorners;

}
const subNodes = Array.isArray(node) ? node.map((v, i2) => [i2, v]) : isPlainObject(node) ? Object.entries(node) : [];
const subNodes = Array.isArray(node) ? node.map((v, i) => [i, v]) : isPlainObject(node) ? Object.entries(node) : [];
for (const [k, v] of subNodes) {

@@ -1073,3 +508,6 @@ const subResult = walk(`${path}/${k}`, v);

return;
const targetParent = pathParts.reduce((acc, part) => acc == null ? void 0 : acc[part], result);
const targetParent = pathParts.reduce(
(acc, part) => acc == null ? void 0 : acc[part],
result
);
if (Array.isArray(targetParent[childKey]) && Array.isArray(node)) {

@@ -1105,3 +543,3 @@ targetParent[childKey] = [...targetParent[childKey], ...node];

const [type, ...points] = command;
const newPointFinders = points.map((point, i2) => {
const newPointFinders = points.map((point, i) => {
const finder = (p1, p2, j) => {

@@ -1115,3 +553,7 @@ const isEven = j % 2 === 0;

};
return writePathPoint(pathPoint.x, pathPoint.y, i2 === 0 ? Commands[type] : void 0);
return writePathPoint(
pathPoint.x,
pathPoint.y,
i === 0 ? Commands[type] : void 0
);
};

@@ -1139,3 +581,4 @@ return finder;

var src_default = corners;
export {
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
HTML_TAG_NAMES,

@@ -1147,6 +590,6 @@ chamfer,

createPathfinder,
src_default as default,
demiChamfered,
findPath,
harvest,
interpolate,
round,

@@ -1159,3 +602,2 @@ rounded,

writePathPoint
};
//# sourceMappingURL=index.js.map
});
{
"name": "corners",
"version": "0.0.13",
"private": false,
"version": "0.0.14",
"files": [

@@ -15,11 +14,9 @@ "dist"

"deploy": "gh-pages -d example/web",
"build:types": "dts-bundle-generator -o dist/index.d.ts src/index.ts",
"build:main": "tsx -- esbuild.config.ts",
"build": "yarn build:main && yarn build:types",
"test": "jest --watch --no-coverage",
"test:cov": "jest --watch",
"test:once": "jest",
"build": "tsup src/index.ts --format cjs,esm --dts",
"test": "vitest",
"test:once": "vitest run",
"lint": "eslint \"{src,test}/**/*.ts{,x}\"",
"lint:fix": "yarn lint -- --fix",
"release": "yarn build && changeset publish"
"release": "yarn build && changeset publish",
"notes": "changeset"
},

@@ -34,44 +31,23 @@ "dependencies": {

"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@banka/eslint-config-react": "^1.0.0",
"@changesets/cli": "^2.20.0",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@types/express": "^4.17.13",
"@types/faker": "^5.5.8",
"@types/jest": "^27.0.2",
"@types/node": "^18.11.11",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"babel-plugin-root-import": "^6.6.0",
"concurrently": "^6.4.0",
"dts-bundle-generator": "^7.1.0",
"esbuild": "^0.14.5",
"esbuild-jest": "^0.5.0",
"eslint": "^8.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jest": "^25.2.1",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"express": "^4.17.1",
"faker": "^5.5.3",
"gh-pages": "^3.2.3",
"husky": "^7.0.2",
"jest": "^27.2.5",
"lint-staged": "^11.2.3",
"nodemon": "^2.0.15",
"prettier": "^2.4.1",
"react": "^18.0.0-rc.0-next-3dc41d8a2-20211223",
"react-dom": "^18.0.0-rc.0-next-3dc41d8a2-20211223",
"ts-node": "^10.2.1",
"tsconfig-paths": "^3.11.0",
"tsx": "^3.12.1",
"typescript": "^4.8.4"
"@banka/eslint-config-react": "1.4.0",
"@changesets/cli": "2.26.1",
"@emotion/react": "11.11.1",
"@emotion/styled": "11.11.0",
"@types/react": "18.2.11",
"@types/react-dom": "18.2.4",
"c8": "7.14.0",
"esbuild": "0.18.0",
"eslint": "8.42.0",
"gh-pages": "5.0.0",
"husky": "8.0.3",
"jsdom": "22.1.0",
"lint-staged": "13.2.2",
"prettier": "2.8.8",
"react": "18.2.0",
"react-dom": "18.2.0",
"tsconfig-paths": "4.2.0",
"tsup": "6.7.0",
"typescript": "5.1.3",
"vite-tsconfig-paths": "4.2.0",
"vitest": "0.32.0"
},

@@ -84,6 +60,3 @@ "lint-staged": {

"@banka/react"
],
"parserOptions": {
"project": "./tsconfig.json"
}
]
},

@@ -90,0 +63,0 @@ "homepage": "https://github.com/jeremybanka/corners#readme",

@@ -16,3 +16,3 @@ <hr>

<a aria-label="Build status" href="https://github.com/jeremybanka/corners/actions/workflows/pipeline.yml">
<img alt="Build status" src="https://img.shields.io/github/workflow/status/jeremybanka/corners/CI/main?style=for-the-badge&labelColor=333">
<img alt="Build status" src="https://img.shields.io/github/actions/workflow/status/jeremybanka/corners/pipeline.yml?branch=main&style=for-the-badge&labelColor=333">
</a>

@@ -19,0 +19,0 @@ <a aria-label="NPM version" href="https://www.npmjs.com/package/corners">

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc