@protonradio/proton-ui 0.5.4 → 0.6.0

package/README.md

@@ -1,50 +1,50 @@
-# Proton UI
-
-![](./.readme.gif)
-
-```
-npm run storybook
-```
-
-### Publishing Updates to NPM
-
-```
-npm run build
-npm version <new_version>  // increment version in package.json accordingly using semver
-npm publish
-```
-
-### Themes
-
-This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
-
-#### Adding a Theme
-
-The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
-
-When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
-
-```jsx
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider theme={THEMES.DARK}>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-#### Styling for a theme
-
-To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
-
-For example, to apply a style to the dark theme, you can use the following css.
-```css
-.proton-ui__theme--dark .myComponent {
-  background-color: red;
-}
-```
-
-### Recommended Reading
-
-- https://www.gabe.pizza/notes-on-component-libraries/
+# Proton UI
+
+![](./.readme.gif)
+
+```
+npm run storybook
+```
+
+### Publishing Updates to NPM
+
+```
+npm run build
+npm version <new_version>  // increment version in package.json accordingly using semver
+npm publish
+```
+
+### Themes
+
+This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
+
+#### Adding a Theme
+
+The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
+
+When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
+
+```jsx
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+```
+
+#### Styling for a theme
+
+To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
+
+For example, to apply a style to the dark theme, you can use the following css.
+```css
+.proton-ui__theme--dark .myComponent {
+  background-color: red;
+}
+```
+
+### Recommended Reading
+
+- https://www.gabe.pizza/notes-on-component-libraries/

package/dist/icons.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <symbol id="external-link" viewBox="0 0 512 512">
-      <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
-    </symbol>
-
-    <symbol id="caret-down" viewBox="0 0 512 512">
-      <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
-    </symbol>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="external-link" viewBox="0 0 512 512">
+      <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+    </symbol>
+
+    <symbol id="caret-down" viewBox="0 0 512 512">
+      <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
+    </symbol>
+  </defs>
 </svg>

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, ...props }: 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;
 
@@ -152,24 +164,32 @@ declare interface ButtonGroupProps {
 }
 
 declare interface ButtonProps {
-    /**
-     * The button's visual aesthetic.
+    /** The button's visual aesthetic
+     * @param {ButtonVariant} variant
      */
     variant?: ButtonVariant;
-    /**
-     * Should the button be non-interactive?
+    /** Should the button be non-interactive?
+     * @param {boolean} isDisabled
      */
     isDisabled?: boolean;
-    /**
-     * The URL that the button should link to. Turns the element into an `a` tag.
+    /** The URL that the button should link to. Turns the element into an `a` tag
+     * @param {string} href
      */
     href?: string;
-    /**
-     *  Called when the button is pressed (on release, not keydown).
+    /** Called when the button is pressed (on release, not keydown)
+     * @param {(e: PressEvent) => void} onPress
      */
     onPress?: (e: PressEvent) => void;
-    /**
-     * The content to display within the button.
+    /** The type of button
+     * @param {"button" | "submit" | "reset"} type
+     */
+    type?: "button" | "submit" | "reset";
+    /** The test ID for the button
+     * @param {string} dataTestId
+     */
+    "data-testid"?: string;
+    /** The content to display within the button
+     * @param {React.ReactNode} children
      */
     children?: React.ReactNode;
 }
@@ -180,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;
@@ -214,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";
@@ -233,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;
 
 /**
@@ -269,69 +317,6 @@ export declare type RGBArray = [number, number, number];
 
 export { Row }
 
-export declare const SearchInput: default_2.FC<SearchInputProps>;
-
-/** Properties for the SearchInput component
- * @interface SearchInputProps
- */
-declare interface SearchInputProps {
-    /**
-     * The controlled value of the search input.
-     * If you provide a value, you should typically also provide an onChange handler to update it.
-     * @param {string} value
-     */
-    defaultValue?: string;
-    /**
-     * Should the browser's autocomplete be enabled?
-     * @param {boolean} autoComplete
-     */
-    autoComplete?: boolean;
-    /**
-     * The name attribute of the input element.
-     * @param {string} name
-     */
-    name?: string;
-    /**
-     * The placeholder text to display when the input is empty.
-     * @param {string} placeholder
-     */
-    placeholder?: string;
-    /**
-     * Should the clear button be shown when there is text?
-     * @param {boolean} isClearable
-     */
-    isClearable?: boolean;
-    /**
-     * Called when the clear button is clicked.
-     * @param {() => void} onClear
-     */
-    onClear?: () => void;
-    /**
-     * Called when the input value changes. Required when using the input as a controlled component.
-     * @param {(event: { target: { value: string } }) => void} onChange
-     */
-    onChange?: (event: {
-        target: {
-            value: string;
-        };
-    }) => void;
-    /**
-     * URL search parameter key to sync the input value with.
-     * @param {string} urlSearchParam
-     */
-    urlSearchParam?: string;
-    /**
-     * Error state that changes the input's visual style.
-     * @param {React.ReactNode | string} error
-     */
-    error?: default_2.ReactNode | string;
-    /**
-     * Test ID for the component.
-     * @param {string} data-testid
-     */
-    "data-testid"?: string;
-}
-
 export { Section }
 
 export declare const Select: {
@@ -489,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 { }