@kind-ui/charts 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +10 -1
- package/dist/bar-material.js +2 -3
- package/dist/heatmap.d.ts +1 -1
- package/dist/histogram-material.js +1 -2
- package/dist/line-material.d.ts +1 -1
- package/dist/line-material.js +1 -1
- package/dist/line-series.js +1 -2
- package/dist/pie-material.js +1 -1
- package/dist/pie-series.js +1 -1
- package/dist/polar-material.js +1 -1
- package/dist/sankey-finish.d.ts +1 -1
- package/dist/sankey-finish.js +1 -1
- package/dist/scatter-material.js +1 -1
- package/dist/styles.css +0 -5
- package/dist/surface-material.js +1 -1
- package/package.json +1 -1
- package/dist/bar-paper.d.ts +0 -2
- package/dist/bar-paper.js +0 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @kind-ui/charts
|
|
2
2
|
|
|
3
|
+
## 0.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- a7b9be8: Remove the Paper material and Sankey finish, including their rendering and stylesheet rules, for the 0.3.0 API. Supported finishes are Default, Clay and Glow. Default retains the public `plain` token; replace `paper` with `plain`, `clay` or `glow`.
|
|
8
|
+
|
|
3
9
|
## 0.2.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -42,6 +42,15 @@ The diagnostic conservatively waits on unresolved stylesheet links. A link which
|
|
|
42
42
|
failed before mounting after document load can therefore defer the warning; it
|
|
43
43
|
does not guess a timeout and warn while a slow stylesheet is still loading.
|
|
44
44
|
|
|
45
|
+
## Materials
|
|
46
|
+
|
|
47
|
+
Charts support Default, Clay and Glow. The Default material keeps the public
|
|
48
|
+
`plain` token and native chart paint; `material="clay"` and `material="glow"`
|
|
49
|
+
opt into decorative finishes. Sankey uses the same tokens through `finish`.
|
|
50
|
+
Omitting either prop selects Default. Paper has been removed in the 0.3.0 API;
|
|
51
|
+
replace `material="paper"` or `finish="paper"` with `"plain"`, `"clay"` or `"glow"`.
|
|
52
|
+
Consumer-supplied shapes, filters and paint retain ownership.
|
|
53
|
+
|
|
45
54
|
## Series labels
|
|
46
55
|
|
|
47
56
|
Configuration keys must match the series `dataKey` (or its explicit `seriesKey`).
|
|
@@ -161,7 +170,7 @@ explicit data. For a rounded donut, add `glowCategories={["design"]}` to
|
|
|
161
170
|
innerRadius={58} outerRadius={108} cornerRadius={8} paddingAngle={2} />`.
|
|
162
171
|
The IDs resolve through the existing category config contract. Unknown or removed
|
|
163
172
|
IDs do nothing; reorder/filter preserve colors and membership. Selected default
|
|
164
|
-
sectors use glow; others retain `material` (
|
|
173
|
+
sectors use glow; others retain `material` (Default, token `plain`). Native custom paint,
|
|
165
174
|
shapes and handlers retain ownership. Keep labels and a data alternative.
|
|
166
175
|
|
|
167
176
|
## License
|
package/dist/bar-material.js
CHANGED
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cloneElement } from "react";
|
|
4
4
|
import { BarClay } from "./bar-clay.js";
|
|
5
|
-
import { BarPaper } from "./bar-paper.js";
|
|
6
5
|
import { SurfaceMaterialFilter } from "./surface-material.js";
|
|
7
6
|
/** Native rectangles apply this filter independently to their own object bounds. */
|
|
8
7
|
export function BarMaterialFilter({ material, id, horizontal, }) {
|
|
9
|
-
if (material
|
|
10
|
-
return (_jsx("filter", { id: id, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", x: -0.5, y: -0.5, width: 2, height: 2, colorInterpolationFilters: "sRGB", children:
|
|
8
|
+
if (material === "clay")
|
|
9
|
+
return (_jsx("filter", { id: id, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", x: -0.5, y: -0.5, width: 2, height: 2, colorInterpolationFilters: "sRGB", children: _jsx(BarClay, { horizontal: horizontal }) }));
|
|
11
10
|
// The shared pure helper returns a native filter. Only bar coordinate units change;
|
|
12
11
|
// pixel-sized primitives and the area's user-space bounds retain their semantics.
|
|
13
12
|
return cloneElement(SurfaceMaterialFilter({
|
package/dist/heatmap.d.ts
CHANGED
|
@@ -18,7 +18,7 @@ export type HeatmapCellContentProps = {
|
|
|
18
18
|
formattedValue: string;
|
|
19
19
|
};
|
|
20
20
|
export declare function HeatmapCellContent({ fill, formattedValue }: HeatmapCellContentProps): import("react").JSX.Element;
|
|
21
|
-
export type HeatmapMaterial = "plain" | "
|
|
21
|
+
export type HeatmapMaterial = "plain" | "clay" | "glow";
|
|
22
22
|
export type HeatmapGridProps = Omit<ComponentPropsWithRef<"table">, "children"> & {
|
|
23
23
|
/** Required accessible name, also rendered as a native caption. */
|
|
24
24
|
caption: string;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { BarClay } from "./bar-clay.js";
|
|
4
|
-
import { BarPaper } from "./bar-paper.js";
|
|
5
4
|
/** Reuse bar surface paint, with no cast shade across quantitative interval edges. */
|
|
6
5
|
export function HistogramMaterialFilter({ material, id, bounds, padding, }) {
|
|
7
|
-
return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse", x: bounds.x - padding, y: bounds.y - padding, width: bounds.width + padding * 2, height: bounds.height + padding * 2, colorInterpolationFilters: "sRGB", children: material === "
|
|
6
|
+
return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse", x: bounds.x - padding, y: bounds.y - padding, width: bounds.width + padding * 2, height: bounds.height + padding * 2, colorInterpolationFilters: "sRGB", children: material === "clay" ? (_jsxs(_Fragment, { children: [_jsx(BarClay, { horizontal: false }), _jsx("feComposite", { in2: "footprint", operator: "in" })] })) : (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2.5, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-bar-glow-opacity, 0.6)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "softHalo", in2: "footprint", operator: "out", result: "unpaintedHalo" }), _jsx("feFlood", { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, floodColor: "#fff", result: "binBounds" }), _jsx("feComposite", { in: "unpaintedHalo", in2: "binBounds", operator: "out", result: "exteriorHalo" }), _jsx("feMorphology", { in: "footprint", operator: "erode", radius: 1.5, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-glow-light, #fff)", floodOpacity: 0.75 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" }), _jsx("feGaussianBlur", { in: "light", stdDeviation: 1.5, result: "innerLight" }), _jsx("feComposite", { in: "innerLight", in2: "body", operator: "atop", result: "litBody" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "exteriorHalo" }), _jsx("feMergeNode", { in: "litBody" })] })] })) }));
|
|
8
7
|
}
|
package/dist/line-material.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type LineDrawShapeProps } from "recharts";
|
|
2
|
-
export type LineMaterial = "plain" | "
|
|
2
|
+
export type LineMaterial = "plain" | "clay" | "glow";
|
|
3
3
|
/** Uses engine points only for filter bounds; Curve retains the original geometry and pathRef. */
|
|
4
4
|
export declare function MaterialCurve({ material, filterId, materialWidth, animationElapsedTime: _time, isAnimating: _active, isEntrance: _entrance, visibleLength: _length, clipPath, ...props }: Omit<LineDrawShapeProps, "pathRef"> & {
|
|
5
5
|
pathRef?: LineDrawShapeProps["pathRef"];
|
package/dist/line-material.js
CHANGED
|
@@ -20,5 +20,5 @@ export function MaterialCurve({ material, filterId, materialWidth, animationElap
|
|
|
20
20
|
const pad = (Number.isFinite(width) ? width : 12) / 2 + 6;
|
|
21
21
|
const x = minX - pad;
|
|
22
22
|
const y = minY - pad;
|
|
23
|
-
return (_jsxs("g", { "data-kind-ui": "line-material", "data-material": material, clipPath: clipPath, children: [_jsx("defs", { pointerEvents: "none", children: _jsx("filter", { id: filterId, filterUnits: "userSpaceOnUse", x: x, y: y, width: maxX - x + pad, height: maxY - y + pad, colorInterpolationFilters: "sRGB", children: material === "
|
|
23
|
+
return (_jsxs("g", { "data-kind-ui": "line-material", "data-material": material, clipPath: clipPath, children: [_jsx("defs", { pointerEvents: "none", children: _jsx("filter", { id: filterId, filterUnits: "userSpaceOnUse", x: x, y: y, width: maxX - x + pad, height: maxY - y + pad, colorInterpolationFilters: "sRGB", children: material === "glow" ? (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2, result: "halo" }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 0.65, result: "nearHalo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-line-glow-opacity, 0.5)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "nearHalo", in2: "strength", operator: "in", result: "closeHalo" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.55, result: "core" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-glow-light, #fff)", floodOpacity: 0.5 }), _jsx("feComposite", { in2: "core", operator: "in", result: "lightCore" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "softHalo" }), _jsx("feMergeNode", { in: "closeHalo" }), _jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "lightCore" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: 0.8, result: "rounded" }), _jsx("feSpecularLighting", { in: "rounded", surfaceScale: 1.5, specularConstant: 0.4, specularExponent: 8, lightingColor: "var(--kind-ui-line-clay-light, #fff)", result: "light", children: _jsx("feDistantLight", { azimuth: 225, elevation: 45 }) }), _jsx("feComposite", { in: "light", in2: "SourceAlpha", operator: "in", result: "bevel" }), _jsx("feOffset", { in: "SourceAlpha", dx: -0.6, dy: -1, result: "offset" }), _jsx("feComposite", { in: "SourceAlpha", in2: "offset", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-clay-shade, #17212b)", floodOpacity: 0.16 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "shade" }), _jsxs("feMerge", { result: "body", children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" })] }), _jsx("feComposite", { in: "body", in2: "bevel", operator: "arithmetic", k2: 1, k3: 0.7, result: "lit" }), _jsx("feOffset", { in: "rounded", dx: 0, dy: 1.5, result: "dropped" }), _jsx("feFlood", { floodColor: "var(--kind-ui-line-clay-shade, #17212b)", floodOpacity: 0.16 }), _jsx("feComposite", { in2: "dropped", operator: "in", result: "shadow" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "shadow" }), _jsx("feMergeNode", { in: "lit" })] })] })) }) }), _jsx(Curve, { ...props, strokeWidth: materialWidth, filter: `url(#${filterId})` })] }));
|
|
24
24
|
}
|
package/dist/line-series.js
CHANGED
|
@@ -48,8 +48,7 @@ export function LineSeries({ seriesKey, pointStyle = "default", activePointStyle
|
|
|
48
48
|
? { dot: _jsx(PointMarker, { variant: pointStyle }) }
|
|
49
49
|
: {}), ...(material !== "plain" && props.shape === undefined && props.filter === undefined
|
|
50
50
|
? {
|
|
51
|
-
shape: (_jsx(MaterialCurve, { material: material, filterId: `${generatedId}-material`, materialWidth: props.strokeWidth ??
|
|
52
|
-
(material === "clay" ? 6 : material === "paper" ? 2.5 : 3) })),
|
|
51
|
+
shape: (_jsx(MaterialCurve, { material: material, filterId: `${generatedId}-material`, materialWidth: props.strokeWidth ?? (material === "clay" ? 6 : 3) })),
|
|
53
52
|
strokeLinecap: props.strokeLinecap ?? (props.strokeDasharray ? "butt" : "round"),
|
|
54
53
|
strokeLinejoin: props.strokeLinejoin ?? "round",
|
|
55
54
|
}
|
package/dist/pie-material.js
CHANGED
|
@@ -8,7 +8,7 @@ export function PieMaterialFilter({ material, id, radius, thickness, cx, cy, str
|
|
|
8
8
|
const y = Math.floor(cy - radius - margin);
|
|
9
9
|
const width = Math.ceil(cx + radius + margin) - x;
|
|
10
10
|
const height = Math.ceil(cy + radius + margin) - y;
|
|
11
|
-
return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds?.x ?? x, y: bounds?.y ?? y, width: bounds?.width ?? width, height: bounds?.height ?? height, colorInterpolationFilters: "sRGB", children: material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "footprint", stdDeviation: relief, result: "rounded" }), _jsx("feOffset", { in: "rounded", dx: relief * 0.7, dy: relief * 0.9, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "out", result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: relief * 0.45, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-clay-light, #fff)", floodOpacity: "var(--kind-ui-pie-clay-highlight, 0.55)" }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "rounded", dx: -relief * 0.8, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "out", result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: relief * 0.45, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-pie-clay-shadow, 0.32)" }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "finished" }), _jsx(NativePaintColor, {})] })) :
|
|
11
|
+
return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds?.x ?? x, y: bounds?.y ?? y, width: bounds?.width ?? width, height: bounds?.height ?? height, colorInterpolationFilters: "sRGB", children: material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "footprint", stdDeviation: relief, result: "rounded" }), _jsx("feOffset", { in: "rounded", dx: relief * 0.7, dy: relief * 0.9, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "out", result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: relief * 0.45, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-clay-light, #fff)", floodOpacity: "var(--kind-ui-pie-clay-highlight, 0.55)" }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "rounded", dx: -relief * 0.8, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "out", result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: relief * 0.45, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-pie-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-pie-clay-shadow, 0.32)" }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "finished" }), _jsx(NativePaintColor, {})] })) : (_jsxs(_Fragment, { children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feMorphology", { in: "footprint", operator: "dilate", radius: 1.5, result: "haloGuard" }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 4.5, result: "soft" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-pie-glow-opacity, 0.8)", result: "strength" }), _jsx("feComposite", { in: "soft", in2: "strength", operator: "in", result: "haloPaint" }), _jsx("feComposite", { in: "haloPaint", in2: "haloGuard", operator: "out", result: "halo" }), _jsx("feMerge", { children: _jsx("feMergeNode", { in: "halo" }) })] })) }));
|
|
12
12
|
}
|
|
13
13
|
/** The enclosing native-paint mask owns alpha; this surface contributes color only. */
|
|
14
14
|
function NativePaintColor() {
|
package/dist/pie-series.js
CHANGED
|
@@ -84,7 +84,7 @@ function EntranceSector({ material, emphasisKey, scope, enabled, interactionKey,
|
|
|
84
84
|
const markGroup = useRef(null);
|
|
85
85
|
const [paintFilter, setPaintFilter] = useState("none");
|
|
86
86
|
const [paintClip, setPaintClip] = useState("none");
|
|
87
|
-
// Measure native ownership before attaching paint, including the first non-
|
|
87
|
+
// Measure native ownership before attaching paint, including the first non-default render.
|
|
88
88
|
const [cssTransformOwned, setCssTransformOwned] = useState();
|
|
89
89
|
const [clipTransform, setClipTransform] = useState({ forward: "", inverse: "" });
|
|
90
90
|
const [paintBounds, setPaintBounds] = useState();
|
package/dist/polar-material.js
CHANGED
|
@@ -5,5 +5,5 @@ import { useChartHeight, useChartWidth } from "recharts";
|
|
|
5
5
|
export function PolarMaterialFilter({ material, id, }) {
|
|
6
6
|
const width = useChartWidth();
|
|
7
7
|
const height = useChartHeight();
|
|
8
|
-
return (_jsx("defs", { "data-kind-ui": "polar-material", "data-material": material, pointerEvents: "none", children: _jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", x: -16, y: -16, width: (width ?? 0) + 32, height: (height ?? 0) + 32, colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "
|
|
8
|
+
return (_jsx("defs", { "data-kind-ui": "polar-material", "data-material": material, pointerEvents: "none", children: _jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", x: -16, y: -16, width: (width ?? 0) + 32, height: (height ?? 0) + 32, colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: 4, dy: 4, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "arithmetic", k2: 1, k3: -1, result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: 3, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-clay-light, #fff)", floodOpacity: "var(--kind-ui-polar-clay-highlight, 0.55)" }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -4, dy: -4, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "arithmetic", k2: 1, k3: -1, result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: 3, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-clay-shade, #17212b)", floodOpacity: "var(--kind-ui-polar-clay-shadow, 0.32)" }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: 0.7, numOctaves: 1, seed: 17, result: "grain" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-clay-light, #fff)", floodOpacity: 0.025 }), _jsx("feComposite", { in2: "grain", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "body", operator: "atop" })] })) : (_jsxs(_Fragment, { children: [_jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "0.6 0 0 0 0.4 0 0.6 0 0 0.4 0 0 0.6 0 0.4 0 0 0 1 0", result: "luminousPaint" }), _jsx("feGaussianBlur", { in: "luminousPaint", stdDeviation: 3, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-polar-glow-opacity, 0.65)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feMorphology", { in: "footprint", operator: "dilate", radius: 1, result: "haloGuard" }), _jsx("feComposite", { in: "softHalo", in2: "haloGuard", operator: "out", result: "exterior" }), _jsx("feMorphology", { in: "footprint", operator: "erode", radius: 2.2, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "arithmetic", k2: 1, k3: -1, result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-polar-glow-light, #fff)", floodOpacity: 0.8 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "exterior" }), _jsx("feMergeNode", { in: "body" })] })] }))] }) }));
|
|
9
9
|
}
|
package/dist/sankey-finish.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type SankeyFinish = "plain" | "
|
|
1
|
+
export type SankeyFinish = "plain" | "clay" | "glow";
|
|
2
2
|
/** Sankey-local surface treatment. Never displace the quantitative silhouette. */
|
|
3
3
|
export declare function SankeyFinishFilter({ id, finish, thickness, bounds, }: {
|
|
4
4
|
id: string;
|
package/dist/sankey-finish.js
CHANGED
|
@@ -6,5 +6,5 @@ export function SankeyFinishFilter({ id, finish, thickness, bounds, }) {
|
|
|
6
6
|
const relief = Math.min(4, thickness / 4);
|
|
7
7
|
// A 0.6px blur disappeared in Chromium probes; retain a measured thin-flow halo.
|
|
8
8
|
const halo = Math.min(1, Math.max(0.85, thickness / 4));
|
|
9
|
-
return (_jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse", ...bounds, colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), finish === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: relief, dy: relief, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "arithmetic", k2: 1, k3: -1, result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: relief * 0.8, result: "softTop" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.48 }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -relief, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "arithmetic", k2: 1, k3: -1, result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: relief * 0.8, result: "softBottom" }), _jsx("feFlood", { floodColor: "#17212b", floodOpacity: 0.26 }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" })] })) : (_jsxs(_Fragment, { children: [_jsx("feMorphology", { in: "footprint", operator: "erode", radius: edge, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }),
|
|
9
|
+
return (_jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse", ...bounds, colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), finish === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: relief, dy: relief, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "arithmetic", k2: 1, k3: -1, result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: relief * 0.8, result: "softTop" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.48 }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -relief, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "arithmetic", k2: 1, k3: -1, result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: relief * 0.8, result: "softBottom" }), _jsx("feFlood", { floodColor: "#17212b", floodOpacity: 0.26 }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" })] })) : (_jsxs(_Fragment, { children: [_jsx("feMorphology", { in: "footprint", operator: "erode", radius: edge, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feGaussianBlur", { in: "edge", stdDeviation: edge, result: "softEdge" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.8 }), _jsx("feComposite", { in2: "softEdge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" })] })), finish !== "glow" ? (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.025 }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "grain" }), _jsx("feComposite", { in: "grain", in2: "body", operator: "atop" })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: halo, result: "blur" }), _jsx("feComposite", { in: "blur", in2: "footprint", operator: "out", result: "exterior" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.12 }), _jsx("feComposite", { in2: "exterior", operator: "in", result: "halo" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "halo" }), _jsx("feMergeNode", { in: "body" })] })] }))] }));
|
|
10
10
|
}
|
package/dist/scatter-material.js
CHANGED
|
@@ -35,5 +35,5 @@ export function ScatterMaterialSymbol({ material, ...props }) {
|
|
|
35
35
|
const soft = Math.min(2, span * 0.1);
|
|
36
36
|
const halo = Math.min(1.8, span * 0.065);
|
|
37
37
|
const extent = span * 3 + strokeExtent;
|
|
38
|
-
return (_jsxs(_Fragment, { children: [_jsxs("defs", { "data-kind-ui": "scatter-material", "data-material": material, pointerEvents: "none", children: [material === "glow" && (_jsxs(_Fragment, { children: [_jsx("clipPath", { id: `${id}-geometry`, clipPathUnits: "userSpaceOnUse", children: _jsx(Symbols, { cx: props.cx, cy: props.cy, size: props.size ?? 64, ...(props.type !== undefined ? { type: props.type } : {}), ...(props.sizeType !== undefined ? { sizeType: props.sizeType } : {}), fill: "#000", stroke: "#000", strokeWidth: props.strokeWidth ?? 0 }) }), _jsx("filter", { id: `${id}-guard`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", children: _jsx("feMorphology", { in: "SourceGraphic", operator: "dilate", radius: guard }) }), _jsxs("mask", { id: `${id}-outside`, maskUnits: "userSpaceOnUse", x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, children: [_jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#fff" }), _jsx("g", { filter: `url(#${id}-guard)`, children: _jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#000", clipPath: `url(#${id}-geometry)` }) })] }), _jsxs("filter", { id: `${id}-halo`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "painted", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: halo, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-scatter-glow-opacity, 0.65)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "softHalo", in2: "painted", operator: "out" })] })] })), _jsxs("filter", { id: id, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "
|
|
38
|
+
return (_jsxs(_Fragment, { children: [_jsxs("defs", { "data-kind-ui": "scatter-material", "data-material": material, pointerEvents: "none", children: [material === "glow" && (_jsxs(_Fragment, { children: [_jsx("clipPath", { id: `${id}-geometry`, clipPathUnits: "userSpaceOnUse", children: _jsx(Symbols, { cx: props.cx, cy: props.cy, size: props.size ?? 64, ...(props.type !== undefined ? { type: props.type } : {}), ...(props.sizeType !== undefined ? { sizeType: props.sizeType } : {}), fill: "#000", stroke: "#000", strokeWidth: props.strokeWidth ?? 0 }) }), _jsx("filter", { id: `${id}-guard`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", children: _jsx("feMorphology", { in: "SourceGraphic", operator: "dilate", radius: guard }) }), _jsxs("mask", { id: `${id}-outside`, maskUnits: "userSpaceOnUse", x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, children: [_jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#fff" }), _jsx("g", { filter: `url(#${id}-guard)`, children: _jsx("rect", { x: (props.cx ?? 0) - extent, y: (props.cy ?? 0) - extent, width: extent * 2, height: extent * 2, fill: "#000", clipPath: `url(#${id}-geometry)` }) })] }), _jsxs("filter", { id: `${id}-halo`, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "painted", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), _jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: halo, result: "halo" }), _jsx("feFlood", { floodOpacity: "var(--kind-ui-scatter-glow-opacity, 0.65)", result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feComposite", { in: "softHalo", in2: "painted", operator: "out" })] })] })), _jsxs("filter", { id: id, x: -1, y: -1, width: 3, height: 3, filterUnits: "objectBoundingBox", primitiveUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feComponentTransfer", { in: "SourceAlpha", result: "footprint", children: _jsx("feFuncA", { type: "linear", slope: 100000 }) }), material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "footprint", dx: relief, dy: relief, result: "lower" }), _jsx("feComposite", { in: "footprint", in2: "lower", operator: "out", result: "top" }), _jsx("feGaussianBlur", { in: "top", stdDeviation: soft, result: "softTop" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-clay-light, #fff)", floodOpacity: 0.62 }), _jsx("feComposite", { in2: "softTop", operator: "in", result: "light" }), _jsx("feOffset", { in: "footprint", dx: -relief, dy: -relief, result: "upper" }), _jsx("feComposite", { in: "footprint", in2: "upper", operator: "out", result: "bottom" }), _jsx("feGaussianBlur", { in: "bottom", stdDeviation: soft, result: "softBottom" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-clay-shade, #17212b)", floodOpacity: 0.38 }), _jsx("feComposite", { in2: "softBottom", operator: "in", result: "shade" }), _jsx("feComposite", { in: "shade", in2: "SourceGraphic", operator: "atop", result: "shaded" }), _jsx("feComposite", { in: "light", in2: "shaded", operator: "atop", result: "body" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: 0.7, numOctaves: 1, seed: 17, result: "grain" }), _jsx("feFlood", { floodColor: "#fff", floodOpacity: 0.035 }), _jsx("feComposite", { in2: "grain", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "body", operator: "atop" })] })) : (_jsxs(_Fragment, { children: [_jsx("feMorphology", { in: "footprint", operator: "erode", radius: rim, result: "inside" }), _jsx("feComposite", { in: "footprint", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-glow-light, #fff)", floodOpacity: 0.55 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsx("feComposite", { in: "light", in2: "SourceGraphic", operator: "atop", result: "body" }), _jsx("feFlood", { floodColor: "var(--kind-ui-scatter-glow-light, #fff)", floodOpacity: 0.12, result: "bloom" }), _jsx("feComposite", { in: "bloom", in2: "body", operator: "atop", result: "luminousBody" })] }))] })] }), material === "glow" ? (_jsxs(_Fragment, { children: [_jsx("use", { "data-kind-ui": "scatter-light", href: `#${id}-body`, filter: `url(#${id}-halo)`, mask: `url(#${id}-outside)`, pointerEvents: "none", "aria-hidden": "true", focusable: "false", tabIndex: -1 }), _jsx("g", { id: `${id}-body`, children: _jsx(Symbols, { ...props, filter: `url(#${id})` }) })] })) : (_jsx(Symbols, { ...props, filter: `url(#${id})` }))] }));
|
|
39
39
|
}
|
package/dist/styles.css
CHANGED
|
@@ -418,11 +418,6 @@
|
|
|
418
418
|
/* Heatmap materials are background paint, confined to an 8% perimeter.
|
|
419
419
|
The quantitative center and native geometry are untouched. */
|
|
420
420
|
@layer kind-ui {
|
|
421
|
-
[data-kind-ui="heatmap-grid"] td[data-material="paper"] {
|
|
422
|
-
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22grain%22%20width%3D%226%22%20height%3D%227%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M1%201h1M4%204h1M2%206h1%22%20stroke%3D%22%23705c48%22%20stroke-opacity%3D%22.32%22%20stroke-width%3D%22.6%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V100H0Z%20M8%208V92H92V8Z%22%20fill%3D%22%23eadac0%22%20fill-opacity%3D%22.7%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M0%200H100V100H0Z%20M8%208V92H92V8Z%22%20fill%3D%22url%28%23grain%29%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22M3%205L26%203L50%205L75%203L97%205L95%2030L97%2055L95%2078L97%2096L72%2095L48%2097L25%2095L3%2097L5%2074L3%2049L5%2024Z%22%20fill%3D%22none%22%20stroke%3D%22%235c4938%22%20stroke-opacity%3D%22.65%22%20stroke-width%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M5%203L30%205L58%203L83%205L95%203M3%207L5%2035L3%2062L5%2090%22%20fill%3D%22none%22%20stroke%3D%22%23fffaf0%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%22.7%22%2F%3E%3C%2Fsvg%3E");
|
|
423
|
-
background-size: 100% 100%;
|
|
424
|
-
background-repeat: no-repeat;
|
|
425
|
-
}
|
|
426
421
|
[data-kind-ui="heatmap-grid"] td[data-material="clay"] {
|
|
427
422
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22top%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22bottom%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23172033%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23172033%22%20stop-opacity%3D%22.4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22left%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22right%22%3E%3Cstop%20stop-color%3D%22%23172033%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23172033%22%20stop-opacity%3D%22.3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%200H100V8H0Z%22%20fill%3D%22url%28%23top%29%22%2F%3E%3Cpath%20d%3D%22M0%2092H100V100H0Z%22%20fill%3D%22url%28%23bottom%29%22%2F%3E%3Cpath%20d%3D%22M0%208H8V92H0Z%22%20fill%3D%22url%28%23left%29%22%2F%3E%3Cpath%20d%3D%22M92%208H100V92H92Z%22%20fill%3D%22url%28%23right%29%22%2F%3E%3C%2Fsvg%3E");
|
|
428
423
|
background-size: 100% 100%;
|
package/dist/surface-material.js
CHANGED
|
@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
3
3
|
import { AreaClayRelief } from "./area-clay.js";
|
|
4
4
|
/** Internal filled-surface finish only. Callers own native shapes, IDs and bounds. */
|
|
5
5
|
export function SurfaceMaterialFilter({ material, id, bounds, family, }) {
|
|
6
|
-
return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, colorInterpolationFilters: "sRGB", children: material === "
|
|
6
|
+
return (_jsx("filter", { id: id, filterUnits: "userSpaceOnUse", x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height, colorInterpolationFilters: "sRGB", children: material === "clay" && family === "area" ? (_jsx(AreaClayRelief, {})) : material === "clay" ? (_jsxs(_Fragment, { children: [_jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: 1.5, result: "lower" }), _jsx("feComposite", { in: "SourceAlpha", in2: "lower", operator: "out", result: "topEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-light, #fff)`, floodOpacity: 0.65 }), _jsx("feComposite", { in2: "topEdge", operator: "in", result: "light" }), _jsx("feOffset", { in: "SourceAlpha", dx: 0, dy: -2, result: "upper" }), _jsx("feComposite", { in: "SourceAlpha", in2: "upper", operator: "out", result: "bottomEdge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-clay-shade, #17212b)`, floodOpacity: 0.38 }), _jsx("feComposite", { in2: "bottomEdge", operator: "in", result: "shade" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "shade" }), _jsx("feMergeNode", { in: "light" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: 2.5, result: "halo" }), _jsx("feFlood", { floodOpacity: `var(--kind-ui-${family}-glow-opacity, 0.6)`, result: "strength" }), _jsx("feComposite", { in: "halo", in2: "strength", operator: "in", result: "softHalo" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 0.8, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "out", result: "edge" }), _jsx("feFlood", { floodColor: `var(--kind-ui-${family}-glow-light, #fff)`, floodOpacity: 0.45 }), _jsx("feComposite", { in2: "edge", operator: "in", result: "light" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "softHalo" }), _jsx("feMergeNode", { in: "SourceGraphic" }), _jsx("feMergeNode", { in: "light" })] })] })) }));
|
|
7
7
|
}
|
package/package.json
CHANGED
package/dist/bar-paper.d.ts
DELETED
package/dist/bar-paper.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
/** Uneven inset pencil contours, never displacement or an expanded quantitative mark. */
|
|
4
|
-
export function BarPaper() {
|
|
5
|
-
return (_jsxs(_Fragment, { children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65 0.3", numOctaves: 1, seed: 7, result: "fiber" }), _jsx("feFlood", { floodColor: "var(--kind-ui-bar-paper-fiber, #fff)", floodOpacity: "var(--kind-ui-bar-paper-grain, 0.14)" }), _jsx("feComposite", { in2: "fiber", operator: "in", result: "texture" }), _jsx("feComposite", { in: "texture", in2: "SourceGraphic", operator: "atop", result: "paper" }), _jsx("feMorphology", { in: "SourceAlpha", operator: "erode", radius: 1.2, result: "inside" }), _jsx("feComposite", { in: "SourceAlpha", in2: "inside", operator: "arithmetic", k2: 1, k3: -1, result: "edge" }), _jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.08 0.2", numOctaves: 1, seed: 11, result: "pencil" }), _jsx("feColorMatrix", { in: "pencil", type: "luminanceToAlpha", result: "pencilMask" }), _jsx("feComponentTransfer", { in: "pencilMask", result: "sketch", children: _jsx("feFuncA", { type: "linear", slope: 1.6, intercept: -0.15 }) }), _jsx("feComposite", { in: "edge", in2: "sketch", operator: "in", result: "sketchEdge" }), _jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "0.35 0 0 0 0 0 0.35 0 0 0 0 0 0.35 0 0 0 0 0 1 0", result: "ink" }), _jsx("feComposite", { in: "ink", in2: "sketchEdge", operator: "in", result: "contour" }), _jsx("feComposite", { in: "contour", in2: "paper", operator: "atop" })] }));
|
|
6
|
-
}
|