@coinbase/cds-web 0.0.0 → 8.13.2

package/dts/visualizations/Counter.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type CounterBaseProps = {
+  startNum: number;
+  endNum: number;
+  durationInMillis: number;
+  renderNum?: (num: number) => string | React.ReactNode;
+};
+export type CounterProps = CounterBaseProps;
+/**
+ * @deprecated This component will be removed from CDS in a future version. It has been moved to cds-web-sparkline.
+ */
+export declare const Counter: ({
+  startNum,
+  endNum,
+  renderNum,
+  durationInMillis,
+}: CounterBaseProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=Counter.d.ts.map

package/dts/visualizations/Counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../src/visualizations/Counter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAgCvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,mDAAmD,gBAAgB,4CAe1F,CAAC"}

package/dts/visualizations/DefaultProgressCircleContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ProgressCircleContentProps } from './ProgressCircle';
+export declare const DefaultProgressCircleContent: React.MemoExoticComponent<
+  ({
+    progress,
+    disabled,
+    color,
+  }: ProgressCircleContentProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=DefaultProgressCircleContent.d.ts.map

package/dts/visualizations/DefaultProgressCircleContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultProgressCircleContent.d.ts","sourceRoot":"","sources":["../../src/visualizations/DefaultProgressCircleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGnE,eAAO,MAAM,4BAA4B,4DACK,0BAA0B,6CAKvE,CAAC"}

package/dts/visualizations/ProgressBar.d.ts

@@ -0,0 +1,136 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedAccessibilityProps, SharedProps, Weight } from '@coinbase/cds-common/types';
+import type { HintMotionBaseProps } from '../motion/types';
+export type ProgressBaseProps = SharedProps &
+  Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
+  Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
+    /** Number between 0-1 representing the progress percentage */
+    progress: number;
+    /** Toggle used to change thickness of progress visualization
+     * @default normal
+     * */
+    weight?: Weight;
+    /**
+     * Toggle used to show a disabled progress visualization
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom progress color.
+     * @default primary
+     */
+    color?: ThemeVars.Color;
+    /**
+     * Callback fired when the progress animation ends.
+     */
+    onAnimationEnd?: () => void;
+    /**
+     * Callback fired when the progress animation starts.
+     */
+    onAnimationStart?: () => void;
+  };
+export type ProgressBarProps = ProgressBaseProps & {
+  /**
+   * Custom styles for the progress bar root.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom class name for the progress bar root.
+   */
+  className?: string;
+  /**
+   * Custom styles for the progress bar.
+   */
+  styles?: {
+    /**
+     * Custom styles for the progress bar root.
+     */
+    root?: React.CSSProperties;
+    /**
+     * Custom styles for the progress.
+     */
+    progress?: React.CSSProperties;
+  };
+  /**
+   * Custom class names for the progress bar.
+   */
+  classNames?: {
+    /**
+     * Class name for the progress bar root.
+     */
+    root?: string;
+    /**
+     * Class name for the progress.
+     */
+    progress?: string;
+  };
+};
+export declare const ProgressBar: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps &
+      Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
+      Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
+        /** Number between 0-1 representing the progress percentage */
+        progress: number;
+        /** Toggle used to change thickness of progress visualization
+         * @default normal
+         * */
+        weight?: Weight;
+        /**
+         * Toggle used to show a disabled progress visualization
+         * @default false
+         */
+        disabled?: boolean;
+        /**
+         * Custom progress color.
+         * @default primary
+         */
+        color?: ThemeVars.Color;
+        /**
+         * Callback fired when the progress animation ends.
+         */
+        onAnimationEnd?: () => void;
+        /**
+         * Callback fired when the progress animation starts.
+         */
+        onAnimationStart?: () => void;
+      } & {
+        /**
+         * Custom styles for the progress bar root.
+         */
+        style?: React.CSSProperties;
+        /**
+         * Custom class name for the progress bar root.
+         */
+        className?: string;
+        /**
+         * Custom styles for the progress bar.
+         */
+        styles?: {
+          /**
+           * Custom styles for the progress bar root.
+           */
+          root?: React.CSSProperties;
+          /**
+           * Custom styles for the progress.
+           */
+          progress?: React.CSSProperties;
+        };
+        /**
+         * Custom class names for the progress bar.
+         */
+        classNames?: {
+          /**
+           * Class name for the progress bar root.
+           */
+          root?: string;
+          /**
+           * Class name for the progress.
+           */
+          progress?: string;
+        };
+      } & React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dts/visualizations/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IArEpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;IAI/B;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;OAEG;gBACS,MAAM;IAClB;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA8FF,CAAC"}

package/dts/visualizations/ProgressBarWithFixedLabels.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { PaddingProps, Placement } from '@coinbase/cds-common/types';
+import { type ProgressBarLabel } from './getProgressBarLabelParts';
+import { type ProgressBaseProps } from './ProgressBar';
+export type ProgressBarWithFixedLabelsProps = Pick<ProgressBaseProps, 'disabled' | 'testID'> & {
+  /** Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. */
+  startLabel?: ProgressBarLabel;
+  /** Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. */
+  endLabel?: ProgressBarLabel;
+  /**
+   * Position of label relative to the bar
+   * @default beside
+   * */
+  labelPlacement?: Extract<Placement, 'above' | 'below' | 'beside'>;
+  /**
+   * Custom styles for the progress bar with fixed labels root.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom class name for the progress bar with fixed labels root.
+   */
+  className?: string;
+  /**
+   * Custom styles for the progress bar with fixed labels.
+   */
+  styles?: {
+    /**
+     * Custom styles for the progress bar with fixed labels root.
+     */
+    root?: React.CSSProperties;
+    /**
+     * Custom styles for the label container.
+     */
+    labelContainer?: React.CSSProperties;
+    /**
+     * Custom styles for the start label.
+     */
+    startLabel?: React.CSSProperties;
+    /**
+     * Custom styles for the end label.
+     */
+    endLabel?: React.CSSProperties;
+  };
+  /**
+   * Custom class names for the progress bar with fixed labels.
+   */
+  classNames?: {
+    /**
+     * Class name for the progress bar with fixed labels root.
+     */
+    root?: string;
+    /**
+     * Class name for the label container.
+     */
+    labelContainer?: string;
+    /**
+     * Class name for the start label.
+     */
+    startLabel?: string;
+    /**
+     * Class name for the end label.
+     */
+    endLabel?: string;
+  };
+};
+export type ProgressBarFixedLabelContainerProps = Omit<
+  ProgressBarWithFixedLabelsProps,
+  'labelPlacement' | 'progress' | 'disabled' | 'style' | 'className'
+> &
+  Pick<PaddingProps, 'paddingBottom' | 'paddingTop'> & {
+    visuallyDisabled: boolean;
+  };
+export type ProgressBarFixedLabelBesideProps = {
+  label: ProgressBarLabel;
+  visuallyDisabled: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+};
+export type ProgressBarFixedLabelProps = {
+  position: 'start' | 'end';
+  label: ProgressBarLabel;
+  visuallyDisabled: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+};
+export declare const ProgressBarWithFixedLabels: React.FC<
+  React.PropsWithChildren<ProgressBarWithFixedLabelsProps>
+>;
+//# sourceMappingURL=ProgressBarWithFixedLabels.d.ts.map

package/dts/visualizations/ProgressBarWithFixedLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAO1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IAC7F,sHAAsH;IACtH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oHAAoH;IACpH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAClE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,+BAA+B,EAC/B,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CACnE,GACC,IAAI,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,GAAG;IACnD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkGF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CA4EzD,CAAC"}

package/dts/visualizations/ProgressBarWithFloatLabel.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { Placement } from '@coinbase/cds-common/types';
+import { type ProgressBarLabel } from './getProgressBarLabelParts';
+import { type ProgressBaseProps } from './ProgressBar';
+export type ProgressBarFloatLabelProps = Pick<
+  ProgressBarWithFloatLabelProps,
+  'label' | 'progress' | 'disabled' | 'labelPlacement' | 'styles' | 'classNames'
+>;
+export type ProgressBarWithFloatLabelProps = Pick<
+  ProgressBaseProps,
+  'progress' | 'disabled' | 'testID'
+> & {
+  /** Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. */
+  label: ProgressBarLabel;
+  /**
+   * Position of label relative to the bar
+   * @default above
+   * */
+  labelPlacement?: Extract<Placement, 'above' | 'below'>;
+  /**
+   * Custom styles for the progress bar with float label root.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom class name for the progress bar with float label root.
+   */
+  className?: string;
+  /**
+   * Custom styles for the progress bar with float label.
+   */
+  styles?: {
+    /**
+     * Custom styles for the progress bar with float label root.
+     */
+    root?: React.CSSProperties;
+    /**
+     * Custom styles for the label container.
+     */
+    labelContainer?: React.CSSProperties;
+    /**
+     * Custom styles for the label.
+     */
+    label?: React.CSSProperties;
+  };
+  /**
+   * Custom class names for the progress bar with float label.
+   */
+  classNames?: {
+    /**
+     * Class name for the progress bar with float label root.
+     */
+    root?: string;
+    /**
+     * Class name for the label container.
+     */
+    labelContainer?: string;
+    /**
+     * Class name for the label.
+     */
+    label?: string;
+  };
+};
+export declare const ProgressBarWithFloatLabel: React.FC<
+  React.PropsWithChildren<ProgressBarWithFloatLabelProps>
+>;
+//# sourceMappingURL=ProgressBarWithFloatLabel.d.ts.map

package/dts/visualizations/ProgressBarWithFloatLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAc5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC9B,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,gBAAgB,GAAG,QAAQ,GAAG,YAAY,CAC/E,CAAC;AAkGF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,QAAQ,CACnC,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAsCxD,CAAC"}

package/dts/visualizations/ProgressCircle.d.ts

@@ -0,0 +1,171 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common';
+import type { ProgressBaseProps } from './ProgressBar';
+export type ProgressCircleBaseProps = ProgressBaseProps & {
+  /**
+   * Toggle used to hide the content node rendered inside the circle.
+   */
+  hideContent?: boolean;
+  /**
+   * @deprecated Use hideContent instead
+   * Toggle used to hide the text rendered inside the circle.
+   */
+  hideText?: boolean;
+  /**
+   * Optional size in px for the visualization.
+   * This is useful if the visualization is used in an HStack.
+   * If this is omitted the visualization will fill the parent width or height.
+   * Since it's a circular visualization it will fill the smaller of the parent width or height
+   */
+  size?: number;
+  /**
+   * Optional component to override the default content rendered inside the circle.
+   */
+  contentNode?: React.ReactNode;
+};
+export type ProgressCircleProps = ProgressCircleBaseProps & {
+  /**
+   * Custom styles for the progress circle root.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom class name for the progress circle root.
+   */
+  className?: string;
+  /**
+   * Custom styles for the progress circle.
+   */
+  styles?: {
+    /**
+     * Custom styles for the progress circle root.
+     */
+    root?: React.CSSProperties;
+    /**
+     * Custom styles for the progress circle svg.
+     */
+    svg?: React.CSSProperties;
+    /**
+     * Custom styles for the background circle.
+     */
+    circle?: React.CSSProperties;
+    /**
+     * Custom styles for the foreground circle.
+     */
+    progress?: React.CSSProperties;
+  };
+  /**
+   * Custom class names for the progress circle.
+   */
+  classNames?: {
+    /**
+     * Class name for the progress circle root.
+     */
+    root?: string;
+    /**
+     * Class name for the progress circle svg.
+     */
+    svg?: string;
+    /**
+     * Class name for the progress circle background circle.
+     */
+    circle?: string;
+    /**
+     * Class name for the progress circle foreground circle.
+     */
+    progress?: string;
+  };
+};
+export type ProgressCircleContentProps = Pick<ProgressCircleBaseProps, 'progress' | 'disabled'> & {
+  /**
+   * Custom text color.
+   * @default fgMuted
+   */
+  color?: ThemeVars.Color;
+};
+export declare const ProgressCircle: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    import('@coinbase/cds-common').SharedProps &
+      Pick<import('../motion/types').HintMotionBaseProps, 'disableAnimateOnMount'> &
+      Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
+        progress: number;
+        weight?: import('@coinbase/cds-common').Weight;
+        disabled?: boolean;
+        color?: ThemeVars.Color;
+        onAnimationEnd?: () => void;
+        onAnimationStart?: () => void;
+      } & {
+        /**
+         * Toggle used to hide the content node rendered inside the circle.
+         */
+        hideContent?: boolean;
+        /**
+         * @deprecated Use hideContent instead
+         * Toggle used to hide the text rendered inside the circle.
+         */
+        hideText?: boolean;
+        /**
+         * Optional size in px for the visualization.
+         * This is useful if the visualization is used in an HStack.
+         * If this is omitted the visualization will fill the parent width or height.
+         * Since it's a circular visualization it will fill the smaller of the parent width or height
+         */
+        size?: number;
+        /**
+         * Optional component to override the default content rendered inside the circle.
+         */
+        contentNode?: React.ReactNode;
+      } & {
+        /**
+         * Custom styles for the progress circle root.
+         */
+        style?: React.CSSProperties;
+        /**
+         * Custom class name for the progress circle root.
+         */
+        className?: string;
+        /**
+         * Custom styles for the progress circle.
+         */
+        styles?: {
+          /**
+           * Custom styles for the progress circle root.
+           */
+          root?: React.CSSProperties;
+          /**
+           * Custom styles for the progress circle svg.
+           */
+          svg?: React.CSSProperties;
+          /**
+           * Custom styles for the background circle.
+           */
+          circle?: React.CSSProperties;
+          /**
+           * Custom styles for the foreground circle.
+           */
+          progress?: React.CSSProperties;
+        };
+        /**
+         * Custom class names for the progress circle.
+         */
+        classNames?: {
+          /**
+           * Class name for the progress circle root.
+           */
+          root?: string;
+          /**
+           * Class name for the progress circle svg.
+           */
+          svg?: string;
+          /**
+           * Class name for the progress circle background circle.
+           */
+          circle?: string;
+          /**
+           * Class name for the progress circle foreground circle.
+           */
+          progress?: string;
+        };
+      } & React.RefAttributes<HTMLDivElement>
+  >
+>;
+//# sourceMappingURL=ProgressCircle.d.ts.map

package/dts/visualizations/ProgressCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChG;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AA+DF,eAAO,MAAM,cAAc;;;;;;;;IAhJzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;OAEG;gBACS,MAAM;IAClB;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAsLF,CAAC"}

package/dts/visualizations/ProgressContainerWithButtons.d.ts

@@ -0,0 +1,6 @@
+import type { ProgressContainerWithButtonsProps } from '@coinbase/cds-common/types/ProgressContainerWithButtonsProps';
+export declare const ProgressContainerWithButtons: ({
+  children,
+  hideIncrease,
+}: ProgressContainerWithButtonsProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=ProgressContainerWithButtons.d.ts.map

package/dts/visualizations/ProgressContainerWithButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressContainerWithButtons.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressContainerWithButtons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,8DAA8D,CAAC;AAKtH,eAAO,MAAM,4BAA4B,GAAI,6BAG1C,iCAAiC,4CAqCnC,CAAC"}

package/dts/visualizations/ProgressTextLabel.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { ProgressBaseProps } from './ProgressBar';
+export type ProgressTextLabelProps = Pick<ProgressBaseProps, 'disabled'> & {
+  value: number;
+  renderLabel?: (num: number, disabled?: boolean) => React.ReactNode;
+  color?: ThemeVars.Color;
+  /**
+   * Custom style for the text label.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom class name for the text label.
+   */
+  className?: string;
+};
+export declare const ProgressTextLabel: React.MemoExoticComponent<
+  ({
+    value,
+    renderLabel,
+    disabled,
+    color,
+    style,
+    className,
+  }: ProgressTextLabelProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=ProgressTextLabel.d.ts.map

package/dts/visualizations/ProgressTextLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressTextLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressTextLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAQjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,iBAAiB,wFACgC,sBAAsB,6CAwCnF,CAAC"}

package/dts/visualizations/VisualizationContainer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { DimensionValue } from '@coinbase/cds-common/types';
+export type VisualizationContainerDimension = {
+  width: number;
+  height: number;
+  circleSize: number;
+};
+export type VisualizationContainerBaseProps = {
+  width: DimensionValue;
+  height: DimensionValue;
+  minHeight?: DimensionValue;
+  children: (dimensions: VisualizationContainerDimension) => React.ReactNode;
+};
+export type VisualizationContainerProps = VisualizationContainerBaseProps;
+export declare const VisualizationContainer: React.FC<VisualizationContainerProps>;
+//# sourceMappingURL=VisualizationContainer.d.ts.map

package/dts/visualizations/VisualizationContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualizationContainer.d.ts","sourceRoot":"","sources":["../../src/visualizations/VisualizationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAMjE,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,CAAC,UAAU,EAAE,+BAA+B,KAAK,KAAK,CAAC,SAAS,CAAC;CAC5E,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,+BAA+B,CAAC;AAK1E,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAgBxE,CAAC"}

package/dts/visualizations/__figma__/ProgressBar.figma.d.ts

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

package/dts/visualizations/__figma__/ProgressBar.figma.d.ts.map

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

package/dts/visualizations/__figma__/ProgressCircle.figma.d.ts

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

package/dts/visualizations/__figma__/ProgressCircle.figma.d.ts.map

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

package/dts/visualizations/getProgressBarLabelParts.d.ts

@@ -0,0 +1,16 @@
+export type ProgressBarLabel =
+  | number
+  | {
+      value: number;
+      render: (num: number, disabled?: boolean) => React.ReactNode;
+    };
+export declare const getProgressBarLabelParts: (label: ProgressBarLabel) =>
+  | {
+      value: number;
+      render?: undefined;
+    }
+  | {
+      value: number;
+      render: (num: number, disabled?: boolean) => React.ReactNode;
+    };
+//# sourceMappingURL=getProgressBarLabelParts.d.ts.map

package/dts/visualizations/getProgressBarLabelParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getProgressBarLabelParts.d.ts","sourceRoot":"","sources":["../../src/visualizations/getProgressBarLabelParts.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN;IACE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D,CAAC;AAEN,eAAO,MAAM,wBAAwB,GAAI,OAAO,gBAAgB;;;;;kBAH5C,MAAM,aAAa,OAAO,KAAK,KAAK,CAAC,SAAS;CAcjE,CAAC"}

package/dts/visualizations/index.d.ts

@@ -0,0 +1,8 @@
+export * from './DefaultProgressCircleContent';
+export * from './getProgressBarLabelParts';
+export * from './ProgressBar';
+export * from './ProgressBarWithFixedLabels';
+export * from './ProgressBarWithFloatLabel';
+export * from './ProgressCircle';
+export * from './ProgressContainerWithButtons';
+//# sourceMappingURL=index.d.ts.map

package/dts/visualizations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visualizations/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC"}

package/esm/AccessibilityAnnouncer/AccessibilityAnnouncer.css

@@ -0,0 +1 @@
+@layer cds{.baseCss-b17wta2u{border:0;-webkit-clip:rect(0px,0px,0px,0px);clip:rect(0px,0px,0px,0px);-webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);display:block;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;visibility:visible;white-space:nowrap;width:1px;}}