@toankhontech/arctimer-react 0.0.0

package/dist/index.cjs

@@ -0,0 +1,213 @@
+'use strict';
+
+var react = require('react');
+var arctimerCore = require('@toankhontech/arctimer-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/CountdownCircleTimer.tsx
+var CountdownCircleTimer = react.forwardRef((props, ref) => {
+  const {
+    children,
+    trailColor = "#d9d9d9",
+    trailStrokeWidth,
+    strokeLinecap = "round",
+    style,
+    className,
+    size = 180,
+    strokeWidth = 12,
+    ...restProps
+  } = props;
+  const countdown = arctimerCore.useCountdown({
+    ...restProps,
+    size,
+    strokeWidth
+  });
+  const {
+    path,
+    pathLength,
+    stroke,
+    strokeDashoffset,
+    remainingTime,
+    elapsedTime,
+    progress,
+    color,
+    isComplete,
+    animationScale,
+    animationOpacity,
+    _play,
+    _pause,
+    _reset,
+    _getState
+  } = countdown;
+  react.useImperativeHandle(ref, () => ({
+    play: _play,
+    pause: _pause,
+    reset: _reset,
+    getState: _getState
+  }), [_play, _pause, _reset, _getState]);
+  const effectiveTrailStrokeWidth = trailStrokeWidth ?? strokeWidth;
+  const viewBox = `0 0 ${size} ${size}`;
+  const renderInfo = react.useMemo(
+    () => ({
+      remainingTime,
+      elapsedTime,
+      color,
+      progress,
+      isComplete
+    }),
+    [remainingTime, elapsedTime, color, progress, isComplete]
+  );
+  const hasEffects = animationScale !== 1 || animationOpacity !== 1;
+  const svgTransform = hasEffects ? `scale(${animationScale})` : void 0;
+  const svgTransformOrigin = hasEffects ? "center" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        ...style
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            viewBox,
+            width: size,
+            height: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            style: {
+              transform: svgTransform,
+              transformOrigin: svgTransformOrigin,
+              opacity: animationOpacity
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: path,
+                  fill: "none",
+                  stroke: trailColor,
+                  strokeWidth: effectiveTrailStrokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: path,
+                  fill: "none",
+                  stroke,
+                  strokeLinecap,
+                  strokeWidth,
+                  strokeDasharray: pathLength,
+                  strokeDashoffset,
+                  style: {
+                    transition: "stroke 0.5s ease"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        typeof children === "function" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: children(renderInfo)
+          }
+        )
+      ]
+    }
+  );
+});
+CountdownCircleTimer.displayName = "CountdownCircleTimer";
+var TimerGroup = react.forwardRef(
+  (props, ref) => {
+    const {
+      mode = "sequential",
+      staggerDelay = 0,
+      isPlaying = false,
+      onGroupComplete,
+      onTimerComplete,
+      children
+    } = props;
+    const childArray = react.Children.toArray(children);
+    const timerCount = childArray.length;
+    const group = arctimerCore.useTimerGroup({
+      mode,
+      staggerDelay,
+      isPlaying,
+      timerCount,
+      onGroupComplete,
+      onTimerComplete
+    });
+    const { timers, playAll, pauseAll, resetAll } = group;
+    const handleTimerComplete = group._handleTimerComplete;
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        playAll,
+        pauseAll,
+        resetAll
+      }),
+      [playAll, pauseAll, resetAll]
+    );
+    const contextValue = react.useMemo(
+      () => ({
+        mode,
+        isTimerPlaying: (index) => timers[index]?.isPlaying ?? false,
+        onTimerDone: handleTimerComplete,
+        registerTimer: () => {
+        }
+      }),
+      [mode, timers, handleTimerComplete]
+    );
+    const enhancedChildren = childArray.map((child, index) => {
+      if (!react.isValidElement(child)) return child;
+      const timerState = timers[index];
+      return react.cloneElement(child, {
+        key: index,
+        isPlaying: timerState?.isPlaying ?? false,
+        onComplete: (elapsed) => {
+          handleTimerComplete(index);
+          const originalOnComplete = child.props?.onComplete;
+          return originalOnComplete?.(elapsed);
+        }
+      });
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(arctimerCore.TimerGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: enhancedChildren }) });
+  }
+);
+TimerGroup.displayName = "TimerGroup";
+
+Object.defineProperty(exports, "useAnnouncer", {
+  enumerable: true,
+  get: function () { return arctimerCore.useAnnouncer; }
+});
+Object.defineProperty(exports, "useCountdown", {
+  enumerable: true,
+  get: function () { return arctimerCore.useCountdown; }
+});
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () { return arctimerCore.useReducedMotion; }
+});
+Object.defineProperty(exports, "useTimerGroup", {
+  enumerable: true,
+  get: function () { return arctimerCore.useTimerGroup; }
+});
+exports.CountdownCircleTimer = CountdownCircleTimer;
+exports.TimerGroup = TimerGroup;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CountdownCircleTimer.tsx","../src/TimerGroup.tsx"],"names":["forwardRef","useCountdown","useImperativeHandle","useMemo","jsxs","jsx","Children","useTimerGroup","isValidElement","cloneElement","TimerGroupContext"],"mappings":"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","file":"index.cjs","sourcesContent":["import { forwardRef, useImperativeHandle, useMemo } from 'react'\nimport { useCountdown } from '@toankhontech/arctimer-core'\nimport type { CountdownProps, TimerRef, RenderInfo } from '@toankhontech/arctimer-core'\n\nexport interface CountdownCircleTimerProps extends CountdownProps {\n  style?: React.CSSProperties\n  className?: string\n}\n\nexport const CountdownCircleTimer = forwardRef<\n  TimerRef,\n  CountdownCircleTimerProps\n>((props, ref) => {\n  const {\n    children,\n    trailColor = '#d9d9d9',\n    trailStrokeWidth,\n    strokeLinecap = 'round',\n    style,\n    className,\n    size = 180,\n    strokeWidth = 12,\n    ...restProps\n  } = props\n\n  const countdown = useCountdown({\n    ...restProps,\n    size,\n    strokeWidth,\n  })\n\n  const {\n    path,\n    pathLength,\n    stroke,\n    strokeDashoffset,\n    remainingTime,\n    elapsedTime,\n    progress,\n    color,\n    isComplete,\n    animationScale,\n    animationOpacity,\n    _play,\n    _pause,\n    _reset,\n    _getState,\n  } = countdown\n\n  useImperativeHandle(ref, () => ({\n    play: _play,\n    pause: _pause,\n    reset: _reset,\n    getState: _getState,\n  }), [_play, _pause, _reset, _getState])\n\n  const effectiveTrailStrokeWidth = trailStrokeWidth ?? strokeWidth\n  const viewBox = `0 0 ${size} ${size}`\n\n  const renderInfo: RenderInfo = useMemo(\n    () => ({\n      remainingTime,\n      elapsedTime,\n      color,\n      progress,\n      isComplete,\n    }),\n    [remainingTime, elapsedTime, color, progress, isComplete]\n  )\n\n  // Apply animation effects (bounce/pulse)\n  const hasEffects = animationScale !== 1 || animationOpacity !== 1\n  const svgTransform = hasEffects\n    ? `scale(${animationScale})`\n    : undefined\n  const svgTransformOrigin = hasEffects ? 'center' : undefined\n\n  return (\n    <div\n      style={{\n        position: 'relative',\n        width: size,\n        height: size,\n        ...style,\n      }}\n      className={className}\n    >\n      <svg\n        viewBox={viewBox}\n        width={size}\n        height={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          transform: svgTransform,\n          transformOrigin: svgTransformOrigin,\n          opacity: animationOpacity,\n        }}\n      >\n        <path\n          d={path}\n          fill=\"none\"\n          stroke={trailColor}\n          strokeWidth={effectiveTrailStrokeWidth}\n        />\n        <path\n          d={path}\n          fill=\"none\"\n          stroke={stroke}\n          strokeLinecap={strokeLinecap}\n          strokeWidth={strokeWidth}\n          strokeDasharray={pathLength}\n          strokeDashoffset={strokeDashoffset}\n          style={{\n            transition: 'stroke 0.5s ease',\n          }}\n        />\n      </svg>\n      {typeof children === 'function' && (\n        <div\n          style={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          {children(renderInfo)}\n        </div>\n      )}\n    </div>\n  )\n})\n\nCountdownCircleTimer.displayName = 'CountdownCircleTimer'\n","import {\n  forwardRef,\n  useImperativeHandle,\n  Children,\n  cloneElement,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport {\n  useTimerGroup,\n  TimerGroupContext,\n  type TimerGroupProps,\n  type TimerGroupRef,\n} from '@toankhontech/arctimer-core'\n\nexport const TimerGroup = forwardRef<TimerGroupRef, TimerGroupProps>(\n  (props, ref) => {\n    const {\n      mode = 'sequential',\n      staggerDelay = 0,\n      isPlaying = false,\n      onGroupComplete,\n      onTimerComplete,\n      children,\n    } = props\n\n    const childArray = Children.toArray(children)\n    const timerCount = childArray.length\n\n    const group = useTimerGroup({\n      mode,\n      staggerDelay,\n      isPlaying,\n      timerCount,\n      onGroupComplete,\n      onTimerComplete,\n    })\n\n    const { timers, playAll, pauseAll, resetAll } = group\n    const handleTimerComplete = (group as any)._handleTimerComplete\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        playAll,\n        pauseAll,\n        resetAll,\n      }),\n      [playAll, pauseAll, resetAll]\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        mode,\n        isTimerPlaying: (index: number) =>\n          timers[index]?.isPlaying ?? false,\n        onTimerDone: handleTimerComplete,\n        registerTimer: () => {},\n      }),\n      [mode, timers, handleTimerComplete]\n    )\n\n    const enhancedChildren = childArray.map((child, index) => {\n      if (!isValidElement(child)) return child\n\n      const timerState = timers[index]\n      return cloneElement(child as React.ReactElement<any>, {\n        key: index,\n        isPlaying: timerState?.isPlaying ?? false,\n        onComplete: (elapsed: number) => {\n          handleTimerComplete(index)\n          const originalOnComplete = (child as any).props?.onComplete\n          return originalOnComplete?.(elapsed)\n        },\n      })\n    })\n\n    return (\n      <TimerGroupContext.Provider value={contextValue}>\n        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>\n          {enhancedChildren}\n        </div>\n      </TimerGroupContext.Provider>\n    )\n  }\n)\n\nTimerGroup.displayName = 'TimerGroup'\n"]}

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { CountdownProps, TimerRef, TimerGroupProps, TimerGroupRef } from '@toankhontech/arctimer-core';
+export { Color, ColorFormat, CountdownProps, EasingConfig, EasingName, OnCompleteResult, RenderInfo, Rotation, Theme, TimerGroupProps, TimerGroupRef, TimerRef, TimerStatus, UseCountdownReturn, UseTimerGroupReturn, useAnnouncer, useCountdown, useReducedMotion, useTimerGroup } from '@toankhontech/arctimer-core';
+
+interface CountdownCircleTimerProps extends CountdownProps {
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const CountdownCircleTimer: react.ForwardRefExoticComponent<CountdownCircleTimerProps & react.RefAttributes<TimerRef>>;
+
+declare const TimerGroup: react.ForwardRefExoticComponent<TimerGroupProps & react.RefAttributes<TimerGroupRef>>;
+
+export { CountdownCircleTimer, type CountdownCircleTimerProps, TimerGroup };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { CountdownProps, TimerRef, TimerGroupProps, TimerGroupRef } from '@toankhontech/arctimer-core';
+export { Color, ColorFormat, CountdownProps, EasingConfig, EasingName, OnCompleteResult, RenderInfo, Rotation, Theme, TimerGroupProps, TimerGroupRef, TimerRef, TimerStatus, UseCountdownReturn, UseTimerGroupReturn, useAnnouncer, useCountdown, useReducedMotion, useTimerGroup } from '@toankhontech/arctimer-core';
+
+interface CountdownCircleTimerProps extends CountdownProps {
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const CountdownCircleTimer: react.ForwardRefExoticComponent<CountdownCircleTimerProps & react.RefAttributes<TimerRef>>;
+
+declare const TimerGroup: react.ForwardRefExoticComponent<TimerGroupProps & react.RefAttributes<TimerGroupRef>>;
+
+export { CountdownCircleTimer, type CountdownCircleTimerProps, TimerGroup };

package/dist/index.js

@@ -0,0 +1,195 @@
+import { forwardRef, useImperativeHandle, useMemo, Children, isValidElement, cloneElement } from 'react';
+import { useCountdown, useTimerGroup, TimerGroupContext } from '@toankhontech/arctimer-core';
+export { useAnnouncer, useCountdown, useReducedMotion, useTimerGroup } from '@toankhontech/arctimer-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/CountdownCircleTimer.tsx
+var CountdownCircleTimer = forwardRef((props, ref) => {
+  const {
+    children,
+    trailColor = "#d9d9d9",
+    trailStrokeWidth,
+    strokeLinecap = "round",
+    style,
+    className,
+    size = 180,
+    strokeWidth = 12,
+    ...restProps
+  } = props;
+  const countdown = useCountdown({
+    ...restProps,
+    size,
+    strokeWidth
+  });
+  const {
+    path,
+    pathLength,
+    stroke,
+    strokeDashoffset,
+    remainingTime,
+    elapsedTime,
+    progress,
+    color,
+    isComplete,
+    animationScale,
+    animationOpacity,
+    _play,
+    _pause,
+    _reset,
+    _getState
+  } = countdown;
+  useImperativeHandle(ref, () => ({
+    play: _play,
+    pause: _pause,
+    reset: _reset,
+    getState: _getState
+  }), [_play, _pause, _reset, _getState]);
+  const effectiveTrailStrokeWidth = trailStrokeWidth ?? strokeWidth;
+  const viewBox = `0 0 ${size} ${size}`;
+  const renderInfo = useMemo(
+    () => ({
+      remainingTime,
+      elapsedTime,
+      color,
+      progress,
+      isComplete
+    }),
+    [remainingTime, elapsedTime, color, progress, isComplete]
+  );
+  const hasEffects = animationScale !== 1 || animationOpacity !== 1;
+  const svgTransform = hasEffects ? `scale(${animationScale})` : void 0;
+  const svgTransformOrigin = hasEffects ? "center" : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        ...style
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox,
+            width: size,
+            height: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            style: {
+              transform: svgTransform,
+              transformOrigin: svgTransformOrigin,
+              opacity: animationOpacity
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: path,
+                  fill: "none",
+                  stroke: trailColor,
+                  strokeWidth: effectiveTrailStrokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: path,
+                  fill: "none",
+                  stroke,
+                  strokeLinecap,
+                  strokeWidth,
+                  strokeDasharray: pathLength,
+                  strokeDashoffset,
+                  style: {
+                    transition: "stroke 0.5s ease"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        typeof children === "function" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: children(renderInfo)
+          }
+        )
+      ]
+    }
+  );
+});
+CountdownCircleTimer.displayName = "CountdownCircleTimer";
+var TimerGroup = forwardRef(
+  (props, ref) => {
+    const {
+      mode = "sequential",
+      staggerDelay = 0,
+      isPlaying = false,
+      onGroupComplete,
+      onTimerComplete,
+      children
+    } = props;
+    const childArray = Children.toArray(children);
+    const timerCount = childArray.length;
+    const group = useTimerGroup({
+      mode,
+      staggerDelay,
+      isPlaying,
+      timerCount,
+      onGroupComplete,
+      onTimerComplete
+    });
+    const { timers, playAll, pauseAll, resetAll } = group;
+    const handleTimerComplete = group._handleTimerComplete;
+    useImperativeHandle(
+      ref,
+      () => ({
+        playAll,
+        pauseAll,
+        resetAll
+      }),
+      [playAll, pauseAll, resetAll]
+    );
+    const contextValue = useMemo(
+      () => ({
+        mode,
+        isTimerPlaying: (index) => timers[index]?.isPlaying ?? false,
+        onTimerDone: handleTimerComplete,
+        registerTimer: () => {
+        }
+      }),
+      [mode, timers, handleTimerComplete]
+    );
+    const enhancedChildren = childArray.map((child, index) => {
+      if (!isValidElement(child)) return child;
+      const timerState = timers[index];
+      return cloneElement(child, {
+        key: index,
+        isPlaying: timerState?.isPlaying ?? false,
+        onComplete: (elapsed) => {
+          handleTimerComplete(index);
+          const originalOnComplete = child.props?.onComplete;
+          return originalOnComplete?.(elapsed);
+        }
+      });
+    });
+    return /* @__PURE__ */ jsx(TimerGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: enhancedChildren }) });
+  }
+);
+TimerGroup.displayName = "TimerGroup";
+
+export { CountdownCircleTimer, TimerGroup };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/CountdownCircleTimer.tsx","../src/TimerGroup.tsx"],"names":["forwardRef","useImperativeHandle","useMemo","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { forwardRef, useImperativeHandle, useMemo } from 'react'\nimport { useCountdown } from '@toankhontech/arctimer-core'\nimport type { CountdownProps, TimerRef, RenderInfo } from '@toankhontech/arctimer-core'\n\nexport interface CountdownCircleTimerProps extends CountdownProps {\n  style?: React.CSSProperties\n  className?: string\n}\n\nexport const CountdownCircleTimer = forwardRef<\n  TimerRef,\n  CountdownCircleTimerProps\n>((props, ref) => {\n  const {\n    children,\n    trailColor = '#d9d9d9',\n    trailStrokeWidth,\n    strokeLinecap = 'round',\n    style,\n    className,\n    size = 180,\n    strokeWidth = 12,\n    ...restProps\n  } = props\n\n  const countdown = useCountdown({\n    ...restProps,\n    size,\n    strokeWidth,\n  })\n\n  const {\n    path,\n    pathLength,\n    stroke,\n    strokeDashoffset,\n    remainingTime,\n    elapsedTime,\n    progress,\n    color,\n    isComplete,\n    animationScale,\n    animationOpacity,\n    _play,\n    _pause,\n    _reset,\n    _getState,\n  } = countdown\n\n  useImperativeHandle(ref, () => ({\n    play: _play,\n    pause: _pause,\n    reset: _reset,\n    getState: _getState,\n  }), [_play, _pause, _reset, _getState])\n\n  const effectiveTrailStrokeWidth = trailStrokeWidth ?? strokeWidth\n  const viewBox = `0 0 ${size} ${size}`\n\n  const renderInfo: RenderInfo = useMemo(\n    () => ({\n      remainingTime,\n      elapsedTime,\n      color,\n      progress,\n      isComplete,\n    }),\n    [remainingTime, elapsedTime, color, progress, isComplete]\n  )\n\n  // Apply animation effects (bounce/pulse)\n  const hasEffects = animationScale !== 1 || animationOpacity !== 1\n  const svgTransform = hasEffects\n    ? `scale(${animationScale})`\n    : undefined\n  const svgTransformOrigin = hasEffects ? 'center' : undefined\n\n  return (\n    <div\n      style={{\n        position: 'relative',\n        width: size,\n        height: size,\n        ...style,\n      }}\n      className={className}\n    >\n      <svg\n        viewBox={viewBox}\n        width={size}\n        height={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{\n          transform: svgTransform,\n          transformOrigin: svgTransformOrigin,\n          opacity: animationOpacity,\n        }}\n      >\n        <path\n          d={path}\n          fill=\"none\"\n          stroke={trailColor}\n          strokeWidth={effectiveTrailStrokeWidth}\n        />\n        <path\n          d={path}\n          fill=\"none\"\n          stroke={stroke}\n          strokeLinecap={strokeLinecap}\n          strokeWidth={strokeWidth}\n          strokeDasharray={pathLength}\n          strokeDashoffset={strokeDashoffset}\n          style={{\n            transition: 'stroke 0.5s ease',\n          }}\n        />\n      </svg>\n      {typeof children === 'function' && (\n        <div\n          style={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n        >\n          {children(renderInfo)}\n        </div>\n      )}\n    </div>\n  )\n})\n\nCountdownCircleTimer.displayName = 'CountdownCircleTimer'\n","import {\n  forwardRef,\n  useImperativeHandle,\n  Children,\n  cloneElement,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport {\n  useTimerGroup,\n  TimerGroupContext,\n  type TimerGroupProps,\n  type TimerGroupRef,\n} from '@toankhontech/arctimer-core'\n\nexport const TimerGroup = forwardRef<TimerGroupRef, TimerGroupProps>(\n  (props, ref) => {\n    const {\n      mode = 'sequential',\n      staggerDelay = 0,\n      isPlaying = false,\n      onGroupComplete,\n      onTimerComplete,\n      children,\n    } = props\n\n    const childArray = Children.toArray(children)\n    const timerCount = childArray.length\n\n    const group = useTimerGroup({\n      mode,\n      staggerDelay,\n      isPlaying,\n      timerCount,\n      onGroupComplete,\n      onTimerComplete,\n    })\n\n    const { timers, playAll, pauseAll, resetAll } = group\n    const handleTimerComplete = (group as any)._handleTimerComplete\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        playAll,\n        pauseAll,\n        resetAll,\n      }),\n      [playAll, pauseAll, resetAll]\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        mode,\n        isTimerPlaying: (index: number) =>\n          timers[index]?.isPlaying ?? false,\n        onTimerDone: handleTimerComplete,\n        registerTimer: () => {},\n      }),\n      [mode, timers, handleTimerComplete]\n    )\n\n    const enhancedChildren = childArray.map((child, index) => {\n      if (!isValidElement(child)) return child\n\n      const timerState = timers[index]\n      return cloneElement(child as React.ReactElement<any>, {\n        key: index,\n        isPlaying: timerState?.isPlaying ?? false,\n        onComplete: (elapsed: number) => {\n          handleTimerComplete(index)\n          const originalOnComplete = (child as any).props?.onComplete\n          return originalOnComplete?.(elapsed)\n        },\n      })\n    })\n\n    return (\n      <TimerGroupContext.Provider value={contextValue}>\n        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>\n          {enhancedChildren}\n        </div>\n      </TimerGroupContext.Provider>\n    )\n  }\n)\n\nTimerGroup.displayName = 'TimerGroup'\n"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@toankhontech/arctimer-react",
+  "version": "0.0.0",
+  "description": "React web countdown circle timer component with SVG rendering",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  },
+  "dependencies": {
+    "@toankhontech/arctimer-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/jest-dom": "^6.6.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "keywords": ["react", "countdown", "timer", "circle", "svg", "web"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/toankhontech/arc-timer.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/toankhontech/arc-timer",
+  "bugs": {
+    "url": "https://github.com/toankhontech/arc-timer/issues"
+  },
+  "author": "toankhontech",
+  "license": "MIT"
+}