@x-plat/design-system 0.5.33 → 0.5.34

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.
Files changed (7) hide show
  1. package/dist/components/Chart/index.cjs +27 -83
  2. package/dist/components/Chart/index.js +27 -83
  3. package/dist/components/index.cjs +27 -83
  4. package/dist/components/index.js +27 -83
  5. package/dist/index.cjs +27 -83
  6. package/dist/index.js +27 -83
  7. package/package.json +1 -1
package/dist/components/Chart/index.cjs CHANGED
@@ -152,7 +152,9 @@ var useChartAnimation = (containerRef, dataKey) => {
152
152
  prevDataKey.current = dataKey;
153
153
  if (prefersReducedMotion()) return;
154
154
  setAnimate(false);
155
- requestAnimationFrame(() => setAnimate(true));
155
+ requestAnimationFrame(() => {
156
+ requestAnimationFrame(() => setAnimate(true));
157
+ });
156
158
  }
157
159
  }, [dataKey]);
158
160
  return animate || prefersReducedMotion();
@@ -268,31 +270,18 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
268
270
  ),
269
271
  [entries, count, chartW, chartH, maxVal]
270
272
  );
271
- const lineRefs = import_react.default.useRef([]);
272
273
  const clipRef = import_react.default.useRef(null);
273
274
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
274
275
  import_react.default.useEffect(() => {
275
- if (!animate) return;
276
- lineRefs.current.forEach((el) => {
277
- if (!el) return;
278
- const len = el.getTotalLength();
279
- el.style.strokeDasharray = `${len}`;
280
- el.style.strokeDashoffset = `${len}`;
281
- requestAnimationFrame(() => {
282
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
283
- el.style.strokeDashoffset = "0";
284
- });
276
+ if (!animate || !clipRef.current) return;
277
+ clipRef.current.setAttribute("width", "0");
278
+ requestAnimationFrame(() => {
279
+ if (clipRef.current) {
280
+ clipRef.current.style.transition = "width 1200ms ease-out 200ms";
281
+ clipRef.current.setAttribute("width", `${width}`);
282
+ }
285
283
  });
286
- if (clipRef.current) {
287
- clipRef.current.setAttribute("width", "0");
288
- requestAnimationFrame(() => {
289
- if (clipRef.current) {
290
- clipRef.current.style.transition = "width 1200ms ease-out 200ms";
291
- clipRef.current.setAttribute("width", `${width}`);
292
- }
293
- });
294
- }
295
- }, [animate, seriesPoints, width]);
284
+ }, [animate, width]);
296
285
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
297
286
  const lineClipId = "line-area-clip";
298
287
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -344,26 +333,10 @@ var LineChart = import_react.default.memo(({ data, labels, width, height, animat
344
333
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
345
334
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
346
335
  ] }) }),
347
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
348
- "path",
349
- {
350
- d: areaD,
351
- fill: `url(#${gradientId})`,
352
- clipPath: animate ? `url(#${lineClipId})` : void 0
353
- }
354
- ),
355
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
356
- "polyline",
357
- {
358
- ref: (el) => {
359
- lineRefs.current[di] = el;
360
- },
361
- points: polyPoints,
362
- fill: "none",
363
- stroke: color,
364
- strokeWidth: "2"
365
- }
366
- ),
336
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
337
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
338
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
339
+ ] }),
367
340
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
368
341
  "circle",
369
342
  {
@@ -421,31 +394,18 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
421
394
  ),
422
395
  [entries, count, chartW, chartH, maxVal]
423
396
  );
424
- const lineRefs = import_react.default.useRef([]);
425
397
  const curveClipRef = import_react.default.useRef(null);
426
398
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
427
399
  import_react.default.useEffect(() => {
428
- if (!animate) return;
429
- lineRefs.current.forEach((el) => {
430
- if (!el) return;
431
- const len = el.getTotalLength();
432
- el.style.strokeDasharray = `${len}`;
433
- el.style.strokeDashoffset = `${len}`;
434
- requestAnimationFrame(() => {
435
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
436
- el.style.strokeDashoffset = "0";
437
- });
400
+ if (!animate || !curveClipRef.current) return;
401
+ curveClipRef.current.setAttribute("width", "0");
402
+ requestAnimationFrame(() => {
403
+ if (curveClipRef.current) {
404
+ curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
405
+ curveClipRef.current.setAttribute("width", `${width}`);
406
+ }
438
407
  });
439
- if (curveClipRef.current) {
440
- curveClipRef.current.setAttribute("width", "0");
441
- requestAnimationFrame(() => {
442
- if (curveClipRef.current) {
443
- curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
444
- curveClipRef.current.setAttribute("width", `${width}`);
445
- }
446
- });
447
- }
448
- }, [animate, seriesPoints, width]);
408
+ }, [animate, width]);
449
409
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
450
410
  const curveClipId = "curve-area-clip";
451
411
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -497,26 +457,10 @@ var CurveChart = import_react.default.memo(({ data, labels, width, height, anima
497
457
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
498
458
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
499
459
  ] }) }),
500
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
501
- "path",
502
- {
503
- d: areaPath,
504
- fill: `url(#${gradientId})`,
505
- clipPath: animate ? `url(#${curveClipId})` : void 0
506
- }
507
- ),
508
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
509
- "path",
510
- {
511
- ref: (el) => {
512
- lineRefs.current[di] = el;
513
- },
514
- d: linePath,
515
- fill: "none",
516
- stroke: color,
517
- strokeWidth: "2"
518
- }
519
- ),
460
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
461
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
462
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
463
+ ] }),
520
464
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
521
465
  "circle",
522
466
  {
package/dist/components/Chart/index.js CHANGED
@@ -116,7 +116,9 @@ var useChartAnimation = (containerRef, dataKey) => {
116
116
  prevDataKey.current = dataKey;
117
117
  if (prefersReducedMotion()) return;
118
118
  setAnimate(false);
119
- requestAnimationFrame(() => setAnimate(true));
119
+ requestAnimationFrame(() => {
120
+ requestAnimationFrame(() => setAnimate(true));
121
+ });
120
122
  }
121
123
  }, [dataKey]);
122
124
  return animate || prefersReducedMotion();
@@ -232,31 +234,18 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
232
234
  ),
233
235
  [entries, count, chartW, chartH, maxVal]
234
236
  );
235
- const lineRefs = React.useRef([]);
236
237
  const clipRef = React.useRef(null);
237
238
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
238
239
  React.useEffect(() => {
239
- if (!animate) return;
240
- lineRefs.current.forEach((el) => {
241
- if (!el) return;
242
- const len = el.getTotalLength();
243
- el.style.strokeDasharray = `${len}`;
244
- el.style.strokeDashoffset = `${len}`;
245
- requestAnimationFrame(() => {
246
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
247
- el.style.strokeDashoffset = "0";
248
- });
240
+ if (!animate || !clipRef.current) return;
241
+ clipRef.current.setAttribute("width", "0");
242
+ requestAnimationFrame(() => {
243
+ if (clipRef.current) {
244
+ clipRef.current.style.transition = "width 1200ms ease-out 200ms";
245
+ clipRef.current.setAttribute("width", `${width}`);
246
+ }
249
247
  });
250
- if (clipRef.current) {
251
- clipRef.current.setAttribute("width", "0");
252
- requestAnimationFrame(() => {
253
- if (clipRef.current) {
254
- clipRef.current.style.transition = "width 1200ms ease-out 200ms";
255
- clipRef.current.setAttribute("width", `${width}`);
256
- }
257
- });
258
- }
259
- }, [animate, seriesPoints, width]);
248
+ }, [animate, width]);
260
249
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
261
250
  const lineClipId = "line-area-clip";
262
251
  return /* @__PURE__ */ jsxs(
@@ -308,26 +297,10 @@ var LineChart = React.memo(({ data, labels, width, height, animate, onHover, onM
308
297
  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
309
298
  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
310
299
  ] }) }),
311
- /* @__PURE__ */ jsx(
312
- "path",
313
- {
314
- d: areaD,
315
- fill: `url(#${gradientId})`,
316
- clipPath: animate ? `url(#${lineClipId})` : void 0
317
- }
318
- ),
319
- /* @__PURE__ */ jsx(
320
- "polyline",
321
- {
322
- ref: (el) => {
323
- lineRefs.current[di] = el;
324
- },
325
- points: polyPoints,
326
- fill: "none",
327
- stroke: color,
328
- strokeWidth: "2"
329
- }
330
- ),
300
+ /* @__PURE__ */ jsxs("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
301
+ /* @__PURE__ */ jsx("path", { d: areaD, fill: `url(#${gradientId})` }),
302
+ /* @__PURE__ */ jsx("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
303
+ ] }),
331
304
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx(
332
305
  "circle",
333
306
  {
@@ -385,31 +358,18 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
385
358
  ),
386
359
  [entries, count, chartW, chartH, maxVal]
387
360
  );
388
- const lineRefs = React.useRef([]);
389
361
  const curveClipRef = React.useRef(null);
390
362
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
391
363
  React.useEffect(() => {
392
- if (!animate) return;
393
- lineRefs.current.forEach((el) => {
394
- if (!el) return;
395
- const len = el.getTotalLength();
396
- el.style.strokeDasharray = `${len}`;
397
- el.style.strokeDashoffset = `${len}`;
398
- requestAnimationFrame(() => {
399
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
400
- el.style.strokeDashoffset = "0";
401
- });
364
+ if (!animate || !curveClipRef.current) return;
365
+ curveClipRef.current.setAttribute("width", "0");
366
+ requestAnimationFrame(() => {
367
+ if (curveClipRef.current) {
368
+ curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
369
+ curveClipRef.current.setAttribute("width", `${width}`);
370
+ }
402
371
  });
403
- if (curveClipRef.current) {
404
- curveClipRef.current.setAttribute("width", "0");
405
- requestAnimationFrame(() => {
406
- if (curveClipRef.current) {
407
- curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
408
- curveClipRef.current.setAttribute("width", `${width}`);
409
- }
410
- });
411
- }
412
- }, [animate, seriesPoints, width]);
372
+ }, [animate, width]);
413
373
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
414
374
  const curveClipId = "curve-area-clip";
415
375
  return /* @__PURE__ */ jsxs(
@@ -461,26 +421,10 @@ var CurveChart = React.memo(({ data, labels, width, height, animate, onHover, on
461
421
  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
462
422
  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
463
423
  ] }) }),
464
- /* @__PURE__ */ jsx(
465
- "path",
466
- {
467
- d: areaPath,
468
- fill: `url(#${gradientId})`,
469
- clipPath: animate ? `url(#${curveClipId})` : void 0
470
- }
471
- ),
472
- /* @__PURE__ */ jsx(
473
- "path",
474
- {
475
- ref: (el) => {
476
- lineRefs.current[di] = el;
477
- },
478
- d: linePath,
479
- fill: "none",
480
- stroke: color,
481
- strokeWidth: "2"
482
- }
483
- ),
424
+ /* @__PURE__ */ jsxs("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
425
+ /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})` }),
426
+ /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
427
+ ] }),
484
428
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx(
485
429
  "circle",
486
430
  {
package/dist/components/index.cjs CHANGED
@@ -2346,7 +2346,9 @@ var useChartAnimation = (containerRef, dataKey) => {
2346
2346
  prevDataKey.current = dataKey;
2347
2347
  if (prefersReducedMotion()) return;
2348
2348
  setAnimate(false);
2349
- requestAnimationFrame(() => setAnimate(true));
2349
+ requestAnimationFrame(() => {
2350
+ requestAnimationFrame(() => setAnimate(true));
2351
+ });
2350
2352
  }
2351
2353
  }, [dataKey]);
2352
2354
  return animate || prefersReducedMotion();
@@ -2462,31 +2464,18 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
2462
2464
  ),
2463
2465
  [entries, count, chartW, chartH, maxVal]
2464
2466
  );
2465
- const lineRefs = import_react6.default.useRef([]);
2466
2467
  const clipRef = import_react6.default.useRef(null);
2467
2468
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
2468
2469
  import_react6.default.useEffect(() => {
2469
- if (!animate) return;
2470
- lineRefs.current.forEach((el) => {
2471
- if (!el) return;
2472
- const len = el.getTotalLength();
2473
- el.style.strokeDasharray = `${len}`;
2474
- el.style.strokeDashoffset = `${len}`;
2475
- requestAnimationFrame(() => {
2476
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
2477
- el.style.strokeDashoffset = "0";
2478
- });
2470
+ if (!animate || !clipRef.current) return;
2471
+ clipRef.current.setAttribute("width", "0");
2472
+ requestAnimationFrame(() => {
2473
+ if (clipRef.current) {
2474
+ clipRef.current.style.transition = "width 1200ms ease-out 200ms";
2475
+ clipRef.current.setAttribute("width", `${width}`);
2476
+ }
2479
2477
  });
2480
- if (clipRef.current) {
2481
- clipRef.current.setAttribute("width", "0");
2482
- requestAnimationFrame(() => {
2483
- if (clipRef.current) {
2484
- clipRef.current.style.transition = "width 1200ms ease-out 200ms";
2485
- clipRef.current.setAttribute("width", `${width}`);
2486
- }
2487
- });
2488
- }
2489
- }, [animate, seriesPoints, width]);
2478
+ }, [animate, width]);
2490
2479
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
2491
2480
  const lineClipId = "line-area-clip";
2492
2481
  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
@@ -2538,26 +2527,10 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
2538
2527
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
2539
2528
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
2540
2529
  ] }) }),
2541
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
2542
- "path",
2543
- {
2544
- d: areaD,
2545
- fill: `url(#${gradientId})`,
2546
- clipPath: animate ? `url(#${lineClipId})` : void 0
2547
- }
2548
- ),
2549
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
2550
- "polyline",
2551
- {
2552
- ref: (el) => {
2553
- lineRefs.current[di] = el;
2554
- },
2555
- points: polyPoints,
2556
- fill: "none",
2557
- stroke: color,
2558
- strokeWidth: "2"
2559
- }
2560
- ),
2530
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
2531
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
2532
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
2533
+ ] }),
2561
2534
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
2562
2535
  "circle",
2563
2536
  {
@@ -2615,31 +2588,18 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
2615
2588
  ),
2616
2589
  [entries, count, chartW, chartH, maxVal]
2617
2590
  );
2618
- const lineRefs = import_react6.default.useRef([]);
2619
2591
  const curveClipRef = import_react6.default.useRef(null);
2620
2592
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
2621
2593
  import_react6.default.useEffect(() => {
2622
- if (!animate) return;
2623
- lineRefs.current.forEach((el) => {
2624
- if (!el) return;
2625
- const len = el.getTotalLength();
2626
- el.style.strokeDasharray = `${len}`;
2627
- el.style.strokeDashoffset = `${len}`;
2628
- requestAnimationFrame(() => {
2629
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
2630
- el.style.strokeDashoffset = "0";
2631
- });
2594
+ if (!animate || !curveClipRef.current) return;
2595
+ curveClipRef.current.setAttribute("width", "0");
2596
+ requestAnimationFrame(() => {
2597
+ if (curveClipRef.current) {
2598
+ curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
2599
+ curveClipRef.current.setAttribute("width", `${width}`);
2600
+ }
2632
2601
  });
2633
- if (curveClipRef.current) {
2634
- curveClipRef.current.setAttribute("width", "0");
2635
- requestAnimationFrame(() => {
2636
- if (curveClipRef.current) {
2637
- curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
2638
- curveClipRef.current.setAttribute("width", `${width}`);
2639
- }
2640
- });
2641
- }
2642
- }, [animate, seriesPoints, width]);
2602
+ }, [animate, width]);
2643
2603
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
2644
2604
  const curveClipId = "curve-area-clip";
2645
2605
  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
@@ -2691,26 +2651,10 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
2691
2651
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
2692
2652
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
2693
2653
  ] }) }),
2694
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
2695
- "path",
2696
- {
2697
- d: areaPath,
2698
- fill: `url(#${gradientId})`,
2699
- clipPath: animate ? `url(#${curveClipId})` : void 0
2700
- }
2701
- ),
2702
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
2703
- "path",
2704
- {
2705
- ref: (el) => {
2706
- lineRefs.current[di] = el;
2707
- },
2708
- d: linePath,
2709
- fill: "none",
2710
- stroke: color,
2711
- strokeWidth: "2"
2712
- }
2713
- ),
2654
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
2655
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
2656
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
2657
+ ] }),
2714
2658
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
2715
2659
  "circle",
2716
2660
  {
package/dist/components/index.js CHANGED
@@ -2256,7 +2256,9 @@ var useChartAnimation = (containerRef, dataKey) => {
2256
2256
  prevDataKey.current = dataKey;
2257
2257
  if (prefersReducedMotion()) return;
2258
2258
  setAnimate(false);
2259
- requestAnimationFrame(() => setAnimate(true));
2259
+ requestAnimationFrame(() => {
2260
+ requestAnimationFrame(() => setAnimate(true));
2261
+ });
2260
2262
  }
2261
2263
  }, [dataKey]);
2262
2264
  return animate || prefersReducedMotion();
@@ -2372,31 +2374,18 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
2372
2374
  ),
2373
2375
  [entries, count, chartW, chartH, maxVal]
2374
2376
  );
2375
- const lineRefs = React6.useRef([]);
2376
2377
  const clipRef = React6.useRef(null);
2377
2378
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
2378
2379
  React6.useEffect(() => {
2379
- if (!animate) return;
2380
- lineRefs.current.forEach((el) => {
2381
- if (!el) return;
2382
- const len = el.getTotalLength();
2383
- el.style.strokeDasharray = `${len}`;
2384
- el.style.strokeDashoffset = `${len}`;
2385
- requestAnimationFrame(() => {
2386
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
2387
- el.style.strokeDashoffset = "0";
2388
- });
2380
+ if (!animate || !clipRef.current) return;
2381
+ clipRef.current.setAttribute("width", "0");
2382
+ requestAnimationFrame(() => {
2383
+ if (clipRef.current) {
2384
+ clipRef.current.style.transition = "width 1200ms ease-out 200ms";
2385
+ clipRef.current.setAttribute("width", `${width}`);
2386
+ }
2389
2387
  });
2390
- if (clipRef.current) {
2391
- clipRef.current.setAttribute("width", "0");
2392
- requestAnimationFrame(() => {
2393
- if (clipRef.current) {
2394
- clipRef.current.style.transition = "width 1200ms ease-out 200ms";
2395
- clipRef.current.setAttribute("width", `${width}`);
2396
- }
2397
- });
2398
- }
2399
- }, [animate, seriesPoints, width]);
2388
+ }, [animate, width]);
2400
2389
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
2401
2390
  const lineClipId = "line-area-clip";
2402
2391
  return /* @__PURE__ */ jsxs197(
@@ -2448,26 +2437,10 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
2448
2437
  /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
2449
2438
  /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
2450
2439
  ] }) }),
2451
- /* @__PURE__ */ jsx307(
2452
- "path",
2453
- {
2454
- d: areaD,
2455
- fill: `url(#${gradientId})`,
2456
- clipPath: animate ? `url(#${lineClipId})` : void 0
2457
- }
2458
- ),
2459
- /* @__PURE__ */ jsx307(
2460
- "polyline",
2461
- {
2462
- ref: (el) => {
2463
- lineRefs.current[di] = el;
2464
- },
2465
- points: polyPoints,
2466
- fill: "none",
2467
- stroke: color,
2468
- strokeWidth: "2"
2469
- }
2470
- ),
2440
+ /* @__PURE__ */ jsxs197("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
2441
+ /* @__PURE__ */ jsx307("path", { d: areaD, fill: `url(#${gradientId})` }),
2442
+ /* @__PURE__ */ jsx307("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
2443
+ ] }),
2471
2444
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx307(
2472
2445
  "circle",
2473
2446
  {
@@ -2525,31 +2498,18 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
2525
2498
  ),
2526
2499
  [entries, count, chartW, chartH, maxVal]
2527
2500
  );
2528
- const lineRefs = React6.useRef([]);
2529
2501
  const curveClipRef = React6.useRef(null);
2530
2502
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
2531
2503
  React6.useEffect(() => {
2532
- if (!animate) return;
2533
- lineRefs.current.forEach((el) => {
2534
- if (!el) return;
2535
- const len = el.getTotalLength();
2536
- el.style.strokeDasharray = `${len}`;
2537
- el.style.strokeDashoffset = `${len}`;
2538
- requestAnimationFrame(() => {
2539
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
2540
- el.style.strokeDashoffset = "0";
2541
- });
2504
+ if (!animate || !curveClipRef.current) return;
2505
+ curveClipRef.current.setAttribute("width", "0");
2506
+ requestAnimationFrame(() => {
2507
+ if (curveClipRef.current) {
2508
+ curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
2509
+ curveClipRef.current.setAttribute("width", `${width}`);
2510
+ }
2542
2511
  });
2543
- if (curveClipRef.current) {
2544
- curveClipRef.current.setAttribute("width", "0");
2545
- requestAnimationFrame(() => {
2546
- if (curveClipRef.current) {
2547
- curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
2548
- curveClipRef.current.setAttribute("width", `${width}`);
2549
- }
2550
- });
2551
- }
2552
- }, [animate, seriesPoints, width]);
2512
+ }, [animate, width]);
2553
2513
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
2554
2514
  const curveClipId = "curve-area-clip";
2555
2515
  return /* @__PURE__ */ jsxs197(
@@ -2601,26 +2561,10 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
2601
2561
  /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
2602
2562
  /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
2603
2563
  ] }) }),
2604
- /* @__PURE__ */ jsx307(
2605
- "path",
2606
- {
2607
- d: areaPath,
2608
- fill: `url(#${gradientId})`,
2609
- clipPath: animate ? `url(#${curveClipId})` : void 0
2610
- }
2611
- ),
2612
- /* @__PURE__ */ jsx307(
2613
- "path",
2614
- {
2615
- ref: (el) => {
2616
- lineRefs.current[di] = el;
2617
- },
2618
- d: linePath,
2619
- fill: "none",
2620
- stroke: color,
2621
- strokeWidth: "2"
2622
- }
2623
- ),
2564
+ /* @__PURE__ */ jsxs197("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
2565
+ /* @__PURE__ */ jsx307("path", { d: areaPath, fill: `url(#${gradientId})` }),
2566
+ /* @__PURE__ */ jsx307("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
2567
+ ] }),
2624
2568
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx307(
2625
2569
  "circle",
2626
2570
  {
package/dist/index.cjs CHANGED
@@ -6745,7 +6745,9 @@ var useChartAnimation = (containerRef, dataKey) => {
6745
6745
  prevDataKey.current = dataKey;
6746
6746
  if (prefersReducedMotion()) return;
6747
6747
  setAnimate(false);
6748
- requestAnimationFrame(() => setAnimate(true));
6748
+ requestAnimationFrame(() => {
6749
+ requestAnimationFrame(() => setAnimate(true));
6750
+ });
6749
6751
  }
6750
6752
  }, [dataKey]);
6751
6753
  return animate || prefersReducedMotion();
@@ -6861,31 +6863,18 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
6861
6863
  ),
6862
6864
  [entries, count, chartW, chartH, maxVal]
6863
6865
  );
6864
- const lineRefs = import_react6.default.useRef([]);
6865
6866
  const clipRef = import_react6.default.useRef(null);
6866
6867
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
6867
6868
  import_react6.default.useEffect(() => {
6868
- if (!animate) return;
6869
- lineRefs.current.forEach((el) => {
6870
- if (!el) return;
6871
- const len = el.getTotalLength();
6872
- el.style.strokeDasharray = `${len}`;
6873
- el.style.strokeDashoffset = `${len}`;
6874
- requestAnimationFrame(() => {
6875
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
6876
- el.style.strokeDashoffset = "0";
6877
- });
6869
+ if (!animate || !clipRef.current) return;
6870
+ clipRef.current.setAttribute("width", "0");
6871
+ requestAnimationFrame(() => {
6872
+ if (clipRef.current) {
6873
+ clipRef.current.style.transition = "width 1200ms ease-out 200ms";
6874
+ clipRef.current.setAttribute("width", `${width}`);
6875
+ }
6878
6876
  });
6879
- if (clipRef.current) {
6880
- clipRef.current.setAttribute("width", "0");
6881
- requestAnimationFrame(() => {
6882
- if (clipRef.current) {
6883
- clipRef.current.style.transition = "width 1200ms ease-out 200ms";
6884
- clipRef.current.setAttribute("width", `${width}`);
6885
- }
6886
- });
6887
- }
6888
- }, [animate, seriesPoints, width]);
6877
+ }, [animate, width]);
6889
6878
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
6890
6879
  const lineClipId = "line-area-clip";
6891
6880
  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
@@ -6937,26 +6926,10 @@ var LineChart = import_react6.default.memo(({ data, labels, width, height, anima
6937
6926
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
6938
6927
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
6939
6928
  ] }) }),
6940
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
6941
- "path",
6942
- {
6943
- d: areaD,
6944
- fill: `url(#${gradientId})`,
6945
- clipPath: animate ? `url(#${lineClipId})` : void 0
6946
- }
6947
- ),
6948
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
6949
- "polyline",
6950
- {
6951
- ref: (el) => {
6952
- lineRefs.current[di] = el;
6953
- },
6954
- points: polyPoints,
6955
- fill: "none",
6956
- stroke: color,
6957
- strokeWidth: "2"
6958
- }
6959
- ),
6929
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
6930
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: areaD, fill: `url(#${gradientId})` }),
6931
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
6932
+ ] }),
6960
6933
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
6961
6934
  "circle",
6962
6935
  {
@@ -7014,31 +6987,18 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
7014
6987
  ),
7015
6988
  [entries, count, chartW, chartH, maxVal]
7016
6989
  );
7017
- const lineRefs = import_react6.default.useRef([]);
7018
6990
  const curveClipRef = import_react6.default.useRef(null);
7019
6991
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
7020
6992
  import_react6.default.useEffect(() => {
7021
- if (!animate) return;
7022
- lineRefs.current.forEach((el) => {
7023
- if (!el) return;
7024
- const len = el.getTotalLength();
7025
- el.style.strokeDasharray = `${len}`;
7026
- el.style.strokeDashoffset = `${len}`;
7027
- requestAnimationFrame(() => {
7028
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
7029
- el.style.strokeDashoffset = "0";
7030
- });
6993
+ if (!animate || !curveClipRef.current) return;
6994
+ curveClipRef.current.setAttribute("width", "0");
6995
+ requestAnimationFrame(() => {
6996
+ if (curveClipRef.current) {
6997
+ curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
6998
+ curveClipRef.current.setAttribute("width", `${width}`);
6999
+ }
7031
7000
  });
7032
- if (curveClipRef.current) {
7033
- curveClipRef.current.setAttribute("width", "0");
7034
- requestAnimationFrame(() => {
7035
- if (curveClipRef.current) {
7036
- curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
7037
- curveClipRef.current.setAttribute("width", `${width}`);
7038
- }
7039
- });
7040
- }
7041
- }, [animate, seriesPoints, width]);
7001
+ }, [animate, width]);
7042
7002
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
7043
7003
  const curveClipId = "curve-area-clip";
7044
7004
  return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
@@ -7090,26 +7050,10 @@ var CurveChart = import_react6.default.memo(({ data, labels, width, height, anim
7090
7050
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
7091
7051
  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
7092
7052
  ] }) }),
7093
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
7094
- "path",
7095
- {
7096
- d: areaPath,
7097
- fill: `url(#${gradientId})`,
7098
- clipPath: animate ? `url(#${curveClipId})` : void 0
7099
- }
7100
- ),
7101
- /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
7102
- "path",
7103
- {
7104
- ref: (el) => {
7105
- lineRefs.current[di] = el;
7106
- },
7107
- d: linePath,
7108
- fill: "none",
7109
- stroke: color,
7110
- strokeWidth: "2"
7111
- }
7112
- ),
7053
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
7054
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: areaPath, fill: `url(#${gradientId})` }),
7055
+ /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
7056
+ ] }),
7113
7057
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
7114
7058
  "circle",
7115
7059
  {
package/dist/index.js CHANGED
@@ -6346,7 +6346,9 @@ var useChartAnimation = (containerRef, dataKey) => {
6346
6346
  prevDataKey.current = dataKey;
6347
6347
  if (prefersReducedMotion()) return;
6348
6348
  setAnimate(false);
6349
- requestAnimationFrame(() => setAnimate(true));
6349
+ requestAnimationFrame(() => {
6350
+ requestAnimationFrame(() => setAnimate(true));
6351
+ });
6350
6352
  }
6351
6353
  }, [dataKey]);
6352
6354
  return animate || prefersReducedMotion();
@@ -6462,31 +6464,18 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
6462
6464
  ),
6463
6465
  [entries, count, chartW, chartH, maxVal]
6464
6466
  );
6465
- const lineRefs = React6.useRef([]);
6466
6467
  const clipRef = React6.useRef(null);
6467
6468
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
6468
6469
  React6.useEffect(() => {
6469
- if (!animate) return;
6470
- lineRefs.current.forEach((el) => {
6471
- if (!el) return;
6472
- const len = el.getTotalLength();
6473
- el.style.strokeDasharray = `${len}`;
6474
- el.style.strokeDashoffset = `${len}`;
6475
- requestAnimationFrame(() => {
6476
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
6477
- el.style.strokeDashoffset = "0";
6478
- });
6470
+ if (!animate || !clipRef.current) return;
6471
+ clipRef.current.setAttribute("width", "0");
6472
+ requestAnimationFrame(() => {
6473
+ if (clipRef.current) {
6474
+ clipRef.current.style.transition = "width 1200ms ease-out 200ms";
6475
+ clipRef.current.setAttribute("width", `${width}`);
6476
+ }
6479
6477
  });
6480
- if (clipRef.current) {
6481
- clipRef.current.setAttribute("width", "0");
6482
- requestAnimationFrame(() => {
6483
- if (clipRef.current) {
6484
- clipRef.current.style.transition = "width 1200ms ease-out 200ms";
6485
- clipRef.current.setAttribute("width", `${width}`);
6486
- }
6487
- });
6488
- }
6489
- }, [animate, seriesPoints, width]);
6478
+ }, [animate, width]);
6490
6479
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
6491
6480
  const lineClipId = "line-area-clip";
6492
6481
  return /* @__PURE__ */ jsxs197(
@@ -6538,26 +6527,10 @@ var LineChart = React6.memo(({ data, labels, width, height, animate, onHover, on
6538
6527
  /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.2" }),
6539
6528
  /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
6540
6529
  ] }) }),
6541
- /* @__PURE__ */ jsx307(
6542
- "path",
6543
- {
6544
- d: areaD,
6545
- fill: `url(#${gradientId})`,
6546
- clipPath: animate ? `url(#${lineClipId})` : void 0
6547
- }
6548
- ),
6549
- /* @__PURE__ */ jsx307(
6550
- "polyline",
6551
- {
6552
- ref: (el) => {
6553
- lineRefs.current[di] = el;
6554
- },
6555
- points: polyPoints,
6556
- fill: "none",
6557
- stroke: color,
6558
- strokeWidth: "2"
6559
- }
6560
- ),
6530
+ /* @__PURE__ */ jsxs197("g", { clipPath: animate ? `url(#${lineClipId})` : void 0, children: [
6531
+ /* @__PURE__ */ jsx307("path", { d: areaD, fill: `url(#${gradientId})` }),
6532
+ /* @__PURE__ */ jsx307("polyline", { points: polyPoints, fill: "none", stroke: color, strokeWidth: "2" })
6533
+ ] }),
6561
6534
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx307(
6562
6535
  "circle",
6563
6536
  {
@@ -6615,31 +6588,18 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
6615
6588
  ),
6616
6589
  [entries, count, chartW, chartH, maxVal]
6617
6590
  );
6618
- const lineRefs = React6.useRef([]);
6619
6591
  const curveClipRef = React6.useRef(null);
6620
6592
  const { activeIndex, handleMouseMove, handleMouseLeave, getTooltipAt } = useCrosshair(seriesPoints, entries, labels, chartH);
6621
6593
  React6.useEffect(() => {
6622
- if (!animate) return;
6623
- lineRefs.current.forEach((el) => {
6624
- if (!el) return;
6625
- const len = el.getTotalLength();
6626
- el.style.strokeDasharray = `${len}`;
6627
- el.style.strokeDashoffset = `${len}`;
6628
- requestAnimationFrame(() => {
6629
- el.style.transition = "stroke-dashoffset 1200ms ease-out 200ms";
6630
- el.style.strokeDashoffset = "0";
6631
- });
6594
+ if (!animate || !curveClipRef.current) return;
6595
+ curveClipRef.current.setAttribute("width", "0");
6596
+ requestAnimationFrame(() => {
6597
+ if (curveClipRef.current) {
6598
+ curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
6599
+ curveClipRef.current.setAttribute("width", `${width}`);
6600
+ }
6632
6601
  });
6633
- if (curveClipRef.current) {
6634
- curveClipRef.current.setAttribute("width", "0");
6635
- requestAnimationFrame(() => {
6636
- if (curveClipRef.current) {
6637
- curveClipRef.current.style.transition = "width 1200ms ease-out 200ms";
6638
- curveClipRef.current.setAttribute("width", `${width}`);
6639
- }
6640
- });
6641
- }
6642
- }, [animate, seriesPoints, width]);
6602
+ }, [animate, width]);
6643
6603
  const activeX = activeIndex !== null ? seriesPoints[0]?.[activeIndex]?.x ?? null : null;
6644
6604
  const curveClipId = "curve-area-clip";
6645
6605
  return /* @__PURE__ */ jsxs197(
@@ -6691,26 +6651,10 @@ var CurveChart = React6.memo(({ data, labels, width, height, animate, onHover, o
6691
6651
  /* @__PURE__ */ jsx307("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.4" }),
6692
6652
  /* @__PURE__ */ jsx307("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0.02" })
6693
6653
  ] }) }),
6694
- /* @__PURE__ */ jsx307(
6695
- "path",
6696
- {
6697
- d: areaPath,
6698
- fill: `url(#${gradientId})`,
6699
- clipPath: animate ? `url(#${curveClipId})` : void 0
6700
- }
6701
- ),
6702
- /* @__PURE__ */ jsx307(
6703
- "path",
6704
- {
6705
- ref: (el) => {
6706
- lineRefs.current[di] = el;
6707
- },
6708
- d: linePath,
6709
- fill: "none",
6710
- stroke: color,
6711
- strokeWidth: "2"
6712
- }
6713
- ),
6654
+ /* @__PURE__ */ jsxs197("g", { clipPath: animate ? `url(#${curveClipId})` : void 0, children: [
6655
+ /* @__PURE__ */ jsx307("path", { d: areaPath, fill: `url(#${gradientId})` }),
6656
+ /* @__PURE__ */ jsx307("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2" })
6657
+ ] }),
6714
6658
  activeIndex !== null && points[activeIndex] && /* @__PURE__ */ jsx307(
6715
6659
  "circle",
6716
6660
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.33",
3
+ "version": "0.5.34",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",