@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/data-storytelling/AnimatedBarRace.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface BarRaceKeyframe {
+    frame: number;
+    value: number;
+}
+export interface BarRaceItem {
+    id: string;
+    label: string;
+    /** Target value (or initial value when `keyframes` are provided) */
+    value: number;
+    /** Optional time-series keyframes enabling live rank overtaking at 60 FPS */
+    keyframes?: ReadonlyArray<BarRaceKeyframe>;
+    color?: string;
+    badge?: string;
+    icon?: React.ReactNode;
+}
+export interface AnimatedBarRaceProps {
+    items: ReadonlyArray<BarRaceItem>;
+    orientation?: 'horizontal' | 'vertical';
+    title?: string;
+    subtitle?: string;
+    valuePrefix?: string;
+    valueSuffix?: string;
+    decimals?: number;
+    maxItems?: number;
+    enterFrame?: number;
+    startFrame?: number;
+    staggerFrames?: number;
+    variant?: 'dark' | 'light';
+    safeBox9x16?: boolean;
+    style?: React.CSSProperties;
+}
+/**
+ * Crisp 60 FPS Ranked Horizontal / Vertical Bar Race Chart with high-damping
+ * spring entrances, dynamic rank overtaking, and tabular value pills.
+ */
+export declare const AnimatedBarRace: React.FC<AnimatedBarRaceProps>;

package/dist/data-storytelling/MetricComparisonCard.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface MetricComparisonCardProps {
+    title?: string;
+    beforeLabel: string;
+    beforeValue: number;
+    afterLabel: string;
+    afterValue: number;
+    /** Optional reference ceiling for progress rings/bars */
+    maxValue?: number;
+    prefix?: string;
+    unit?: string;
+    decimals?: number;
+    /** Custom delta badge (auto-computed when omitted, e.g. `"+180%"` or `"-65%"`) */
+    deltaBadge?: string;
+    /** Visual gauge representation (default `'rings'`) */
+    mode?: 'rings' | 'bars';
+    beforeColor?: string;
+    afterColor?: string;
+    enterFrame?: number;
+    startFrame?: number;
+    variant?: 'dark' | 'light';
+    safeBox9x16?: boolean;
+    style?: React.CSSProperties;
+}
+/**
+ * Before / After (A/B) 60 FPS Visual Delta Comparison Card with animated
+ * radial progress rings or bars, tabular counters, and delta pill.
+ */
+export declare const MetricComparisonCard: React.FC<MetricComparisonCardProps>;

package/dist/data-storytelling/TimelineTrack.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface TimelineMilestone {
+    id: string;
+    label: string;
+    /** Concise era, year, or step tag (e.g. `"2024"`, `"Step 01"`) */
+    era?: string;
+    /** Frame when this milestone becomes active */
+    fromFrame?: number;
+    /** Alias for `fromFrame` */
+    frame?: number;
+    /** Optional concise 2–3 word subtitle */
+    detail?: string;
+    color?: string;
+}
+export interface TimelineTrackProps {
+    milestones: ReadonlyArray<TimelineMilestone>;
+    orientation?: 'horizontal' | 'vertical';
+    accentColor?: string;
+    enterFrame?: number;
+    startFrame?: number;
+    variant?: 'dark' | 'light';
+    safeBox9x16?: boolean;
+    style?: React.CSSProperties;
+}
+/**
+ * Interactive 60 FPS Milestone Progression Track highlighting the active era/step
+ * at `frame` with smooth spring-interpolated rail progress.
+ */
+export declare const TimelineTrack: React.FC<TimelineTrackProps>;