@protonradio/proton-ui 0.5.3 → 0.6.0

package/dist/proton-ui.es.d.ts

@@ -20,6 +20,14 @@ import { TableStateProps } from 'react-stately';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
+/**
+ * Converts an RGB array to a CSS string representation.
+ * @param rgb - The RGB array to convert.
+ * @param opacity - Optional opacity value.
+ * @returns A CSS string representation of the RGB array, using `rgb()`, or `rgba()` if an opacity value is provided.
+ */
+export declare const arrayToRgbString: (rgb: RGBArray, opacity?: number) => string;
+
 export declare const Badge: ({ variant, children, ...props }: BadgeProps) => JSX_2.Element;
 
 export declare interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -111,7 +119,11 @@ export declare const BRAND: {
     SECONDARY: string;
 };
 
-export declare function Button({ variant, href, onPress, type, isDisabled, dataTestId, children, }: ButtonProps): JSX_2.Element;
+/**
+ * A customizable button component that can render as either a button or anchor element
+ * @interface ButtonProps
+ */
+export declare function Button({ variant, href, onPress, type, isDisabled, "data-testid": testId, children, }: ButtonProps): JSX_2.Element;
 
 export declare function ButtonGroup(props: ButtonGroupProps): JSX_2.Element;
 
@@ -151,9 +163,6 @@ declare interface ButtonGroupProps {
     children?: React.ReactNode;
 }
 
-/** Properties for the Button component
- * @interface ButtonProps
- */
 declare interface ButtonProps {
     /** The button's visual aesthetic
      * @param {ButtonVariant} variant
@@ -178,7 +187,7 @@ declare interface ButtonProps {
     /** The test ID for the button
      * @param {string} dataTestId
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /** The content to display within the button
      * @param {React.ReactNode} children
      */
@@ -191,6 +200,8 @@ export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
 export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
+export declare function csx(...classnames: unknown[]): string;
+
 export declare const DANGER: {
     SUPER_DARK: string;
     DARK: string;
@@ -225,6 +236,19 @@ export declare const GRAYSCALE: {
     BORDER: string;
 };
 
+/**
+ * Handles internal navigation clicks by preventing default browser behavior and
+ * programmatically updating the URL and history state.
+ *
+ * @param e - The click event from the anchor element
+ * @param to - The destination path to navigate to
+ *
+ * @remarks
+ * - Converts relative paths to absolute by prepending "/" if needed
+ * - Updates browser history using pushState and dispatches a popstate event
+ */
+export declare const handleInternalNavigation: (e: React.MouseEvent<HTMLAnchorElement>, to: string) => void;
+
 export declare function Icon(props: Omit<IconProps, "svgContent">): JSX_2.Element;
 
 declare type IconID = "external-link" | "caret-down";
@@ -244,6 +268,19 @@ declare interface IconProps {
     color?: string;
 }
 
+/**
+ * [isUrlExternal] - determine if passed absolute url is external to the current domain.
+ */
+export declare const isUrlExternal: (url: any) => boolean;
+
+/**
+ * Lightens an RGB color by a specified factor.
+ * @param rgb - The RGB color array to lighten.
+ * @param factor - The factor between 0 (darker) - 1 (lighter) by which to transform the color.
+ * @returns The lightened RGB color array, RGB values are clamped to 42 (dark) - 179 (light).
+ */
+export declare const lightenRGBColor: (rgb: RGBArray, factor: number) => RGBArray;
+
 export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
 
 /**
@@ -437,6 +474,61 @@ export declare const WARNING: {
     SUPER_LIGHT: string;
 };
 
+/**
+ * A waveform visualization component that displays audio data with interactive features.
+ *
+ * @component
+ * @interface WaveformProps
+ *
+ * @returns {JSX.Element} A waveform visualization with optional timestamps and interactive features
+ */
+export declare function Waveform({ data: waveformData, resolution, startDuration, endDuration, currentTime, showTimestamps, totalDuration, onClick, timestampColor: timestampColorProp, "data-testid": testId, }: WaveformProps): JSX_2.Element;
+
+declare interface WaveformProps {
+    /**
+     * Array of normalized amplitude values (0-1) representing the waveform.
+     * If not provided, uses a sample sine wave.
+     */
+    data?: number[];
+    /**
+     * Total duration of the audio in seconds.
+     */
+    totalDuration: number;
+    /**
+     * Current playback position in seconds.
+     */
+    currentTime?: number;
+    /**
+     * Width in pixels of each waveform bar.
+     */
+    resolution?: number;
+    /**
+     * Start time to display from in seconds.
+     */
+    startDuration?: number;
+    /**
+     * End time to display until in seconds.
+     */
+    endDuration?: number;
+    /**
+     * Whether to show timestamp markers.
+     */
+    showTimestamps?: boolean;
+    /**
+     * Click handler that receives the clicked position (0-1) and event.
+     */
+    onClick?: (position: number, e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Custom color for timestamp text backgrounds.
+     * Will use theme color by default.
+     */
+    timestampColor?: string;
+    /**
+     * Test ID for testing purposes.
+     */
+    "data-testid"?: string;
+}
+
 export { }