@mindlogic-ai/logician-ui 4.0.0-alpha.8 → 4.0.0

package/src/components/Confetti/Confetti.tsx

@@ -0,0 +1,182 @@
+import { ForwardedRef, forwardRef, useMemo } from 'react';
+import { Box } from '@chakra-ui/react';
+
+import { MOTION_DURATION_MS } from '../../theme/motion';
+import { confettiPiece } from './Confetti.styles';
+import { ConfettiProps } from './Confetti.types';
+
+/**
+ * Literal hex, and the one place in this library that is deliberately off the
+ * palette.
+ *
+ * The first version reached for `primary.main` / `success.main` /
+ * `warning.main` / `danger.main`, which was wrong twice over. **Semantically**,
+ * those colours mean things: raining the error red and the warning amber over
+ * "payment complete" says something the screen does not. Confetti is the one
+ * element on a page with nothing to communicate, so a colour that communicates
+ * is the wrong kind of colour.
+ *
+ * **And optically**, the palette is built for interface legibility — text and
+ * controls on a light surface — so it sits dark and desaturated: average
+ * lightness 47%, nothing above 80% saturation, and three of the five in the
+ * blue range. Fifty pieces of that read as a chart legend falling. These six
+ * average 56% lightness, four of them are fully saturated, and they span the
+ * whole wheel (9°–330°), which is what makes a burst read as a burst.
+ *
+ * The cost, stated rather than hidden: these do not follow a re-theme, and they
+ * do not adapt to dark mode — a bright hex on a dark surface is brighter still.
+ * That is acceptable for a burst that lasts two seconds and carries no
+ * information, and it is why `colors` is a prop: an app that needs its own
+ * festival palette passes one.
+ */
+const DEFAULT_COLORS = [
+  '#FFD700', // gold
+  '#FF69B4', // hot pink
+  '#00CED1', // turquoise
+  '#FF6347', // tomato
+  '#9370DB', // medium purple
+  '#32CD32', // lime
+];
+
+/**
+ * A seeded generator, so one burst is stable across re-renders.
+ *
+ * `Math.random()` per render would re-scatter every piece whenever the parent
+ * updated — and a parent that is showing a celebration is usually updating,
+ * because something just finished.
+ */
+const scatter = (seed: number) => {
+  let s = seed || 1;
+  return () => {
+    s = (s * 1664525 + 1013904223) % 4294967296;
+    return s / 4294967296;
+  };
+};
+
+/**
+ * A one-shot celebratory burst — the thing that plays when a reward lands or a
+ * purchase completes.
+ *
+ * Pure CSS, one class, one keyframe. Fifty pieces share `confetti-fall` and
+ * differ only in the three custom properties it reads, so the burst costs one
+ * style rule rather than fifty.
+ *
+ * **The token sets the pace; each piece scales it.** Where a piece starts, how
+ * far it drifts, which way it tumbles, what colour it is and *how fast it
+ * falls* are all per-piece — equal fall speed is the one thing debris never
+ * has, and fifty pieces at an identical rate read as one sheet. But the rate is
+ * a bounded multiple of `motion.celebrate.fall` rather than an open interval,
+ * so the burst still has a computable end. FactChat's version uses
+ * `2 + Math.random()` seconds with no ceiling, which is the part that makes a
+ * burst impossible to schedule anything after.
+ *
+ * The delay is random too, not indexed. An earlier pass here reused the
+ * `stagger` step, which was a mistake worth naming: a list has an order the eye
+ * follows, and a delay that grows with the index is a *rhythm*. Confetti has no
+ * order, so the same delay reads as a wave sweeping across the container —
+ * fifty pieces queueing rather than bursting.
+ *
+ * Under reduced motion the pieces mount and stay invisible rather than being
+ * branched away in JS — a burst carries no information, so removing it removes
+ * nothing, and doing it in CSS keeps the decision on the same media query as
+ * every other preset instead of on a hook that has to guess before hydration.
+ *
+ * **The default colours are literal hex, and this is the one place in the
+ * library deliberately off the palette.** Semantic tokens mean things, and
+ * raining `danger.main` over "payment complete" says something the screen does
+ * not — confetti is the one element on a page with nothing to communicate. The
+ * palette is also built for interface legibility on a light surface, so it runs
+ * dark and narrow (average lightness 47%, three of five in the blue range) and
+ * fifty pieces of it read as a chart legend falling. The cost is real and
+ * stated: these do not follow a re-theme and do not adapt to dark mode. `colors`
+ * is a prop for an app that needs its own.
+ *
+ * **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
+ * against the nearest positioned ancestor, which is therefore the stage: give
+ * that element `position: relative`, or the burst resolves against the page and
+ * rains over everything.
+ *
+ * ```tsx
+ * {justPurchased && <Confetti />}
+ * ```
+ */
+export const Confetti = forwardRef(
+  (
+    {
+      pieceCount = 50,
+      colors = DEFAULT_COLORS,
+      seed = 1,
+      ...rest
+    }: ConfettiProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    const pieces = useMemo(() => {
+      const next = scatter(seed);
+      return Array.from({ length: pieceCount }, (_, i) => ({
+        id: i,
+        left: `${next() * 100}%`,
+        color: colors[Math.floor(next() * colors.length)],
+        // ± half a container width of lateral travel.
+        drift: `${Math.round(next() * 100 - 50)}px`,
+        // Two full turns, and only the direction is random. A magnitude that
+        // varies down to near zero gives some pieces no tumble at all, which is
+        // the difference between debris and a falling rectangle.
+        spin: next() < 0.5 ? '-720deg' : '720deg',
+        // Square, near enough. The first version varied width 6–10 and height
+        // 8–14 independently, which produced pieces 2.3× taller than wide —
+        // and with `radii.xs` on top of that (4px, because this theme
+        // overrides Chakra's 2px for buttons and cards) a 6px-wide piece is
+        // two-thirds round. A rounded oblong tumbling end over end is not a
+        // fragment of paper; the team's word for it was 애벌레, caterpillar.
+        width: `${8 + Math.round(next() * 4)}px`,
+        height: `${8 + Math.round(next() * 5)}px`,
+        // 0.85–1.3× the token. Anchored to the scale, and with a ceiling: the
+        // whole burst is over by `fall × 1.3 + base`, which is knowable without
+        // running it.
+        rate: (0.85 + next() * 0.45).toFixed(2),
+        // Random within `motion.base`, not stepped by index — see the note
+        // above about why a stagger is wrong here. 300ms is wide enough that no
+        // two pieces launch together and narrow enough that the burst still
+        // reads as one event.
+        delay: `${Math.round(next() * MOTION_DURATION_MS.base)}ms`,
+      }));
+    }, [pieceCount, colors, seed]);
+
+    return (
+      <Box
+        ref={ref}
+        position="absolute"
+        inset="0"
+        overflow="hidden"
+        pointerEvents="none"
+        aria-hidden
+        // Establishes the containing block the keyframe's `cqh` resolves
+        // against. Without it `110cqh` falls back to the small viewport and
+        // every piece leaves the screen in the first few frames.
+        containerType="size"
+        {...rest}
+      >
+        {pieces.map((p) => (
+          <Box
+            key={p.id}
+            css={confettiPiece}
+            bg={p.color}
+            left={p.left}
+            w={p.width}
+            h={p.height}
+            style={
+              {
+                '--confetti-drift': p.drift,
+                '--confetti-spin': p.spin,
+                '--confetti-rate': p.rate,
+                animationDelay: p.delay,
+              } as React.CSSProperties
+            }
+          />
+        ))}
+      </Box>
+    );
+  }
+);
+
+Confetti.displayName = 'Confetti';

package/src/components/Confetti/Confetti.types.ts

@@ -0,0 +1,13 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export interface ConfettiProps extends BoxProps {
+  /** How many pieces. Defaults to 50. */
+  pieceCount?: number;
+  /** Colour token names to pick from. Defaults to the palette's five accents. */
+  colors?: string[];
+  /**
+   * Changes the scatter. The generator is seeded rather than `Math.random()` so
+   * one burst holds still across re-renders; pass a new seed to re-scatter.
+   */
+  seed?: number;
+}

package/src/components/Confetti/index.ts

@@ -0,0 +1,2 @@
+export { Confetti } from './Confetti';
+export type { ConfettiProps } from './Confetti.types';

package/src/components/Container/Container.tsx

@@ -1,13 +1,15 @@
 'use client';
-import { Container as ChakraContainer, ContainerProps } from '@chakra-ui/react';
+import { Container as ChakraContainer } from '@chakra-ui/react';
 
+import { polymorphic } from '../../types/polymorphic';
+import { ContainerOwnProps } from './Container.types';
 import useContainerSize from './useContainerSize';
 
-export const Container = ({
+const ContainerImpl = ({
   style,
   disableResponsive,
   ...rest
-}: ContainerProps & { disableResponsive?: boolean }) => {
+}: ContainerOwnProps) => {
   const containerSize = useContainerSize();
   return (
     <ChakraContainer
@@ -19,3 +21,8 @@ export const Container = ({
     />
   );
 };
+
+ContainerImpl.displayName = 'Container';
+
+/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+export const Container = polymorphic<ContainerOwnProps, 'div'>(ContainerImpl);

package/src/components/Container/Container.types.ts

@@ -0,0 +1,20 @@
+import type { ElementType } from 'react';
+import { ContainerProps as ChakraContainerProps } from '@chakra-ui/react';
+
+// Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
+import type { PolymorphicProps } from '../../types/polymorphic';
+
+export type ContainerOwnProps = Omit<ChakraContainerProps, 'as'> & {
+  /** Skip the responsive `minWidth` this component otherwise applies. */
+  disableResponsive?: boolean;
+};
+
+/**
+ * Props for `Container`, typed for whatever element `as` renders.
+ *
+ * Defaults to `'div'`, so the bare type is unchanged. A page container is
+ * often a landmark — `as="main"` / `as="section"` / `as="nav"` is how it says
+ * so, and KWCAG 반복 영역 건너뛰기 grades that structure.
+ */
+export type ContainerProps<TElement extends ElementType = 'div'> =
+  PolymorphicProps<TElement, ContainerOwnProps>;

package/src/components/Container/index.ts

@@ -1,2 +1,3 @@
 export { Container } from './Container';
+export type { ContainerOwnProps, ContainerProps } from './Container.types';
 export * from './useContainerSize';

package/src/components/CopyableCode/CopyableCode.tsx

@@ -1,14 +1,81 @@
+import { useEffect, useRef, useState } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 
 import { useTranslate } from '@/hooks/useTranslate';
 
 import { Button } from '../Button';
 import { Card } from '../Card';
-import { FaRegCopy } from '../Icon';
+import { FaCheck, FaRegCopy } from '../Icon';
 import { CopyableCodeProps } from './CopyableCode.types';
+
+/** How long the button stays in its confirmed state before reverting, in ms. */
+const CONFIRM_HOLD_MS = 1600;
+
+/** How far the label sits from the window when it is not the one showing. */
+const LABEL_OFFSET = '8px';
+
+/**
+ * The two clocks a label swap needs: the outgoing label clears fast so the
+ * incoming one is not read through it, while the travel is slow enough to read
+ * as one thing replacing another rather than a flicker.
+ */
+const LABEL_TRANSITION = [
+  'opacity var(--chakra-durations-fast) var(--chakra-easings-standard)',
+  'translate var(--chakra-durations-motion-base) var(--chakra-easings-emphasized)',
+].join(', ');
+
+/**
+ * One of the button's two labels, stacked in the same grid cell as the other.
+ *
+ * Both labels are always in the layout, so the button is as wide as the longer
+ * of them and stops resizing when the state flips. That is the whole point
+ * here: this button is absolutely positioned against the right edge, and
+ * "복사" → "복사 완료" is two characters wider, so growing walked the button
+ * leftwards over the code the moment it was clicked (measured: 59px → 87px).
+ *
+ * Sizing this way rather than with a hand-tuned `minW` means the lock survives
+ * translation, where the longest string is not the one you measured.
+ *
+ * `past` decides which way the label leaves: the idle label has already
+ * happened by the time the confirmation shows, so it leaves upward and the
+ * confirmation rises into its place.
+ */
+const SwapLabel = ({
+  show,
+  past,
+  children,
+}: {
+  show: boolean;
+  past: boolean;
+  children: React.ReactNode;
+}) => (
+  <Box
+    gridArea="1 / 1"
+    display="inline-flex"
+    alignItems="center"
+    justifyContent="center"
+    gap="1.5"
+    whiteSpace="nowrap"
+    opacity={show ? 1 : 0}
+    translate={show ? '0 0' : `0 ${past ? '-' : ''}${LABEL_OFFSET}`}
+    pointerEvents={show ? undefined : 'none'}
+    aria-hidden={!show || undefined}
+    transition={LABEL_TRANSITION}
+    animationStyle="composite"
+  >
+    {children}
+  </Box>
+);
+
 /**
  * Intended for a quick one-click copy of one-liner code snippets.
  *
+ * The button answers for itself: on click the copy icon crosses into a check and
+ * the label flips to "copied", then reverts. Copying is otherwise invisible —
+ * without a reply the member has no way to know it worked and clicks again — and
+ * a global toast is too much ceremony for something this small, so the control
+ * that was pressed is the thing that confirms.
+ *
  * @example
  * <CopyableCode onCopy={() => {}}>
  *   {`const example = 'This is a code example';
@@ -21,6 +88,20 @@ export const CopyableCode = ({
   containerProps,
 }: CopyableCodeProps) => {
   const translate = useTranslate();
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  // The revert fires 1.6s after the click; unmounting in between would leave it
+  // writing into a gone component.
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const handleCopy = () => {
+    onCopy?.();
+    setCopied(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), CONFIRM_HOLD_MS);
+  };
+
   return (
     <Flex position="relative" width="100%" {...containerProps}>
       <Card overflow="hidden" maxW="100%" p={0} width="100%">
@@ -40,17 +121,31 @@ export const CopyableCode = ({
         />
       </Card>
       <Button
-        colorPalette="primary"
+        colorPalette={copied ? 'success' : 'primary'}
         variant="solid"
         size="xs"
-        onClick={onCopy}
+        onClick={handleCopy}
         position="absolute"
         right={4}
         top="50%"
         transform="translateY(-50%)"
         zIndex={1}
       >
-        <FaRegCopy boxSize="xs" /> {translate('copy')}
+        {/* Icon *and* label cross together, in one cell — see SwapLabel. The
+            window is what keeps the outgoing label from showing above the
+            button while it fades. */}
+        <Box display="inline-grid" placeItems="center" overflow="hidden">
+          {/* Idle is the earlier state, so it leaves upward and the
+              confirmation rises from below into its place. */}
+          <SwapLabel show={!copied} past>
+            <FaRegCopy boxSize="xs" />
+            {translate('copy')}
+          </SwapLabel>
+          <SwapLabel show={copied} past={false}>
+            <FaCheck boxSize="xs" />
+            {translate('copied')}
+          </SwapLabel>
+        </Box>
       </Button>
     </Flex>
   );

package/src/components/CountUp/CountUp.stories.tsx

@@ -0,0 +1,127 @@
+import { Grid, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { MOTION_DURATION_MS } from '../../theme/motion';
+import { Button } from '../Button';
+import { Subtext, Text } from '../Typography';
+import { CountUp } from '.';
+
+/**
+ * The only thing in the motion layer CSS cannot animate at all: a number is
+ * text, and text content is not an animatable property. So it interpolates in
+ * JavaScript — and reads the same curve CSS would have, through `cubicBezier`.
+ */
+const meta = {
+  title: 'Components/Motion/CountUp',
+  component: CountUp,
+  args: { to: 1250 },
+} satisfies Meta<typeof CountUp>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Omit `from` and it renders `to` immediately, counting only on later changes. */
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(1250);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button size="sm" onClick={() => setValue((v) => v + 500)}>
+          +500
+        </Button>
+        <Text fontSize="3xl" fontWeight="700" mb={0}>
+          <CountUp to={value} /> 크레딧
+        </Text>
+        <Subtext color="fg.muted" mb={0}>
+          다음 카운트는 앞선 카운트가 끝난 자리에서 이어집니다 — 두 번째 보상이
+          첫 번째에 더해지는 것으로 읽히도록.
+        </Subtext>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Which band a count-up belongs to is the judgement, not how many milliseconds.
+ * A KPI refreshing is a response; a balance rising under confetti is a
+ * celebration.
+ */
+export const Bands: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={5} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          둘 동시 재생
+        </Button>
+        {[
+          {
+            label: '응답 — 기본값',
+            note: 'motion.slower (700ms), 지연 없음. 관리자 KPI 카드처럼 갱신을 알리는 자리.',
+            duration: MOTION_DURATION_MS.slower,
+            delay: 0,
+          },
+          {
+            label: '축하 — 호출부가 올림',
+            note: 'celebrate.fall (1800ms) + celebrate.burst 지연. 컨페티가 터지는 동안 올라가는 잔액.',
+            duration: MOTION_DURATION_MS.celebrateFall,
+            delay: MOTION_DURATION_MS.celebrateBurst,
+          },
+        ].map((b) => (
+          <Grid
+            key={b.label}
+            templateColumns={{ base: '1fr', md: '190px 190px 1fr' }}
+            gap={4}
+            alignItems="baseline"
+          >
+            <Text fontSize="sm" fontWeight="600" mb={0}>
+              {b.label}
+            </Text>
+            <Text fontSize="2xl" fontWeight="700" mb={0}>
+              <CountUp
+                key={`${b.label}-${run}`}
+                from={1250}
+                to={1750}
+                durationMs={b.duration}
+                delayMs={b.delay}
+              />
+            </Text>
+            <Subtext color="fg.muted" fontSize="2xs" mb={0}>
+              {b.note}
+            </Subtext>
+          </Grid>
+        ))}
+      </Stack>
+    );
+  },
+};
+
+/** `format` owns the whole string, so a unit or a currency rides along. */
+export const Format: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          재생
+        </Button>
+        <Text fontSize="2xl" fontWeight="700" mb={0}>
+          <CountUp
+            key={run}
+            from={0}
+            to={87.4}
+            format={(n) => `${n.toFixed(1)}%`}
+          />
+        </Text>
+        <Subtext color="fg.muted" mb={0}>
+          기본값은 천 단위 구분입니다. 소수점·통화·단위가 필요하면 넘기세요.
+        </Subtext>
+      </Stack>
+    );
+  },
+};

package/src/components/CountUp/CountUp.tsx

@@ -0,0 +1,122 @@
+import { ForwardedRef, forwardRef, useEffect, useReducer, useRef } from 'react';
+import { chakra, useBreakpointValue } from '@chakra-ui/react';
+
+import { cubicBezier } from '@/utils/cubicBezier';
+
+import { MOTION_DURATION_MS } from '../../theme/motion';
+import { CountUpProps } from './CountUp.types';
+
+/** Comma-grouped, which is what a balance is read as. */
+const groupDigits = (n: number) => Math.round(n).toLocaleString('en-US');
+
+const ease = cubicBezier('emphasized');
+
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+export const CountUp = forwardRef(
+  (
+    {
+      to,
+      from,
+      durationMs = MOTION_DURATION_MS.slower,
+      delayMs = 0,
+      format = groupDigits,
+      onEnd,
+      ...rest
+    }: CountUpProps,
+    ref?: ForwardedRef<HTMLSpanElement>
+  ) => {
+    // Chakra resolves this from the same media query the `_motionReduce`
+    // condition compiles to, so the JS branch and the CSS branch cannot drift.
+    const reduced = useBreakpointValue(
+      { base: false, _motionReduce: true },
+      { ssr: false }
+    );
+
+    // The displayed value lives in a ref and paints through a forced render, so
+    // the ~60 frames of a count do not each rebuild the subtree. Only this node
+    // re-renders, and only its text changes.
+    const shown = useRef(from ?? to);
+    const [, repaint] = useReducer((n: number) => n + 1, 0);
+
+    // Read inside the effect rather than listed as dependencies: a caller that
+    // rebuilds `format` inline every render would otherwise restart the count
+    // on every parent render.
+    const latest = useRef({ format, onEnd, durationMs, delayMs });
+    latest.current = { format, onEnd, durationMs, delayMs };
+
+    useEffect(() => {
+      const start = shown.current;
+      if (reduced || start === to) {
+        shown.current = to;
+        repaint();
+        latest.current.onEnd?.();
+        return;
+      }
+
+      const { durationMs: ms, delayMs: delay } = latest.current;
+      let frame = 0;
+      let began = 0;
+
+      const step = (now: number) => {
+        if (!began) began = now;
+        const elapsed = now - began - delay;
+
+        if (elapsed < 0) {
+          frame = requestAnimationFrame(step);
+          return;
+        }
+        if (elapsed >= ms) {
+          shown.current = to;
+          repaint();
+          latest.current.onEnd?.();
+          return;
+        }
+
+        shown.current = start + (to - start) * ease(elapsed / ms);
+        repaint();
+        frame = requestAnimationFrame(step);
+      };
+
+      frame = requestAnimationFrame(step);
+      return () => cancelAnimationFrame(frame);
+      // `from` is a starting value, not a target: changing it mid-count would
+      // restart from a number the reader never saw. Later counts pick up from
+      // wherever the last one landed, which is what makes a second reward read
+      // as adding to the first.
+    }, [to, reduced]);
+
+    return (
+      <chakra.span ref={ref} fontVariantNumeric="tabular-nums" {...rest}>
+        {format(shown.current)}
+      </chakra.span>
+    );
+  }
+);
+
+CountUp.displayName = 'CountUp';

package/src/components/CountUp/CountUp.types.ts

@@ -0,0 +1,19 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+
+export interface CountUpProps extends HTMLChakraProps<'span'> {
+  /** The value to land on. */
+  to: number;
+  /**
+   * Where the first count starts. Omit to render `to` immediately and count
+   * only when it changes later.
+   */
+  from?: number;
+  /** Count duration. Defaults to `motion.slower` (700ms). */
+  durationMs?: number;
+  /** Delay before counting — e.g. to let a modal finish arriving. */
+  delayMs?: number;
+  /** Formats each intermediate value. Defaults to comma-grouped digits. */
+  format?: (n: number) => string;
+  /** Fires once a count settles, including under reduced motion. */
+  onEnd?: () => void;
+}

package/src/components/CountUp/index.ts

@@ -0,0 +1,2 @@
+export { CountUp } from './CountUp';
+export type { CountUpProps } from './CountUp.types';