@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/dist/components/ProgressBar/ProgressBar.styles.d.ts

@@ -1,4 +1,22 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { ProgressBarSize } from './ProgressBar.types';
+/**
+ * A bar sliding across its track for work of unknown length — the determinate
+ * bar's counterpart, where there is no percentage to show.
+ *
+ * Local rather than shared: an indeterminate bar is this component, and the
+ * keyframe travels a distance that only makes sense inside this track.
+ *
+ * `linear`, like the spinner: this one also restarts from its own start, and an
+ * eased sweep pauses at the edge of the track every cycle, which reads as the
+ * request having stalled there.
+ *
+ * Under reduced motion the bar stops travelling and sits in the track. That
+ * loses the "still working" signal, which is the cost — but a bar repeatedly
+ * crossing the viewport is the highest-risk motion we have, and the surrounding
+ * UI (a disabled control, a status line) is where that signal belongs anyway.
+ */
+export declare const indeterminateSweep: SystemStyleObject;
 export declare const baseStyles: {
     borderRadius: string;
     height: number;

package/dist/components/ProgressBar/ProgressBar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAC7B,eAAe,EACf;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAsBzC,CAAC"}
+{"version":3,"file":"ProgressBar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,EAAE,iBAMhC,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAGtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAC7B,eAAe,EACf;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAsBzC,CAAC"}

package/dist/components/ProgressBar/ProgressBar.styles.js

@@ -1,6 +1,29 @@
 "use client";
 'use strict';
 
+/**
+ * A bar sliding across its track for work of unknown length — the determinate
+ * bar's counterpart, where there is no percentage to show.
+ *
+ * Local rather than shared: an indeterminate bar is this component, and the
+ * keyframe travels a distance that only makes sense inside this track.
+ *
+ * `linear`, like the spinner: this one also restarts from its own start, and an
+ * eased sweep pauses at the edge of the track every cycle, which reads as the
+ * request having stalled there.
+ *
+ * Under reduced motion the bar stops travelling and sits in the track. That
+ * loses the "still working" signal, which is the cost — but a bar repeatedly
+ * crossing the viewport is the highest-risk motion we have, and the surrounding
+ * UI (a disabled control, a status line) is where that signal belongs anyway.
+ */
+const indeterminateSweep = {
+    animationName: 'indeterminate',
+    animationDuration: 'motion.loop.sweep',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    _motionReduce: { animationName: 'none' },
+};
 const sizeStyles = {
     xs: {
         height: 1, // 4px - very compact
@@ -24,5 +47,6 @@ const sizeStyles = {
     },
 };
 
+exports.indeterminateSweep = indeterminateSweep;
 exports.sizeStyles = sizeStyles;
 //# sourceMappingURL=ProgressBar.styles.js.map

package/dist/components/ProgressBar/ProgressBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.js","sources":["../../../src/components/ProgressBar/ProgressBar.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAOO,MAAM,UAAU,GAGnB;AACF,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;;;;;"}
+{"version":3,"file":"ProgressBar.styles.js","sources":["../../../src/components/ProgressBar/ProgressBar.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,kBAAkB,GAAsB;AACnD,IAAA,aAAa,EAAE,eAAe;AAC9B,IAAA,iBAAiB,EAAE,mBAAmB;AACtC,IAAA,uBAAuB,EAAE,QAAQ;AACjC,IAAA,uBAAuB,EAAE,UAAU;AACnC,IAAA,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;;AAQnC,MAAM,UAAU,GAGnB;AACF,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;;;;;;"}

package/dist/components/ProgressBar/ProgressBar.styles.mjs

@@ -1,4 +1,27 @@
 "use client";
+/**
+ * A bar sliding across its track for work of unknown length — the determinate
+ * bar's counterpart, where there is no percentage to show.
+ *
+ * Local rather than shared: an indeterminate bar is this component, and the
+ * keyframe travels a distance that only makes sense inside this track.
+ *
+ * `linear`, like the spinner: this one also restarts from its own start, and an
+ * eased sweep pauses at the edge of the track every cycle, which reads as the
+ * request having stalled there.
+ *
+ * Under reduced motion the bar stops travelling and sits in the track. That
+ * loses the "still working" signal, which is the cost — but a bar repeatedly
+ * crossing the viewport is the highest-risk motion we have, and the surrounding
+ * UI (a disabled control, a status line) is where that signal belongs anyway.
+ */
+const indeterminateSweep = {
+    animationName: 'indeterminate',
+    animationDuration: 'motion.loop.sweep',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    _motionReduce: { animationName: 'none' },
+};
 const sizeStyles = {
     xs: {
         height: 1, // 4px - very compact
@@ -22,5 +45,5 @@ const sizeStyles = {
     },
 };
 
-export { sizeStyles };
+export { indeterminateSweep, sizeStyles };
 //# sourceMappingURL=ProgressBar.styles.mjs.map

package/dist/components/ProgressBar/ProgressBar.styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.styles.mjs","sources":["../../../src/components/ProgressBar/ProgressBar.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAOO,MAAM,UAAU,GAGnB;AACF,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;;;;;"}
+{"version":3,"file":"ProgressBar.styles.mjs","sources":["../../../src/components/ProgressBar/ProgressBar.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAIA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,kBAAkB,GAAsB;AACnD,IAAA,aAAa,EAAE,eAAe;AAC9B,IAAA,iBAAiB,EAAE,mBAAmB;AACtC,IAAA,uBAAuB,EAAE,QAAQ;AACjC,IAAA,uBAAuB,EAAE,UAAU;AACnC,IAAA,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;;AAQnC,MAAM,UAAU,GAGnB;AACF,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;AACD,IAAA,EAAE,EAAE;QACF,MAAM,EAAE,CAAC;AACT,QAAA,YAAY,EAAE,MAAM;AACrB,KAAA;;;;;"}

package/dist/components/ProgressBar/ProgressBar.types.d.ts

@@ -3,5 +3,15 @@ export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ProgressBarProps extends ChakraProgressRootProps {
     filledTrackColor?: string;
     size?: ProgressBarSize;
+    /**
+     * Work whose length is not known yet: the bar slides across the track instead
+     * of filling to a percentage. `value` is ignored while this is set.
+     *
+     * Reach for it only when there is genuinely no denominator. A determinate bar
+     * that jumps 0 → 60 → 100 still tells the reader how much is left; an
+     * indeterminate one only says "something is happening", which a `Spinner`
+     * says in less space.
+     */
+    indeterminate?: boolean;
 }
 //# sourceMappingURL=ProgressBar.types.d.ts.map

package/dist/components/ProgressBar/ProgressBar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB"}
+{"version":3,"file":"ProgressBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/components/Pulse/Pulse.d.ts

@@ -0,0 +1,40 @@
+import { PulseProps } from './Pulse.types';
+/**
+ * Pops once, whenever `trigger` changes — for drawing the eye to a value that
+ * just updated: a balance that grew, a badge that landed, a step that filled.
+ *
+ * Pure CSS. The obvious implementation reaches for an animation library, since
+ * "replay this on demand" is what their imperative controls are for, but CSS
+ * already has the mechanism: an animation restarts when its **name** changes, so
+ * this alternates between two byte-identical keyframes. No dependency, no ref
+ * plumbing, no effect.
+ *
+ * Not a changed React `key`, which also restarts it and was how this shipped
+ * first. A new key is a new element, so the whole subtree is thrown away and
+ * rebuilt — measured cost: keyboard focus lands on `<body>`, uncontrolled inputs
+ * reset, child animations restart. A pop that draws the eye to a value must not
+ * also move the keyboard out from under someone.
+ *
+ * The first render never pops. A counter that mounts already at 12 has not just
+ * become 12, and an interface that celebrates its own initial paint is noise.
+ *
+ * Not a `Shake`. Both replay on a trigger, and the pair has to stay apart: a
+ * pulse draws the eye to something *good* that landed, a shake refuses. Swapped,
+ * a refusal reads as congratulation and emphasis reads as an error the reader
+ * then goes looking for.
+ *
+ * **Adds one `div` around `children`**, and layout props land on that wrapper
+ * rather than on the child. Usually the same result — but the child is no longer
+ * a *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * <Pulse trigger={balance}>
+ *   <Text textStyle="h2">{balance}</Text>
+ * </Pulse>
+ * ```
+ */
+export declare const Pulse: import("react").ForwardRefExoticComponent<PulseProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Pulse.d.ts.map

package/dist/components/Pulse/Pulse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.d.ts","sourceRoot":"","sources":["../../../src/components/Pulse/Pulse.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,uGAkCjB,CAAC"}

package/dist/components/Pulse/Pulse.js

@@ -0,0 +1,64 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var mergeCss = require('../../utils/mergeCss.js');
+var Pulse_styles = require('./Pulse.styles.js');
+
+/**
+ * Pops once, whenever `trigger` changes — for drawing the eye to a value that
+ * just updated: a balance that grew, a badge that landed, a step that filled.
+ *
+ * Pure CSS. The obvious implementation reaches for an animation library, since
+ * "replay this on demand" is what their imperative controls are for, but CSS
+ * already has the mechanism: an animation restarts when its **name** changes, so
+ * this alternates between two byte-identical keyframes. No dependency, no ref
+ * plumbing, no effect.
+ *
+ * Not a changed React `key`, which also restarts it and was how this shipped
+ * first. A new key is a new element, so the whole subtree is thrown away and
+ * rebuilt — measured cost: keyboard focus lands on `<body>`, uncontrolled inputs
+ * reset, child animations restart. A pop that draws the eye to a value must not
+ * also move the keyboard out from under someone.
+ *
+ * The first render never pops. A counter that mounts already at 12 has not just
+ * become 12, and an interface that celebrates its own initial paint is noise.
+ *
+ * Not a `Shake`. Both replay on a trigger, and the pair has to stay apart: a
+ * pulse draws the eye to something *good* that landed, a shake refuses. Swapped,
+ * a refusal reads as congratulation and emphasis reads as an error the reader
+ * then goes looking for.
+ *
+ * **Adds one `div` around `children`**, and layout props land on that wrapper
+ * rather than on the child. Usually the same result — but the child is no longer
+ * a *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * <Pulse trigger={balance}>
+ *   <Text textStyle="h2">{balance}</Text>
+ * </Pulse>
+ * ```
+ */
+const Pulse = React.forwardRef(({ trigger, peak, children, css, ...rest }, ref) => {
+    // A render counter rather than the trigger itself, so a value that returns
+    // to one it held before still pops — `0 → 1 → 0` is two events, and keying
+    // on the value would swallow the second.
+    const plays = React.useRef(0);
+    const previous = React.useRef(trigger);
+    if (previous.current !== trigger) {
+        previous.current = trigger;
+        plays.current += 1;
+    }
+    return (jsxRuntime.jsx(react.Box, { ref: ref, display: "inline-flex", ...rest, css: plays.current === 0
+            ? css
+            : mergeCss.mergeCss(Pulse_styles.pulsePop(plays.current), peak === undefined ? undefined : { '--pulse-peak': peak }, css), children: children }));
+});
+Pulse.displayName = 'Pulse';
+
+exports.Pulse = Pulse;
+//# sourceMappingURL=Pulse.js.map

package/dist/components/Pulse/Pulse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.js","sources":["../../../src/components/Pulse/Pulse.tsx"],"sourcesContent":[null],"names":["forwardRef","useRef","_jsx","Box","mergeCss","pulsePop"],"mappings":";;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;MACU,KAAK,GAAGA,gBAAU,CAC7B,CACE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAc,EACrD,GAAkC,KAChC;;;;AAIF,IAAA,MAAM,KAAK,GAAGC,YAAM,CAAC,CAAC,CAAC;AACvB,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAC,OAAO,CAAC;AAChC,IAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,OAAO,EAAE;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;AAC1B,QAAA,KAAK,CAAC,OAAO,IAAI,CAAC;IACpB;IAEA,QACEC,eAACC,SAAG,EAAA,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,aAAa,EAAA,GACjB,IAAI,EACR,GAAG,EACD,KAAK,CAAC,OAAO,KAAK;AAChB,cAAE;AACF,cAAEC,iBAAQ,CACNC,qBAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EACvB,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,EACzD,GAAG,CACJ,EAAA,QAAA,EAGN,QAAQ,EAAA,CACL;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/Pulse/Pulse.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { Box } from '@chakra-ui/react';
+import { mergeCss } from '../../utils/mergeCss.mjs';
+import { pulsePop } from './Pulse.styles.mjs';
+
+/**
+ * Pops once, whenever `trigger` changes — for drawing the eye to a value that
+ * just updated: a balance that grew, a badge that landed, a step that filled.
+ *
+ * Pure CSS. The obvious implementation reaches for an animation library, since
+ * "replay this on demand" is what their imperative controls are for, but CSS
+ * already has the mechanism: an animation restarts when its **name** changes, so
+ * this alternates between two byte-identical keyframes. No dependency, no ref
+ * plumbing, no effect.
+ *
+ * Not a changed React `key`, which also restarts it and was how this shipped
+ * first. A new key is a new element, so the whole subtree is thrown away and
+ * rebuilt — measured cost: keyboard focus lands on `<body>`, uncontrolled inputs
+ * reset, child animations restart. A pop that draws the eye to a value must not
+ * also move the keyboard out from under someone.
+ *
+ * The first render never pops. A counter that mounts already at 12 has not just
+ * become 12, and an interface that celebrates its own initial paint is noise.
+ *
+ * Not a `Shake`. Both replay on a trigger, and the pair has to stay apart: a
+ * pulse draws the eye to something *good* that landed, a shake refuses. Swapped,
+ * a refusal reads as congratulation and emphasis reads as an error the reader
+ * then goes looking for.
+ *
+ * **Adds one `div` around `children`**, and layout props land on that wrapper
+ * rather than on the child. Usually the same result — but the child is no longer
+ * a *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * <Pulse trigger={balance}>
+ *   <Text textStyle="h2">{balance}</Text>
+ * </Pulse>
+ * ```
+ */
+const Pulse = forwardRef(({ trigger, peak, children, css, ...rest }, ref) => {
+    // A render counter rather than the trigger itself, so a value that returns
+    // to one it held before still pops — `0 → 1 → 0` is two events, and keying
+    // on the value would swallow the second.
+    const plays = useRef(0);
+    const previous = useRef(trigger);
+    if (previous.current !== trigger) {
+        previous.current = trigger;
+        plays.current += 1;
+    }
+    return (jsx(Box, { ref: ref, display: "inline-flex", ...rest, css: plays.current === 0
+            ? css
+            : mergeCss(pulsePop(plays.current), peak === undefined ? undefined : { '--pulse-peak': peak }, css), children: children }));
+});
+Pulse.displayName = 'Pulse';
+
+export { Pulse };
+//# sourceMappingURL=Pulse.mjs.map

package/dist/components/Pulse/Pulse.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.mjs","sources":["../../../src/components/Pulse/Pulse.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCG;MACU,KAAK,GAAG,UAAU,CAC7B,CACE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAc,EACrD,GAAkC,KAChC;;;;AAIF,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;AACvB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;AAChC,IAAA,IAAI,QAAQ,CAAC,OAAO,KAAK,OAAO,EAAE;AAChC,QAAA,QAAQ,CAAC,OAAO,GAAG,OAAO;AAC1B,QAAA,KAAK,CAAC,OAAO,IAAI,CAAC;IACpB;IAEA,QACEA,IAAC,GAAG,EAAA,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,aAAa,EAAA,GACjB,IAAI,EACR,GAAG,EACD,KAAK,CAAC,OAAO,KAAK;AAChB,cAAE;AACF,cAAE,QAAQ,CACN,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EACvB,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,EACzD,GAAG,CACJ,EAAA,QAAA,EAGN,QAAQ,EAAA,CACL;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/Pulse/Pulse.styles.d.ts

@@ -0,0 +1,35 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+/**
+ * The one-shot "look here" pop.
+ *
+ * Lives here rather than in the shared vocabulary because a there-and-back is
+ * not a transition at all — a transition interpolates A to B, and this ends
+ * where it started. It needs the midpoint that only a keyframe has, so the
+ * `pulse-pop` keyframe is global (all `@keyframes` are) and this composition
+ * is local.
+ *
+ * `motion.slow` and `overshoot`: the same pair FactChat's framer-motion `Pulse`
+ * used, which is the point — the port changes the *mechanism*, not the feel.
+ * Overshoot is what makes a 12% scale readable at all; on `standard` the same
+ * amplitude reads as a rendering hiccup.
+ *
+ * Reduced motion removes it outright rather than shortening it. A pop exists to
+ * be noticed, and there is nothing left of one that is not; the value it draws
+ * the eye to has already changed by the time this plays, so nothing is lost but
+ * the emphasis.
+ */
+/**
+ * A function of the play count, because the *name* is what restarts it.
+ *
+ * A CSS animation replays when `animation-name` changes, so alternating between
+ * two byte-identical keyframes restarts the pop on every trigger without
+ * touching the DOM. The earlier version restarted it by changing the React
+ * `key`, which remounts the subtree — and a remount throws away whatever was
+ * inside it: the user's focus (measured: it lands on `<body>`), any uncontrolled
+ * input state, and any child animation mid-flight. A pop that draws the eye to a
+ * changed value must not also move the keyboard out from under someone, and
+ * `Shake` is worse on this axis than `Pulse` is: it fires on a rejected answer,
+ * which is exactly when a keyboard user is mid-interaction.
+ */
+export declare const pulsePop: (play: number) => SystemStyleObject;
+//# sourceMappingURL=Pulse.styles.d.ts.map

package/dist/components/Pulse/Pulse.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Pulse/Pulse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AACH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,iBAOtC,CAAC"}

package/dist/components/Pulse/Pulse.styles.js

@@ -0,0 +1,46 @@
+"use client";
+'use strict';
+
+/**
+ * The one-shot "look here" pop.
+ *
+ * Lives here rather than in the shared vocabulary because a there-and-back is
+ * not a transition at all — a transition interpolates A to B, and this ends
+ * where it started. It needs the midpoint that only a keyframe has, so the
+ * `pulse-pop` keyframe is global (all `@keyframes` are) and this composition
+ * is local.
+ *
+ * `motion.slow` and `overshoot`: the same pair FactChat's framer-motion `Pulse`
+ * used, which is the point — the port changes the *mechanism*, not the feel.
+ * Overshoot is what makes a 12% scale readable at all; on `standard` the same
+ * amplitude reads as a rendering hiccup.
+ *
+ * Reduced motion removes it outright rather than shortening it. A pop exists to
+ * be noticed, and there is nothing left of one that is not; the value it draws
+ * the eye to has already changed by the time this plays, so nothing is lost but
+ * the emphasis.
+ */
+/**
+ * A function of the play count, because the *name* is what restarts it.
+ *
+ * A CSS animation replays when `animation-name` changes, so alternating between
+ * two byte-identical keyframes restarts the pop on every trigger without
+ * touching the DOM. The earlier version restarted it by changing the React
+ * `key`, which remounts the subtree — and a remount throws away whatever was
+ * inside it: the user's focus (measured: it lands on `<body>`), any uncontrolled
+ * input state, and any child animation mid-flight. A pop that draws the eye to a
+ * changed value must not also move the keyboard out from under someone, and
+ * `Shake` is worse on this axis than `Pulse` is: it fires on a rejected answer,
+ * which is exactly when a keyboard user is mid-interaction.
+ */
+const pulsePop = (play) => ({
+    animationName: play % 2 === 0 ? 'pulse-pop-alt' : 'pulse-pop',
+    animationDuration: 'motion.slow',
+    animationTimingFunction: 'overshoot',
+    animationFillMode: 'both',
+    transformOrigin: 'center',
+    _motionReduce: { animationName: 'none' },
+});
+
+exports.pulsePop = pulsePop;
+//# sourceMappingURL=Pulse.styles.js.map

package/dist/components/Pulse/Pulse.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.styles.js","sources":["../../../src/components/Pulse/Pulse.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACH;;;;;;;;;;;;AAYG;MACU,QAAQ,GAAG,CAAC,IAAY,MAAyB;AAC5D,IAAA,aAAa,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,eAAe,GAAG,WAAW;AAC7D,IAAA,iBAAiB,EAAE,aAAa;AAChC,IAAA,uBAAuB,EAAE,WAAW;AACpC,IAAA,iBAAiB,EAAE,MAAM;AACzB,IAAA,eAAe,EAAE,QAAQ;AACzB,IAAA,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;AACzC,CAAA;;;;"}

package/dist/components/Pulse/Pulse.styles.mjs

@@ -0,0 +1,44 @@
+"use client";
+/**
+ * The one-shot "look here" pop.
+ *
+ * Lives here rather than in the shared vocabulary because a there-and-back is
+ * not a transition at all — a transition interpolates A to B, and this ends
+ * where it started. It needs the midpoint that only a keyframe has, so the
+ * `pulse-pop` keyframe is global (all `@keyframes` are) and this composition
+ * is local.
+ *
+ * `motion.slow` and `overshoot`: the same pair FactChat's framer-motion `Pulse`
+ * used, which is the point — the port changes the *mechanism*, not the feel.
+ * Overshoot is what makes a 12% scale readable at all; on `standard` the same
+ * amplitude reads as a rendering hiccup.
+ *
+ * Reduced motion removes it outright rather than shortening it. A pop exists to
+ * be noticed, and there is nothing left of one that is not; the value it draws
+ * the eye to has already changed by the time this plays, so nothing is lost but
+ * the emphasis.
+ */
+/**
+ * A function of the play count, because the *name* is what restarts it.
+ *
+ * A CSS animation replays when `animation-name` changes, so alternating between
+ * two byte-identical keyframes restarts the pop on every trigger without
+ * touching the DOM. The earlier version restarted it by changing the React
+ * `key`, which remounts the subtree — and a remount throws away whatever was
+ * inside it: the user's focus (measured: it lands on `<body>`), any uncontrolled
+ * input state, and any child animation mid-flight. A pop that draws the eye to a
+ * changed value must not also move the keyboard out from under someone, and
+ * `Shake` is worse on this axis than `Pulse` is: it fires on a rejected answer,
+ * which is exactly when a keyboard user is mid-interaction.
+ */
+const pulsePop = (play) => ({
+    animationName: play % 2 === 0 ? 'pulse-pop-alt' : 'pulse-pop',
+    animationDuration: 'motion.slow',
+    animationTimingFunction: 'overshoot',
+    animationFillMode: 'both',
+    transformOrigin: 'center',
+    _motionReduce: { animationName: 'none' },
+});
+
+export { pulsePop };
+//# sourceMappingURL=Pulse.styles.mjs.map

package/dist/components/Pulse/Pulse.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.styles.mjs","sources":["../../../src/components/Pulse/Pulse.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACH;;;;;;;;;;;;AAYG;MACU,QAAQ,GAAG,CAAC,IAAY,MAAyB;AAC5D,IAAA,aAAa,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,eAAe,GAAG,WAAW;AAC7D,IAAA,iBAAiB,EAAE,aAAa;AAChC,IAAA,uBAAuB,EAAE,WAAW;AACpC,IAAA,iBAAiB,EAAE,MAAM;AACzB,IAAA,eAAe,EAAE,QAAQ;AACzB,IAAA,aAAa,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE;AACzC,CAAA;;;;"}

package/dist/components/Pulse/Pulse.types.d.ts

@@ -0,0 +1,12 @@
+import type { BoxProps } from '@chakra-ui/react';
+export interface PulseProps extends Omit<BoxProps, 'scale'> {
+    /**
+     * Change this to fire one pop. Any changing value works — a counter, an id, a
+     * timestamp. The first render never pops, so a value that is already set on
+     * mount stays still.
+     */
+    trigger: string | number;
+    /** Peak scale at the top of the pop. Defaults to `1.12`. */
+    peak?: number;
+}
+//# sourceMappingURL=Pulse.types.d.ts.map

package/dist/components/Pulse/Pulse.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.types.d.ts","sourceRoot":"","sources":["../../../src/components/Pulse/Pulse.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzD;;;;OAIG;IACH,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/components/Pulse/index.d.ts

@@ -0,0 +1,3 @@
+export { Pulse } from './Pulse';
+export type { PulseProps } from './Pulse.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Pulse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pulse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/RadialProgress/RadialProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadialProgress.d.ts","sourceRoot":"","sources":["../../../src/components/RadialProgress/RadialProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAEL,mBAAmB,EAGpB,MAAM,wBAAwB,CAAC;AAEhC,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsNjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RadialProgress.d.ts","sourceRoot":"","sources":["../../../src/components/RadialProgress/RadialProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAEL,mBAAmB,EAGpB,MAAM,wBAAwB,CAAC;AAEhC,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmNjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/RadialProgress/RadialProgress.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@chakra-ui/react');
+require('../Typography/Caption.js');
 require('../Typography/H1.js');
 require('../Typography/H2.js');
 require('../Typography/H3.js');
@@ -18,7 +19,7 @@ var Text = require('../Typography/Text.js');
 
 const RadialProgress = ({ size = 200, total = 100, unit, formatTotal, segments = [], className, ...rest }) => {
     // useToken은 hook이므로 map 안이 아닌 최상위에서 호출
-    const colorTokens = segments.map((s) => s.color).concat('bg.muted');
+    const colorTokens = segments.map((s) => s.color).concat('bg.track');
     const resolvedColors = react.useToken('colors', colorTokens);
     const resolveColor = (token) => resolvedColors[colorTokens.indexOf(token)] || token;
     // Early return if total is 0 or negative to prevent division by zero
@@ -45,12 +46,9 @@ const RadialProgress = ({ size = 200, total = 100, unit, formatTotal, segments =
     const remainingValue = Math.max(0, total - usedTotal);
     // Add gray segment for remaining space if needed
     const allSegments = segments.length === 0
-        ? [{ color: 'bg.muted', value: total }] // Full gray circle if no segments
+        ? [{ color: 'bg.track', value: total }] // Full gray circle if no segments
         : remainingValue > 0
-            ? [
-                ...segments,
-                { color: 'bg.muted', value: remainingValue }, // Use token instead of theme.colors.gray[200]
-            ]
+            ? [...segments, { color: 'bg.track', value: remainingValue }]
             : segments;
     // Filter out zero-value segments for visible count
     const visibleSegments = allSegments.filter((s) => s.value > 0);
@@ -115,7 +113,7 @@ const RadialProgress = ({ size = 200, total = 100, unit, formatTotal, segments =
         const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
         return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
     };
-    return (jsxRuntime.jsx(react.Box, { display: "flex", alignItems: "center", justifyContent: "center", height: `${size}px`, width: "100%", backgroundColor: "bg.surface", className: ['ml-radial-progress', className].join(' '), ...rest, children: jsxRuntime.jsxs(react.Box, { position: "relative", width: `${size}px`, height: `${size}px`, children: [jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 200 200", style: { width: '100%', height: '100%' }, children: segments.length === 0 ? (jsxRuntime.jsx("circle", { cx: centerX, cy: centerY, r: radius, fill: "none", stroke: resolveColor('bg.muted'), strokeWidth: strokeWidth })) : (segmentAngles.map((segment, index) => (jsxRuntime.jsx("path", { d: createArc(segment.start, segment.end), fill: "none", stroke: segment.color, strokeWidth: strokeWidth, strokeLinecap: "round" }, index)))) }), jsxRuntime.jsx(react.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", textAlign: "center", children: jsxRuntime.jsxs(Text.Text, { fontSize: `${fontSize}px`, fontWeight: "500", color: "fg.subtle", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lineHeight: "1", children: [formatTotal ? formatTotal(total) : total, jsxRuntime.jsx(react.Box, { as: "span", fontSize: `${unitFontSize}px`, children: unit })] }) }), jsxRuntime.jsx(react.Box, { position: "absolute", bottom: `-${shadowOffset}px`, left: "50%", transform: "translateX(-50%)", width: `${shadowWidth}px`, height: `${shadowHeight}px`, background: "bg.muted", borderRadius: "50%", filter: `blur(${shadowBlur}px)`, opacity: "0.3" })] }) }));
+    return (jsxRuntime.jsx(react.Box, { display: "flex", alignItems: "center", justifyContent: "center", height: `${size}px`, width: "100%", backgroundColor: "bg.surface", className: ['ml-radial-progress', className].join(' '), ...rest, children: jsxRuntime.jsxs(react.Box, { position: "relative", width: `${size}px`, height: `${size}px`, children: [jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 200 200", style: { width: '100%', height: '100%' }, children: segments.length === 0 ? (jsxRuntime.jsx("circle", { cx: centerX, cy: centerY, r: radius, fill: "none", stroke: resolveColor('bg.track'), strokeWidth: strokeWidth })) : (segmentAngles.map((segment, index) => (jsxRuntime.jsx("path", { d: createArc(segment.start, segment.end), fill: "none", stroke: segment.color, strokeWidth: strokeWidth, strokeLinecap: "round" }, index)))) }), jsxRuntime.jsx(react.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", textAlign: "center", children: jsxRuntime.jsxs(Text.Text, { fontSize: `${fontSize}px`, fontWeight: "500", color: "fg.subtle", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lineHeight: "1", children: [formatTotal ? formatTotal(total) : total, jsxRuntime.jsx(react.Box, { as: "span", fontSize: `${unitFontSize}px`, children: unit })] }) }), jsxRuntime.jsx(react.Box, { position: "absolute", bottom: `-${shadowOffset}px`, left: "50%", transform: "translateX(-50%)", width: `${shadowWidth}px`, height: `${shadowHeight}px`, background: "bg.muted", borderRadius: "50%", filter: `blur(${shadowBlur}px)`, opacity: "0.3" })] }) }));
 };
 
 exports.default = RadialProgress;

package/dist/components/RadialProgress/RadialProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialProgress.js","sources":["../../../src/components/RadialProgress/RadialProgress.tsx"],"sourcesContent":[null],"names":["useToken","_jsx","Box","_jsxs","Text"],"mappings":"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"}
+{"version":3,"file":"RadialProgress.js","sources":["../../../src/components/RadialProgress/RadialProgress.tsx"],"sourcesContent":[null],"names":["useToken","_jsx","Box","_jsxs","Text"],"mappings":"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"}

package/dist/components/RadialProgress/RadialProgress.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useToken, Box } from '@chakra-ui/react';
+import '../Typography/Caption.mjs';
 import '../Typography/H1.mjs';
 import '../Typography/H2.mjs';
 import '../Typography/H3.mjs';
@@ -14,7 +15,7 @@ import { Text } from '../Typography/Text.mjs';
 
 const RadialProgress = ({ size = 200, total = 100, unit, formatTotal, segments = [], className, ...rest }) => {
     // useToken은 hook이므로 map 안이 아닌 최상위에서 호출
-    const colorTokens = segments.map((s) => s.color).concat('bg.muted');
+    const colorTokens = segments.map((s) => s.color).concat('bg.track');
     const resolvedColors = useToken('colors', colorTokens);
     const resolveColor = (token) => resolvedColors[colorTokens.indexOf(token)] || token;
     // Early return if total is 0 or negative to prevent division by zero
@@ -41,12 +42,9 @@ const RadialProgress = ({ size = 200, total = 100, unit, formatTotal, segments =
     const remainingValue = Math.max(0, total - usedTotal);
     // Add gray segment for remaining space if needed
     const allSegments = segments.length === 0
-        ? [{ color: 'bg.muted', value: total }] // Full gray circle if no segments
+        ? [{ color: 'bg.track', value: total }] // Full gray circle if no segments
         : remainingValue > 0
-            ? [
-                ...segments,
-                { color: 'bg.muted', value: remainingValue }, // Use token instead of theme.colors.gray[200]
-            ]
+            ? [...segments, { color: 'bg.track', value: remainingValue }]
             : segments;
     // Filter out zero-value segments for visible count
     const visibleSegments = allSegments.filter((s) => s.value > 0);
@@ -111,7 +109,7 @@ const RadialProgress = ({ size = 200, total = 100, unit, formatTotal, segments =
         const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
         return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;
     };
-    return (jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: `${size}px`, width: "100%", backgroundColor: "bg.surface", className: ['ml-radial-progress', className].join(' '), ...rest, children: jsxs(Box, { position: "relative", width: `${size}px`, height: `${size}px`, children: [jsx("svg", { width: size, height: size, viewBox: "0 0 200 200", style: { width: '100%', height: '100%' }, children: segments.length === 0 ? (jsx("circle", { cx: centerX, cy: centerY, r: radius, fill: "none", stroke: resolveColor('bg.muted'), strokeWidth: strokeWidth })) : (segmentAngles.map((segment, index) => (jsx("path", { d: createArc(segment.start, segment.end), fill: "none", stroke: segment.color, strokeWidth: strokeWidth, strokeLinecap: "round" }, index)))) }), jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", textAlign: "center", children: jsxs(Text, { fontSize: `${fontSize}px`, fontWeight: "500", color: "fg.subtle", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lineHeight: "1", children: [formatTotal ? formatTotal(total) : total, jsx(Box, { as: "span", fontSize: `${unitFontSize}px`, children: unit })] }) }), jsx(Box, { position: "absolute", bottom: `-${shadowOffset}px`, left: "50%", transform: "translateX(-50%)", width: `${shadowWidth}px`, height: `${shadowHeight}px`, background: "bg.muted", borderRadius: "50%", filter: `blur(${shadowBlur}px)`, opacity: "0.3" })] }) }));
+    return (jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: `${size}px`, width: "100%", backgroundColor: "bg.surface", className: ['ml-radial-progress', className].join(' '), ...rest, children: jsxs(Box, { position: "relative", width: `${size}px`, height: `${size}px`, children: [jsx("svg", { width: size, height: size, viewBox: "0 0 200 200", style: { width: '100%', height: '100%' }, children: segments.length === 0 ? (jsx("circle", { cx: centerX, cy: centerY, r: radius, fill: "none", stroke: resolveColor('bg.track'), strokeWidth: strokeWidth })) : (segmentAngles.map((segment, index) => (jsx("path", { d: createArc(segment.start, segment.end), fill: "none", stroke: segment.color, strokeWidth: strokeWidth, strokeLinecap: "round" }, index)))) }), jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", textAlign: "center", children: jsxs(Text, { fontSize: `${fontSize}px`, fontWeight: "500", color: "fg.subtle", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lineHeight: "1", children: [formatTotal ? formatTotal(total) : total, jsx(Box, { as: "span", fontSize: `${unitFontSize}px`, children: unit })] }) }), jsx(Box, { position: "absolute", bottom: `-${shadowOffset}px`, left: "50%", transform: "translateX(-50%)", width: `${shadowWidth}px`, height: `${shadowHeight}px`, background: "bg.muted", borderRadius: "50%", filter: `blur(${shadowBlur}px)`, opacity: "0.3" })] }) }));
 };
 
 export { RadialProgress as default };