@bug-on/m3-expressive 1.2.3 → 1.2.4

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/dist/shapes.d.mts CHANGED
@@ -1,502 +1,7 @@
1
+ import { R as RoundedPolygon, a as CornerRounding, b as Cubic, e as MutableCubic, M as MD3ShapeName } from './md3-expressive-shapes-CPcfl_Hf.mjs';
2
+ export { A as ANGLE_EPSILON, C as CornerFeature, D as DISTANCE_EPSILON, E as EdgeFeature, F as FLOAT_PI, c as Feature, d as MD3Shapes, P as Point, f as PointTransformer, U as UNROUNDED, g as addPoints, h as clockwise, i as convex, j as cornerFeature, k as cornerRounding, l as directionVector, m as distance, n as distanceSquared, o as dividePoint, p as dotProduct, q as edgeFeature, r as getDirection, s as getDistance, t as getDistanceSquared, u as interpolate, v as lerpPoint, w as point, x as positiveModulo, y as radialToCartesian, z as rotate90, B as scalePoint, G as square, H as subtractPoints, I as transformFeature, J as transformPoint } from './md3-expressive-shapes-CPcfl_Hf.mjs';
1
3
  import { ReactNode, CSSProperties } from 'react';
2
4
 
3
- /**
4
- * Corner rounding parameters for polygon vertices.
5
- * Ported from androidx.graphics.shapes.CornerRounding.kt
6
- *
7
- * @see https://m3.material.io/styles/shape/corner-radius-scale
8
- */
9
- /**
10
- * Defines how a polygon corner is rounded.
11
- *
12
- * @example
13
- * // Fully rounded corner with radius 16
14
- * const rounding: CornerRounding = { radius: 16, smoothing: 0 };
15
- *
16
- * @example
17
- * // Rounded corner with iOS-style squircle smoothing
18
- * const smoothRounding: CornerRounding = { radius: 16, smoothing: 0.6 };
19
- */
20
- interface CornerRounding {
21
- /**
22
- * The radius of the rounding. A value of 0 means no rounding (sharp corner).
23
- * @default 0
24
- */
25
- readonly radius: number;
26
- /**
27
- * Smoothing factor in [0, 1]. Controls how the rounding curve transitions from
28
- * the straight edge to the circular arc (squircle-like effect).
29
- * 0 = pure circular arc, 1 = maximum smoothing.
30
- * @default 0
31
- */
32
- readonly smoothing: number;
33
- }
34
- /**
35
- * Creates a CornerRounding.
36
- * @param radius - Rounding radius (default: 0)
37
- * @param smoothing - Smoothing factor 0–1 (default: 0)
38
- */
39
- declare function cornerRounding(radius?: number, smoothing?: number): CornerRounding;
40
- /** No rounding: straight/sharp corners. */
41
- declare const UNROUNDED: CornerRounding;
42
-
43
- /**
44
- * Shared utility constants and functions for the MD3 Expressive Shape Engine.
45
- * Ported from androidx.graphics.shapes.Utils.kt
46
- *
47
- * @see https://m3.material.io/styles/shape/overview-principles
48
- */
49
- /** Epsilon for floating-point distance comparisons */
50
- declare const DISTANCE_EPSILON = 0.0001;
51
- /** Epsilon for angle comparisons */
52
- declare const ANGLE_EPSILON = 0.0001;
53
- /** Pi as a float constant */
54
- declare const FLOAT_PI: number;
55
- /**
56
- * Calculates the Euclidean distance between two coordinate offsets.
57
- * @param dx - Difference in x coordinates
58
- * @param dy - Difference in y coordinates
59
- * @returns The distance
60
- */
61
- declare function distance(dx: number, dy: number): number;
62
- /**
63
- * Calculates the squared Euclidean distance (cheaper than distance).
64
- * @param dx - Difference in x coordinates
65
- * @param dy - Difference in y coordinates
66
- * @returns The squared distance
67
- */
68
- declare function distanceSquared(dx: number, dy: number): number;
69
- /**
70
- * Converts polar coordinates to Cartesian (x, y).
71
- * @param radius - The radial distance
72
- * @param angle - The angle in radians
73
- * @returns A tuple [x, y]
74
- */
75
- declare function radialToCartesian(radius: number, angle: number): [number, number];
76
- /**
77
- * Returns value modulo divisor, always positive.
78
- * @param value - The value
79
- * @param divisor - The divisor
80
- * @returns Positive modulo result
81
- */
82
- declare function positiveModulo(value: number, divisor: number): number;
83
- /**
84
- * Linearly interpolates between start and stop.
85
- * @param start - Start value (at fraction=0)
86
- * @param stop - End value (at fraction=1)
87
- * @param fraction - Interpolation factor [0,1]
88
- * @returns Interpolated value
89
- */
90
- declare function interpolate(start: number, stop: number, fraction: number): number;
91
- /**
92
- * Returns the square of a value.
93
- * @param value - The value to square
94
- */
95
- declare function square(value: number): number;
96
- /**
97
- * Returns a unit direction vector from (0,0) toward (dx, dy).
98
- * @param dx - X component
99
- * @param dy - Y component
100
- * @returns [nx, ny] normalized direction
101
- */
102
- declare function directionVector(dx: number, dy: number): [number, number];
103
- /**
104
- * Checks if the turn from prev→curr→next is convex (clockwise in screen coords).
105
- * @param prevX - Previous vertex x
106
- * @param prevY - Previous vertex y
107
- * @param currX - Current vertex x
108
- * @param currY - Current vertex y
109
- * @param nextX - Next vertex x
110
- * @param nextY - Next vertex y
111
- * @returns true if convex
112
- */
113
- declare function convex(prevX: number, prevY: number, currX: number, currY: number, nextX: number, nextY: number): boolean;
114
- /**
115
- * Type for a function that transforms a point (x, y) → (x', y').
116
- */
117
- type PointTransformer = (x: number, y: number) => [number, number];
118
-
119
- /**
120
- * Point type and operations for the MD3 Expressive Shape Engine.
121
- * Ported from androidx.graphics.shapes.Point.kt
122
- *
123
- * In Kotlin, Point is a type alias for FloatFloatPair. Here we use a plain object
124
- * for zero-overhead structural typing in TypeScript.
125
- */
126
-
127
- /** A 2D point or vector. */
128
- interface Point {
129
- readonly x: number;
130
- readonly y: number;
131
- }
132
- /**
133
- * Creates a new Point.
134
- * @param x - X coordinate
135
- * @param y - Y coordinate
136
- */
137
- declare function point(x: number, y: number): Point;
138
- /**
139
- * Returns the magnitude (distance from origin) of the point.
140
- * @param p - The point
141
- */
142
- declare function getDistance(p: Point): number;
143
- /**
144
- * Returns the squared magnitude of the point (cheaper than getDistance).
145
- * @param p - The point
146
- */
147
- declare function getDistanceSquared(p: Point): number;
148
- /**
149
- * Dot product of two points (treated as vectors).
150
- * @param a - First point
151
- * @param b - Second point
152
- */
153
- declare function dotProduct(a: Point, b: Point): number;
154
- /**
155
- * Rotates the point 90 degrees counter-clockwise.
156
- * @param p - The point
157
- * @returns New rotated point
158
- */
159
- declare function rotate90(p: Point): Point;
160
- /**
161
- * Returns the unit vector in the direction of the point from (0,0).
162
- * @param p - The point
163
- * @throws Error if the point is at the origin
164
- */
165
- declare function getDirection(p: Point): Point;
166
- /**
167
- * Checks if p0→p1→p2 turn is clockwise (positive cross product in screen coords).
168
- * @param p0 - Previous point
169
- * @param p1 - Current point
170
- * @param p2 - Next point
171
- */
172
- declare function clockwise(p0: Point, p1: Point, p2: Point): boolean;
173
- /** Point addition. */
174
- declare function addPoints(a: Point, b: Point): Point;
175
- /** Point subtraction. */
176
- declare function subtractPoints(a: Point, b: Point): Point;
177
- /** Scalar multiplication. */
178
- declare function scalePoint(p: Point, scalar: number): Point;
179
- /** Scalar division. */
180
- declare function dividePoint(p: Point, scalar: number): Point;
181
- /**
182
- * Linearly interpolates between two points.
183
- * @param start - Start point (at fraction=0)
184
- * @param stop - End point (at fraction=1)
185
- * @param fraction - Interpolation factor [0,1]
186
- */
187
- declare function lerpPoint(start: Point, stop: Point, fraction: number): Point;
188
- /**
189
- * Applies a PointTransformer to a point.
190
- * @param p - The original point
191
- * @param fn - The transform function
192
- */
193
- declare function transformPoint(p: Point, fn: PointTransformer): Point;
194
-
195
- /**
196
- * Cubic Bézier curve type for the MD3 Expressive Shape Engine.
197
- * Ported from androidx.graphics.shapes.Cubic.kt
198
- *
199
- * A cubic holds 8 floats: [anchor0X, anchor0Y, control0X, control0Y, control1X, control1Y, anchor1X, anchor1Y]
200
- */
201
-
202
- /**
203
- * A single cubic Bézier curve segment.
204
- *
205
- * The curve goes from anchor0 → (via control0, control1) → anchor1.
206
- *
207
- * @example
208
- * const line = Cubic.straightLine(0, 0, 1, 0);
209
- * const arc = Cubic.circularArc(0, 0, 1, 0, 0, 1);
210
- */
211
- declare class Cubic {
212
- /** Internal storage: [a0x, a0y, c0x, c0y, c1x, c1y, a1x, a1y] */
213
- readonly points: number[];
214
- constructor(points: number[]);
215
- /** First anchor point X */
216
- get anchor0X(): number;
217
- /** First anchor point Y */
218
- get anchor0Y(): number;
219
- /** First control point X */
220
- get control0X(): number;
221
- /** First control point Y */
222
- get control0Y(): number;
223
- /** Second control point X */
224
- get control1X(): number;
225
- /** Second control point Y */
226
- get control1Y(): number;
227
- /** Second anchor point X */
228
- get anchor1X(): number;
229
- /** Second anchor point Y */
230
- get anchor1Y(): number;
231
- /**
232
- * Returns a point on the curve at parameter t (0=start, 1=end).
233
- * Uses the standard cubic Bézier formula.
234
- * @param t - Parameter in [0, 1]
235
- */
236
- pointOnCurve(t: number): Point;
237
- /**
238
- * Returns true if this curve has (near) zero length.
239
- */
240
- zeroLength(): boolean;
241
- /**
242
- * Splits this cubic at parameter t, returning two cubics.
243
- * Uses De Casteljau's algorithm.
244
- * @param t - Split parameter in [0, 1]
245
- * @returns [left, right] pair
246
- */
247
- split(t: number): [Cubic, Cubic];
248
- /**
249
- * Returns a reversed copy of this cubic (anchor0 ↔ anchor1, controls swapped).
250
- */
251
- reverse(): Cubic;
252
- /**
253
- * Calculates the axis-aligned bounding box.
254
- * @param approximate - If true, uses control point hull (faster). Default: false.
255
- * @returns [minX, minY, maxX, maxY]
256
- */
257
- calculateBounds(approximate?: boolean): [number, number, number, number];
258
- /**
259
- * Interpolates between this cubic and another at fraction t.
260
- * @param other - Target cubic
261
- * @param t - Fraction [0, 1]
262
- */
263
- interpolateTo(other: Cubic, t: number): Cubic;
264
- /**
265
- * Applies a PointTransformer to all anchor and control points.
266
- * @param fn - The transform function
267
- */
268
- transformed(fn: PointTransformer): Cubic;
269
- toString(): string;
270
- /**
271
- * Creates a cubic representing a straight line.
272
- * Control points lie at 1/3 and 2/3 of the line.
273
- * @param x0 - Start anchor X
274
- * @param y0 - Start anchor Y
275
- * @param x1 - End anchor X
276
- * @param y1 - End anchor Y
277
- */
278
- static straightLine(x0: number, y0: number, x1: number, y1: number): Cubic;
279
- /**
280
- * Creates a cubic approximating a circular arc.
281
- * p0 and p1 must be equidistant from the center.
282
- * For arcs > 180°, use multiple cubics.
283
- *
284
- * @param centerX - Arc center X
285
- * @param centerY - Arc center Y
286
- * @param x0 - Start point X (on circle)
287
- * @param y0 - Start point Y (on circle)
288
- * @param x1 - End point X (on circle)
289
- * @param y1 - End point Y (on circle)
290
- */
291
- static circularArc(centerX: number, centerY: number, x0: number, y0: number, x1: number, y1: number): Cubic;
292
- /**
293
- * Creates a zero-length cubic at the given point.
294
- * @param x - X coordinate
295
- * @param y - Y coordinate
296
- */
297
- static empty(x: number, y: number): Cubic;
298
- }
299
- /**
300
- * A mutable version of Cubic used in performance-critical paths (Morph.forEachCubic).
301
- * Reuses the same instance to avoid allocations.
302
- */
303
- declare class MutableCubic extends Cubic {
304
- constructor();
305
- /**
306
- * Mutably interpolates between c1 and c2 at the given progress.
307
- * @param c1 - Start cubic
308
- * @param c2 - End cubic
309
- * @param progress - Interpolation factor [0, 1]
310
- */
311
- interpolate(c1: Cubic, c2: Cubic, progress: number): void;
312
- /**
313
- * Mutably applies a PointTransformer to all points.
314
- * @param fn - The transform function
315
- */
316
- transform(fn: PointTransformer): void;
317
- }
318
-
319
- /**
320
- * Feature types for the MD3 Expressive Shape Engine.
321
- * Ported from androidx.graphics.shapes.Features.kt
322
- *
323
- * Features describe the outline segments of a RoundedPolygon:
324
- * - Corner: a (potentially rounded) vertex
325
- * - Edge: a straight or curved segment between two corners
326
- */
327
-
328
- /**
329
- * A discriminated union representing one outline segment of a polygon.
330
- *
331
- * @example
332
- * const corner: Feature = { type: "corner", cubics: [...], convex: true };
333
- * const edge: Feature = { type: "edge", cubics: [...] };
334
- */
335
- type Feature = CornerFeature | EdgeFeature;
336
- /** A (potentially rounded) corner vertex. */
337
- interface CornerFeature {
338
- readonly type: "corner";
339
- /**
340
- * Cubic curves making up this corner.
341
- * Unrounded corner = 1 zero-length cubic. Rounded = 1–3 cubics (flanking + arc + flanking).
342
- */
343
- readonly cubics: Cubic[];
344
- /** True if this corner is convex (pointing outward). */
345
- readonly convex: boolean;
346
- }
347
- /** A straight or curved edge segment between two corners. */
348
- interface EdgeFeature {
349
- readonly type: "edge";
350
- /** Cubic curves making up this edge (usually a single straight-line cubic). */
351
- readonly cubics: Cubic[];
352
- }
353
- /**
354
- * Creates a corner feature.
355
- * @param cubics - Cubic curves defining the corner shape
356
- * @param convex - Whether the corner is convex
357
- */
358
- declare function cornerFeature(cubics: Cubic[], convex: boolean): CornerFeature;
359
- /**
360
- * Creates an edge feature.
361
- * @param cubics - Cubic curves defining the edge
362
- */
363
- declare function edgeFeature(cubics: Cubic[]): EdgeFeature;
364
- /**
365
- * Returns a transformed copy of a feature.
366
- * @param feature - The feature to transform
367
- * @param fn - Point transformer function
368
- */
369
- declare function transformFeature(feature: Feature, fn: PointTransformer): Feature;
370
-
371
- /**
372
- * RoundedPolygon — core shape class for the MD3 Expressive Shape Engine.
373
- * Ported from androidx.graphics.shapes.RoundedPolygon.kt
374
- *
375
- * A RoundedPolygon is defined by a list of Feature (Corner + Edge) objects.
376
- * Its geometry is stored as a flat list of Cubic Bézier curves that form
377
- * a closed, contiguous outline.
378
- */
379
-
380
- /**
381
- * The core shape class. Represents a closed polygon outline as a list of Cubic
382
- * Bézier curves, optionally rounded at the vertices.
383
- *
384
- * All shapes in MD3 Expressive are represented as RoundedPolygon instances.
385
- *
386
- * @example
387
- * // Create a circle (8-vertex polygon, fully rounded)
388
- * const circle = RoundedPolygon.circle();
389
- *
390
- * @example
391
- * // Create a rounded rectangle
392
- * const rect = RoundedPolygon.rectangle(2, 1, { radius: 0.25, smoothing: 0 });
393
- */
394
- declare class RoundedPolygon {
395
- /** Flat list of cubic Bézier curves forming the closed outline. */
396
- readonly cubics: Cubic[];
397
- /** Feature list (corners + edges). */
398
- readonly features: Feature[];
399
- /** Center point of the polygon. */
400
- readonly center: Point;
401
- /** @internal Use static factory methods instead */
402
- private constructor();
403
- get centerX(): number;
404
- get centerY(): number;
405
- /**
406
- * Creates a polygon from a vertex count (regular polygon).
407
- * @param numVertices - Number of vertices (≥ 3)
408
- * @param radius - Circumradius (default: 1)
409
- * @param centerX - Center X (default: 0)
410
- * @param centerY - Center Y (default: 0)
411
- * @param rounding - Corner rounding for all vertices
412
- * @param perVertexRounding - Per-vertex rounding overrides
413
- */
414
- static fromNumVertices(numVertices: number, radius?: number, centerX?: number, centerY?: number, rounding?: CornerRounding, perVertexRounding?: CornerRounding[]): RoundedPolygon;
415
- /**
416
- * Creates a polygon from a flat vertex array [x0, y0, x1, y1, ...].
417
- * @param vertices - Flat array of x,y pairs (length must be even and ≥ 6)
418
- * @param rounding - Corner rounding for all vertices
419
- * @param perVertexRounding - Per-vertex rounding overrides
420
- * @param centerX - Center X (auto-calculated if not provided)
421
- * @param centerY - Center Y (auto-calculated if not provided)
422
- */
423
- static fromVertices(vertices: number[], rounding?: CornerRounding, perVertexRounding?: CornerRounding[], centerX?: number, centerY?: number): RoundedPolygon;
424
- /**
425
- * Creates a polygon from a pre-built Feature list.
426
- * @param features - Feature list (≥ 2 features)
427
- * @param centerX - Center X (auto-calculated if NaN)
428
- * @param centerY - Center Y (auto-calculated if NaN)
429
- */
430
- static fromFeatures(features: Feature[], centerX?: number, centerY?: number): RoundedPolygon;
431
- /**
432
- * Returns a new RoundedPolygon with all points transformed.
433
- * @param fn - Transform function: (x, y) => [x', y']
434
- */
435
- transformed(fn: PointTransformer): RoundedPolygon;
436
- /**
437
- * Returns a normalized copy: scaled and centered to fit in [0,1] × [0,1].
438
- * Maintains aspect ratio by using the larger dimension.
439
- */
440
- normalized(): RoundedPolygon;
441
- /**
442
- * Calculates the axis-aligned bounding box.
443
- * @param approximate - If true, uses control point hull (faster). Default: true.
444
- * @returns [minX, minY, maxX, maxY]
445
- */
446
- calculateBounds(approximate?: boolean): [number, number, number, number];
447
- /**
448
- * Calculates the maximum bounding square (useful for shapes that rotate).
449
- * @returns [minX, minY, maxX, maxY] of the max-bounds square
450
- */
451
- calculateMaxBounds(): [number, number, number, number];
452
- }
453
-
454
- /**
455
- * MD3 Expressive Shape Catalog — auto-generated from SVGs.
456
- *
457
- * Each shape is a pre-normalized RoundedPolygon (fits in [0,1]×[0,1], centered at (0.5, 0.5)).
458
- * Regenerated via scratch/generate-shapes.ts.
459
- */
460
-
461
- declare const MD3Shapes: {
462
- readonly arch: RoundedPolygon;
463
- readonly arrow: RoundedPolygon;
464
- readonly boom: RoundedPolygon;
465
- readonly bun: RoundedPolygon;
466
- readonly burst: RoundedPolygon;
467
- readonly circle: RoundedPolygon;
468
- readonly clamshell: RoundedPolygon;
469
- readonly diamond: RoundedPolygon;
470
- readonly fan: RoundedPolygon;
471
- readonly flower: RoundedPolygon;
472
- readonly gem: RoundedPolygon;
473
- readonly ghostish: RoundedPolygon;
474
- readonly heart: RoundedPolygon;
475
- readonly clover4Leaf: RoundedPolygon;
476
- readonly clover8Leaf: RoundedPolygon;
477
- readonly oval: RoundedPolygon;
478
- readonly pentagon: RoundedPolygon;
479
- readonly pill: RoundedPolygon;
480
- readonly pixelCircle: RoundedPolygon;
481
- readonly pixelTriangle: RoundedPolygon;
482
- readonly puffyDiamond: RoundedPolygon;
483
- readonly puffy: RoundedPolygon;
484
- readonly semiCircle: RoundedPolygon;
485
- readonly cookie12Sided: RoundedPolygon;
486
- readonly cookie4Sided: RoundedPolygon;
487
- readonly cookie6Sided: RoundedPolygon;
488
- readonly cookie7Sided: RoundedPolygon;
489
- readonly cookie9Sided: RoundedPolygon;
490
- readonly slanted: RoundedPolygon;
491
- readonly softBoom: RoundedPolygon;
492
- readonly softBurst: RoundedPolygon;
493
- readonly square: RoundedPolygon;
494
- readonly sunny: RoundedPolygon;
495
- readonly triangle: RoundedPolygon;
496
- readonly verySunny: RoundedPolygon;
497
- };
498
- type MD3ShapeName = keyof typeof MD3Shapes;
499
-
500
5
  /**
501
6
  * MD3 Corner Radius Token Scale.
502
7
  * Ported from MD3 spec: https://m3.material.io/styles/shape/corner-radius-scale
@@ -1116,4 +621,4 @@ interface UseShapeMorphOptions {
1116
621
  */
1117
622
  declare function useShapeMorph({ shape, morphTo, morphOn, morphOptions, scrollProgress, width, height, disabled, }: UseShapeMorphOptions): UseShapeMorphResult;
1118
623
 
1119
- export { ANGLE_EPSILON, type CornerFeature, type CornerRounding, Cubic, type CubicPair, DISTANCE_EPSILON, type DoubleMapper, type EdgeFeature, FLOAT_PI, type Feature, MD3CornerRadius, type MD3CornerRadiusToken, type MD3ShapeName, MD3Shapes, type MeasuredCubic, type MeasuredFeature, MeasuredPolygon, Morph, type MorphTrigger, MutableCubic, type Point, type PointTransformer, RoundedPolygon, ShapeIcon, type ShapeIconProps, ShapeMedia, type ShapeMediaProps, ShapeMediaServer, type ShapeMorphOptions, type ShapeRef, ShapeSvg, type ShapeSvgProps, UNROUNDED, type UseShapeMorphResult, addPoints, circle, clockwise, convex, cornerFeature, cornerRounding, createDoubleMapper, directionVector, distance, distanceSquared, dividePoint, dotProduct, edgeFeature, featureMapper, getDirection, getDistance, getDistanceSquared, interpolate, interpolatePath, lerpPoint, pill, pillStar, point, positiveModulo, radialToCartesian, rectangle, rotate90, scalePoint, square, star, subtractPoints, toClipPath, toSvgPath, transformFeature, transformPoint, useShapeMorph };
624
+ export { CornerRounding, Cubic, type CubicPair, type DoubleMapper, MD3CornerRadius, type MD3CornerRadiusToken, MD3ShapeName, type MeasuredCubic, type MeasuredFeature, MeasuredPolygon, Morph, type MorphTrigger, MutableCubic, RoundedPolygon, ShapeIcon, type ShapeIconProps, ShapeMedia, type ShapeMediaProps, ShapeMediaServer, type ShapeMorphOptions, type ShapeRef, ShapeSvg, type ShapeSvgProps, type UseShapeMorphResult, circle, createDoubleMapper, featureMapper, interpolatePath, pill, pillStar, rectangle, star, toClipPath, toSvgPath, useShapeMorph };