@coinbase/cds-web-visualization 0.0.0 → 3.3.0

package/dts/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.d.ts

@@ -0,0 +1,374 @@
+declare const _default: {
+    component: <Period extends string>({ compact, ...props }: import("../SparklineInteractive").SparklineInteractiveProps<Period>) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Compact: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Contained: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const DisableScrubbing: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const HidePeriodSelector: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const yAxisScaling: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const AutoStrokeColor: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const CustomRGBStrokeColor: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const CustomRGBAStrokeColor: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const FillDisabled: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const FallbackPositive: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const FallbackNegative: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const FallbackCompact: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const HoverPrice: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const NoHoverDate: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const WithHeaderNode: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const TimePeriodGutter: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const HoverData: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const HoverDataWithFill: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const BottomPeriodSelector: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const VStackedSparkline: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const NoDataInSelectedPeriod: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const WithCustomStyles: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+//# sourceMappingURL=SparklineInteractive.stories.d.ts.map

package/dts/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractive.stories.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.tsx"],"names":[],"mappings":";;;;AAgBA,wBAGE;AAuIF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAInB,CAAC;AAWF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAEnB,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAMrB,CAAC;AAYF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAM5B,CAAC;AAYF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAM9B,CAAC;AAYF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAMxB,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;CAI3B,CAAC;AAYF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;CAIhC,CAAC;AAYF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;CAIjC,CAAC;AAYF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAQxB,CAAC;AAUF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAAkE,CAAC;AAYhG,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAE5B,CAAC;AAYF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;CAE3B,CAAC;AAgBF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAStB,CAAC;AAYF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAOvB,CAAC;AAYF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;CA4E1B,CAAC;AAYF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAQ5B,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAQrB,CAAC;AAYF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;CAS7B,CAAC;AAYF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;CAQhC,CAAC;AAYF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;CAW7B,CAAC;AAYF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;CASlC,CAAC;AAeF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAqF5B,CAAC"}

package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractive.test.d.ts.map

package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractive.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractive.test.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractivePeriodSelector.test.d.ts.map

package/dts/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractivePeriodSelector.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive/__tests__/SparklineInteractivePeriodSelector.test.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive/fade.d.ts

@@ -0,0 +1,3 @@
+export declare function fadeOut(domNode?: HTMLElement | null): void;
+export declare function fadeIn(domNode?: HTMLElement | null): void;
+//# sourceMappingURL=fade.d.ts.map

package/dts/sparkline/sparkline-interactive/fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/fade.ts"],"names":[],"mappings":"AAqCA,wBAAgB,OAAO,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAGnD;AAED,wBAAgB,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,QAGlD"}

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts

@@ -0,0 +1,13 @@
+export declare function useSparklineInteractiveConstants(): {
+    chartWidth: number;
+    chartHeight: number;
+    chartDimensionStyles: {
+        height: number;
+        width: number;
+    };
+    xRange: number[];
+    yRange: number[];
+    startX: number;
+    endX: number;
+};
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSparklineInteractiveConstants.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts"],"names":[],"mappings":"AASA,wBAAgB,gCAAgC;;;;;;;;;;;EAuB/C"}

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { SharedProps, SparklineInteractiveHeaderSignVariant, SparklineInteractiveHeaderVariant } from '@coinbase/cds-common/types';
+export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
+export type SparklineInteractiveSubHead = {
+    /**
+     * Free form percentage change
+     */
+    percent: string;
+    /**
+     * Sign to denote the change in price
+     */
+    sign: SparklineInteractiveHeaderSignVariant;
+    /**
+     * The variant to use for the price and percentage change
+     */
+    variant: SparklineInteractiveHeaderVariant;
+    /**
+     * Show the dollar amount of price change
+     */
+    priceChange?: string;
+    /**
+     * The accessoryText to show after the price and / or percentage change. An example is "All time"
+     */
+    accessoryText?: string;
+    /**
+     * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+     * @example
+     * // First, configure your i18n strings
+     * const messages = defineMessages({
+     *   subHeadPrefix: {
+     *     id: `${i18nKey}.subHeadPrefix`,
+     *     defaultMessage: 'Price increase in the amount of',
+     *     description: 'A prefix to make it clear which direction the price action was moving',
+     *   }
+     * });
+     *
+     * // then  provide the translated string the accessibilityLabel prop
+     * messages.subHeadPrefix
+     */
+    accessibilityLabel?: string;
+};
+export type SparklineInteractiveHeaderValues = {
+    /**
+     * Describes what the Header represents e.g. Bitcoin Price
+     */
+    label?: string;
+    /**
+     * Main content of header, this is usually the price
+     */
+    title?: React.ReactNode;
+    /**
+     * Provides additional information about the title, such as a price change
+     */
+    subHead?: SparklineInteractiveSubHead;
+};
+export type SparklineInteractiveHeaderRef = {
+    update: (params: SparklineInteractiveHeaderValues) => void;
+};
+export type SparklineInteractiveHeaderProps = SharedProps & {
+    /**
+     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+     */
+    defaultTitle: React.ReactNode;
+    /**
+     * Default label, changing this prop has no effect once the default is rendered.
+     */
+    defaultLabel?: string;
+    /**
+     * Default SubHead, changing this prop has no effect once the default is rendered.
+     */
+    defaultSubHead?: SparklineInteractiveSubHead;
+    /**
+     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+     */
+    labelNode?: React.ReactNode;
+    /**
+     * Reduce the font size used for the header itself.
+     */
+    compact?: boolean;
+};
+export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
+export declare const SparklineInteractiveHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<SharedProps & {
+    /**
+     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+     */
+    defaultTitle: React.ReactNode;
+    /**
+     * Default label, changing this prop has no effect once the default is rendered.
+     */
+    defaultLabel?: string;
+    /**
+     * Default SubHead, changing this prop has no effect once the default is rendered.
+     */
+    defaultSubHead?: SparklineInteractiveSubHead;
+    /**
+     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+     */
+    labelNode?: React.ReactNode;
+    /**
+     * Reduce the font size used for the header itself.
+     */
+    compact?: boolean;
+} & React.RefAttributes<SparklineInteractiveHeaderRef>>>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAGnG,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAMpC,cAAc,gEAAgE,CAAC;AAQ/E,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,qCAAqC,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,iCAAiC,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,GAAG;IAC1D;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,2BAA2B,WAQ1E,CAAC;AA8KF,eAAO,MAAM,0BAA0B;IA5MrC;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;wDA6MlB,CAAC"}

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx"],"names":[],"mappings":""}

package/dts/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { type SparklineInteractiveHeaderRef, type SparklineInteractiveSubHead } from '../SparklineInteractiveHeader';
+declare const _default: {
+    component: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("@coinbase/cds-common").SharedProps & {
+        defaultTitle: React.ReactNode;
+        defaultLabel?: string;
+        defaultSubHead?: SparklineInteractiveSubHead;
+        labelNode?: React.ReactNode;
+        compact?: boolean;
+    } & React.RefAttributes<SparklineInteractiveHeaderRef>>>;
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const CustomLabel: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Compact: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const BottomPeriodSelector: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+    };
+};
+export declare const AlternatePeriods: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        percy: {
+            enableJavaScript: boolean;
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const CustomTitle: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SparklineInteractiveHeader.stories.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.stories.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__stories__/SparklineInteractiveHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE,OAAO,EAEL,KAAK,6BAA6B,EAClC,KAAK,2BAA2B,EACjC,MAAM,+BAA+B,CAAC;;;;;;;;;;;AAEvC,wBAGE;AA2NF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAEnB,CAAC;AAYF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAIvB,CAAC;AAYF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAEnB,CAAC;AAYF,eAAO,MAAM,oBAAoB;;;;;;;CAQhC,CAAC;AAIF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAE5B,CAAC;AAYF,eAAO,MAAM,WAAW,+CA2FvB,CAAC"}

package/dts/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SparklineInteractiveHeader.test.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineInteractiveHeader.test.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__tests__/SparklineInteractiveHeader.test.tsx"],"names":[],"mappings":""}

package/esm/index.js

@@ -0,0 +1 @@
+export * from './sparkline';

package/esm/sparkline/Counter.css

@@ -0,0 +1,3 @@
+.cds-containerCss-co2zq3s{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.cds-hiddenCss-h1nhoofs{visibility:hidden;}
+.cds-visibleCss-vhca54u{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.cds-visibleCss-vhca54u > *{width:100%;height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

package/esm/sparkline/Counter.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { useCounter } from '@coinbase/cds-common/visualizations/useCounter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "cds-containerCss-co2zq3s";
+const hiddenCss = "cds-hiddenCss-h1nhoofs";
+const visibleCss = "cds-visibleCss-vhca54u";
+export const Counter = _ref => {
+  let {
+    startNum,
+    endNum,
+    renderNum,
+    durationInMillis
+  } = _ref;
+  const count = useCounter({
+    startNum,
+    endNum,
+    durationInMillis
+  });
+  const renderFunction = useMemo(() => {
+    return num => {
+      return renderNum ? renderNum(num) : num;
+    };
+  }, [renderNum]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerCss,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: hiddenCss,
+      children: renderFunction(endNum)
+    }), /*#__PURE__*/_jsx("span", {
+      className: visibleCss,
+      children: renderFunction(count)
+    })]
+  });
+};
+import "./Counter.css";