@veritone-ce/design-system 2.0.8 → 2.1.0

package/dist/types/src/assets/theme.d.ts

@@ -1,62 +0,0 @@
-import { PaletteColorOptions, SimplePaletteColorOptions, useTheme as muiUseTheme } from '@mui/material';
-import { Theme as MuiTheme, ThemeOptions } from '@mui/material/styles';
-declare module '@mui/material/Button' {
-    interface ButtonPropsVariantOverrides {
-        primary: true;
-        secondary: true;
-        tertiary: true;
-    }
-}
-type Colors = typeof colors;
-declare module '@mui/material/styles' {
-    type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
-        hover: string;
-    };
-    type MiscPaletteColorOptions = Colors['misc'];
-    type TextPaletteColorOptions = Colors['text'];
-    interface TypeText extends TextPaletteColorOptions {
-    }
-    interface PaletteOptions {
-        neutral?: PaletteColorOptions;
-        button?: ButtonPaletteColorOptions;
-        misc?: MiscPaletteColorOptions;
-    }
-    interface Palette {
-        neutral: Pick<Palette['primary'], 'main'>;
-        button: ButtonPaletteColorOptions;
-        misc: MiscPaletteColorOptions;
-    }
-}
-export declare const colors: {
-    brand: {
-        pink: string;
-        blueOne: string;
-        blueTwo: string;
-        warning: string;
-        success: string;
-        error: string;
-        white: string;
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        disabled: string;
-    };
-    button: {
-        primary: string;
-        hover: string;
-    };
-    misc: {
-        background: string;
-        altBackground: string;
-        rowHoverGreyOne: string;
-        rowOn: string;
-        rowOnHoverGreyTwo: string;
-    };
-};
-export type Theme = MuiTheme;
-export declare const useTheme: typeof muiUseTheme;
-export declare let defaultTheme: MuiTheme;
-export declare const createDesignSystemTheme: (newTheme?: ThemeOptions) => Theme;
-export {};

package/dist/types/src/components/AudioSlider/index.d.ts

@@ -1,12 +0,0 @@
-export type AudioSliderProps = {
-    'data-testid'?: string;
-    value: number;
-    onChange?(event: Event, value: number): void;
-    label?: string;
-    max?: number;
-    disabled?: boolean;
-    step?: number;
-    className?: string;
-};
-declare const AudioSlider: (props: AudioSliderProps) => import("react/jsx-runtime").JSX.Element;
-export default AudioSlider;

package/dist/types/src/components/Breadcrumbs/breadcrumbs.theme.d.ts

@@ -1,11 +0,0 @@
-import { Theme } from '@/assets/theme.js';
-declare const breadcrumbs: (theme: Theme) => {
-    styleOverrides: {
-        root: () => {
-            '& .MuiBreadcrumbs-separator': {
-                color: string;
-            };
-        };
-    };
-};
-export default breadcrumbs;

package/dist/types/src/components/Breadcrumbs/index.d.ts

@@ -1,25 +0,0 @@
-import { SxProps, Theme } from '@mui/material';
-import React from 'react';
-export type BreadcrumbsProps = {
-    'data-testid'?: string;
-    links: {
-        to: string;
-        label: React.ReactNode;
-    }[];
-    LinkComponent?: BreadcrumbsLinkComponent;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-export type BreadcrumbsLinkComponentProps = {
-    to: string;
-    children?: React.ReactNode;
-};
-export type BreadcrumbsLinkComponent = React.ComponentType<BreadcrumbsLinkComponentProps>;
-/**
- * - This is the breadcrumbs component that is used in the header
- * - It takes in an array of links and renders them as breadcrumbs
- * - The last link is not clickable
- * - The last link is styled differently
- **/
-declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
-export default Breadcrumbs;

package/dist/types/src/components/Drawer/index.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type DrawerProps = {
-    'data-testid'?: string;
-    open: boolean;
-    children?: React.ReactNode;
-    onClose?: {
-        bivarianceHack(event: Event, reason: 'backdropClick' | 'escapeKeyDown'): void;
-    }['bivarianceHack'];
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const Drawer: (props: DrawerProps) => import("react/jsx-runtime").JSX.Element;
-export default Drawer;

package/dist/types/src/components/ErrorMessage/index.d.ts

@@ -1,8 +0,0 @@
-import { SxProps, Theme } from '@mui/material/styles';
-import React from 'react';
-export type ErrorMessageProps = {
-    children?: React.ReactNode;
-    typographySx?: SxProps<Theme>;
-    sx?: SxProps<Theme>;
-};
-export default function ErrorMessage(props: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/FileUploader/index.d.ts

@@ -1,37 +0,0 @@
-import { SxProps, Theme } from '@mui/material/styles';
-import { Accept } from 'react-dropzone';
-export interface FileState {
-    name: string;
-    uploadProgress: number;
-    isUploaded: boolean;
-    withError: boolean;
-    feedbackText: string;
-}
-export type FileUploaderProps = {
-    'data-testid'?: string;
-    filesState: FileState[];
-    accept: Accept;
-    multiple?: boolean;
-    uploading?: boolean;
-    uploaded?: boolean;
-    onDrop(files: File[]): void;
-    onDelete(fileIndex: number): void;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-export default function FileUploader(props: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
-type FileUploadFn = (f: File) => AsyncGenerator<number>;
-export type UseFileUploaderOptions = {
-    uploadFile: FileUploadFn;
-    onComplete?(f: File): void;
-    onError?(v: Error): void;
-};
-export declare function useFileUploader(options: UseFileUploaderOptions): {
-    files: FileState[];
-    onDrop(acceptedFiles: File[]): void;
-    removeFile: (fileIndex: number) => void;
-    uploading: boolean;
-    uploaded: boolean;
-    uploadFiles(): Promise<PromiseSettledResult<void>[]>;
-};
-export {};

package/dist/types/src/components/FormControlLabel/index.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type FormControlLabelProps = {
-    'data-testid'?: string;
-    label: React.ReactNode;
-    control: React.ReactElement;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const FormControlLabel: (props: FormControlLabelProps) => import("react/jsx-runtime").JSX.Element;
-export default FormControlLabel;

package/dist/types/src/components/LinearProgress/index.d.ts

@@ -1,32 +0,0 @@
-import { SxProps, Theme } from '@mui/material/styles';
-export type LinearProgressProps = {
-    'data-testid'?: string;
-    value: number;
-    /**
-    - The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100.
-    **/
-    itemLoading: string;
-    /**
-    - The name of the item or file loading
-    **/
-    isError?: boolean;
-    /**
-    - Optional prop that can be passed to show error state in bar
-    **/
-    feedbackText?: string;
-    /**
-    - Optional prop that can be passed to show error message
-    **/
-    isUploaded: boolean;
-    /**
-    - Prop that shows whether the file is fully uploaded or not
-    **/
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-/**
-- Use a Linear Progress Bar to show the user that an operation is in progress.
-  This is currently being used in conjuction with the uploader tool
-**/
-declare const LinearProgress: (props: LinearProgressProps) => import("react/jsx-runtime").JSX.Element;
-export default LinearProgress;

package/dist/types/src/components/LinearProgress/linearProgress.theme.d.ts

@@ -1,13 +0,0 @@
-declare const linearProgress: () => {
-    styleOverrides: {
-        root: () => {
-            borderRadius: string;
-            backgroundColor: string;
-            '& .MuiLinearProgress-bar': {
-                backgroundColor: string;
-                borderRadius: string;
-            };
-        };
-    };
-};
-export default linearProgress;

package/dist/types/src/components/Link/index.d.ts

@@ -1,9 +0,0 @@
-import { SxProps, Theme } from '@mui/material/styles';
-import * as React from 'react';
-export type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> & {
-    'data-testid'?: string;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const Link: ({ sx, className, ...restProps }: LinkProps) => import("react/jsx-runtime").JSX.Element;
-export default Link;

package/dist/types/src/components/List/index.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type ListProps = {
-    'data-testid'?: string;
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
-export default List;

package/dist/types/src/components/ListItem/index.d.ts

@@ -1,10 +0,0 @@
-import { SxProps, Theme } from '@mui/material/styles';
-import * as React from 'react';
-export type ListItemProps = {
-    'data-testid'?: string;
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const ListItem: (props: ListItemProps) => import("react/jsx-runtime").JSX.Element;
-export default ListItem;

package/dist/types/src/components/ListItemButton/index.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type ListItemButtonProps = {
-    'data-testid'?: string;
-    disabled?: boolean;
-    selected?: boolean;
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const ListItemButton: (props: ListItemButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default ListItemButton;

package/dist/types/src/components/ListItemText/index.d.ts

@@ -1,10 +0,0 @@
-import { SxProps, Theme } from '@mui/material/styles';
-import * as React from 'react';
-export type ListItemTextProps = {
-    'data-testid'?: string;
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const ListItemText: (props: ListItemTextProps) => import("react/jsx-runtime").JSX.Element;
-export default ListItemText;

package/dist/types/src/components/Panel/index.d.ts

@@ -1,17 +0,0 @@
-import React, { ReactNode } from 'react';
-export type PanelProps = {
-    'data-testid'?: string;
-    title: string;
-    open: boolean;
-    size: 'big' | 'medium' | 'small';
-    children?: ReactNode;
-    onClose?(): void;
-    className?: string;
-};
-declare const Panel: (props: PanelProps) => import("react/jsx-runtime").JSX.Element;
-export default Panel;
-export type PanelContentProps = {
-    content: React.ReactNode;
-    actions?: ReactNode;
-};
-export declare function PanelContent(props: PanelContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/ProgressIndicator/DefaultProgress.d.ts

@@ -1,3 +0,0 @@
-import type { SharedProgressIndicatorProps } from './index.js';
-declare const DefaultProgress: (props: SharedProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export default DefaultProgress;

package/dist/types/src/components/ProgressIndicator/MLProgress.d.ts

@@ -1,6 +0,0 @@
-import type { SharedProgressIndicatorProps } from './index.js';
-type MLProgressProps = SharedProgressIndicatorProps & {
-    type: 'medium' | 'large';
-};
-declare const MLProgress: (props: MLProgressProps) => import("react/jsx-runtime").JSX.Element;
-export default MLProgress;

package/dist/types/src/components/ProgressIndicator/index.d.ts

@@ -1,20 +0,0 @@
-export type SharedProgressIndicatorProps = {
-    'data-testid'?: string;
-    itemLoading?: string;
-    value?: number;
-    /**
-     * The variant to use.
-     * Use indeterminate when there is no progress value.
-     * @default 'indeterminate'
-     */
-    variant?: 'determinate' | 'indeterminate';
-    className?: string;
-};
-export type ProgressIndicatorProps = SharedProgressIndicatorProps & {
-    type?: 'default' | 'medium' | 'large';
-};
-/**
-- Use a progress indicator to show the user that an operation is in progress.
-**/
-declare const ProgressIndicator: ({ type, ...props }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export default ProgressIndicator;

package/dist/types/src/components/Select/index.d.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-type SelectValue = string | number;
-type ItemData<V extends SelectValue> = {
-    title?: string;
-    name: string;
-    key?: string;
-    value: V;
-};
-export type SelectProps<V extends SelectValue> = {
-    'data-testid'?: string;
-    label: React.ReactNode;
-    items: ItemData<V>[];
-    helperText?: string;
-    error?: string;
-    disabled?: boolean;
-    fullWidth?: boolean;
-    /**
-     * The default value. Use when the component is not controlled.
-     */
-    defaultValue?: V;
-    /**
-     * The `input` value. Providing an empty string will select no options.
-     * Set to an empty string `''` if you don't want any of the available options to be selected.
-     *
-     * If the value is an object it must have reference equality with the option in order to be selected.
-     * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
-     */
-    value?: V | '';
-    open?: boolean;
-    onChange?(event: SelectChangeEvent<V>, child: React.ReactNode): void;
-    onClose?(event: React.SyntheticEvent): void;
-    className?: string;
-};
-export type SelectChangeEvent<V = string> = (Event & {
-    target: {
-        value: V;
-        name: string;
-    };
-}) | React.ChangeEvent<HTMLInputElement>;
-declare function Select<V extends SelectValue>(props: SelectProps<V>): import("react/jsx-runtime").JSX.Element;
-export default Select;

package/dist/types/src/components/Select/select.theme.d.ts

@@ -1,52 +0,0 @@
-import { Theme } from '@/assets/theme.js';
-declare const selectTheme: (theme: Theme) => {
-    defaultProps: {
-        displayEmpty: boolean;
-    };
-    styleOverrides: {
-        root: () => {
-            '&.MuiOutlinedInput-root': {
-                '& .MuiSelect-outlined': {
-                    border: string;
-                };
-                '&.Mui-focused': {
-                    '& .MuiOutlinedInput-notchedOutline': {
-                        borderColor: string;
-                    };
-                };
-                '&.Mui-error': {
-                    '& .MuiSelect-outlined': {
-                        color: string;
-                        border: string;
-                        fontSize: string;
-                        lineHeight: string;
-                    };
-                    '& .MuiOutlinedInput-notchedOutline': {
-                        borderColor: string;
-                    };
-                    '& .MuiSelect-iconOutlined': {
-                        color: string;
-                    };
-                };
-                '&.Mui-disabled': {
-                    '& .MuiSelect-iconOutlined': {
-                        color: string;
-                    };
-                    '& .MuiSelect-outlined': {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                        WebkitTextFillColor: string;
-                    };
-                    '& .MuiOutlinedInput-notchedOutline': {
-                        border: string;
-                    };
-                };
-                '& .MuiSelect-iconOutlined': {
-                    color: string;
-                };
-            };
-        };
-    };
-};
-export default selectTheme;

package/dist/types/src/components/StatusChip/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const COMPLETE = "complete";
-export declare const PROCESSING = "processing";
-export declare const ERROR = "error";

package/dist/types/src/components/StatusChip/index.d.ts

@@ -1,30 +0,0 @@
-import { ChipProps as MuiChipProps } from '@mui/material';
-import React, { MouseEventHandler } from 'react';
-export type StatusChipProps = {
-    'data-testid'?: string;
-    /**
-      Determines stock color. Used as label if no label prop is provided.
-    **/
-    status: 'complete' | 'processing' | 'error' | 'custom';
-    /**
-      If no label prop provided, status prop is used as chip label.
-    **/
-    label?: React.ReactNode;
-    clickable?: boolean;
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    disabled?: boolean;
-    color?: MuiChipProps['color'];
-    className?: string;
-};
-/**
-- Use a StatusChip to display the status of some action to the user.
-- Veritone stock options derive from the required `status` prop and include Complete, Processing, or Error. Their corresponding colors derive from Veritone's Design System guidelines.
-- To override Stock Option labels, but retain corresponding chip color, use the `label` prop.
-- To override Stock Option colors, but retain corresponding label, either use the `color` prop (for MUI stock color options) **OR** use the `coloroverride` prop (for full color customization).
-- To fully customize StatusChip:
-    - Set `status` prop to "custom";
-    - Pass your custom string to `label` prop;
-    - Pass an MUI stock color option to `color` prop **OR** pass a custom color Hex Value to `coloroverride` prop.
-**/
-declare const StatusChip: (props: StatusChipProps) => import("react/jsx-runtime").JSX.Element;
-export default StatusChip;

package/dist/types/src/components/StatusChip/statusChip.theme.d.ts

@@ -1,4 +0,0 @@
-import { Theme } from '@/assets/theme.js';
-import { Components } from '@mui/material';
-declare const statusChipTheme: (theme: Theme) => Components['MuiChip'];
-export default statusChipTheme;

package/dist/types/src/components/Step/index.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type StepProps = {
-    'data-testid'?: string;
-    /**
-     * Sets the step as active. Is passed to child components.
-     */
-    active?: boolean;
-    /**
-     * Mark the step as completed. Is passed to child components.
-     */
-    completed?: boolean;
-    /**
-     * If `true`, the step is disabled, will also disable the button if
-     * `StepButton` is a child of `Step`. Is passed to child components.
-     */
-    disabled?: boolean;
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const Step: (props: StepProps) => import("react/jsx-runtime").JSX.Element;
-export default Step;

package/dist/types/src/components/StepLabel/index.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type StepLabelProps = {
-    'data-testid'?: string;
-    /**
-     * In most cases will simply be a string containing a title for the label.
-     */
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-declare const StepLabel: (props: StepLabelProps) => import("react/jsx-runtime").JSX.Element;
-export default StepLabel;

package/dist/types/src/components/Stepper/index.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-export type StepperProps = {
-    'data-testid'?: string;
-    /**
-     * Set the active step (zero based index).
-     * Set to -1 to disable all the steps.
-     * @default 0
-     */
-    activeStep?: number;
-    /**
-     * Two or more `<Step />` components.
-     */
-    children?: React.ReactNode;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-/**
-  The Stepper is used for highlighting where a user is in a progression of steps.
-**/
-declare const Stepper: (props: StepperProps) => import("react/jsx-runtime").JSX.Element;
-export default Stepper;

package/dist/types/src/components/Stepper/stepper.theme.d.ts

@@ -1,50 +0,0 @@
-import { Theme } from '@/assets/theme.js';
-declare const stepperTheme: (theme: Theme) => {
-    MuiStepConnector: {
-        styleOverrides: {
-            line: {
-                borderColor: string;
-            };
-        };
-    };
-    MuiStep: {
-        defaultProps: {
-            completed: boolean;
-        };
-    };
-    MuiStepIcon: {
-        styleOverrides: {
-            root: {
-                borderRadius: string;
-                height: string;
-                width: string;
-                outline: string;
-                color: string;
-                text: {
-                    fill: string;
-                };
-                '&.Mui-active': {
-                    outline: string;
-                    color: string;
-                    text: {
-                        fill: string;
-                    };
-                };
-            };
-        };
-    };
-    MuiStepLabel: {
-        styleOverrides: {
-            label: {
-                fontWeight: string;
-                '&.Mui-active': {
-                    fontWeight: string;
-                };
-            };
-            iconContainer: {
-                padding: string;
-            };
-        };
-    };
-};
-export default stepperTheme;

package/dist/types/src/components/Table/AutoTable/common.d.ts

@@ -1,31 +0,0 @@
-import { ColumnDef as RTColumnDef, PaginationState, Row, RowSelectionState, SortingState, RowData } from '@tanstack/react-table';
-import type { ColumnDef, ColumnHelper } from './types.js';
-import React from 'react';
-export declare function createColumnHelper<TData extends RowData, TMeta = unknown>(): ColumnHelper<TData, TMeta>;
-export type AutoTableHookOptions<TData, TMeta = unknown> = {
-    data: TData[];
-    columns: ColumnDef<TData, TMeta>[];
-    meta?: TMeta;
-    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
-    sorting: SortingState;
-    enableSorting: boolean;
-    onSortingChange(newSorting: SortingState): void;
-    manualSorting?: boolean;
-    rowSelection: RowSelectionState;
-    enableRowSelection: boolean;
-    onRowSelectionChange(newRowSelection: RowSelectionState): void;
-    pagination: PaginationState;
-    enablePagination: boolean;
-    onPageChange(newPage: number): void;
-    onRowsPerPageChange(newRowsPerPage: number): void;
-    manualPagination?: boolean;
-    manualRowCount?: number;
-};
-export declare function useAutoTable<TData, TMeta = unknown>(options: AutoTableHookOptions<TData, TMeta>): import("@tanstack/react-table").Table<TData>;
-export declare function mapColumnDefs<TData, TMeta>(columnDefs: ColumnDef<TData, TMeta>[]): RTColumnDef<TData>[];
-export declare function mapColumnDef<TData, TMeta, VData = unknown>(columnDef: ColumnDef<TData, TMeta, VData>): RTColumnDef<TData, VData>;
-export type ErrorContainerProps = {
-    error: boolean | string;
-};
-export type ErrorContainer = React.ComponentType<ErrorContainerProps>;
-export declare const DefaultErrorContainer: ErrorContainer;

package/dist/types/src/components/Table/AutoTable/controlled.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { SxProps, Theme } from '@mui/material/styles';
-import { AutoTableHookOptions, type ErrorContainer as ErrorContainerType } from './common.js';
-export type ControlledAutoTableProps<TData, TMeta = unknown> = AutoTableHookOptions<TData, TMeta> & {
-    stickyHeader?: boolean | {
-        offset: number;
-    };
-    loading?: boolean;
-    zeroStateMessage?: React.ReactNode;
-    error?: boolean | string;
-    ErrorContainer?: ErrorContainerType;
-    sx?: SxProps<Theme>;
-    className?: string;
-};
-export default function ControlledAutoTable<TData, TMeta = unknown>({ stickyHeader, loading, zeroStateMessage, error, ErrorContainer, sx, className, ...options }: ControlledAutoTableProps<TData, TMeta>): import("react/jsx-runtime").JSX.Element;