@veritone-ce/design-system 2.8.14-next.2.0 → 2.8.14

package/dist/esm/unstable/extras/forms/select.js

@@ -0,0 +1,49 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useController } from 'react-hook-form';
+import { extractControllerProps, useFormErrorMessage } from './shared.js';
+import '../../../Select/controlled.js';
+import Select from '../../../Select/uncontrolled.js';
+import 'react';
+import FormControl from '../../../FormControl/index.js';
+
+function formSelectFactory(Component) {
+  return function FormSelect2(props) {
+    const { controllerProps, formControlProps, inputProps } = extractControllerProps(props);
+    const { field, fieldState } = useController(controllerProps);
+    const { onChange: propsOnChange, ...restInputProps } = inputProps;
+    const { onChange, ref: _ref, ...restFieldProps } = field;
+    const errorMessage = useFormErrorMessage(fieldState.error);
+    const UntypedComponent = Component;
+    return /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        disabled: field.disabled,
+        ...formControlProps,
+        error: errorMessage,
+        children: /* @__PURE__ */ jsx(
+          UntypedComponent,
+          {
+            ...restInputProps,
+            ...restFieldProps,
+            value: field.value,
+            onChange: (e, newValue) => {
+              onChange({
+                ...e,
+                target: {
+                  ...e.target,
+                  value: newValue
+                }
+              });
+              propsOnChange?.(e, newValue);
+            }
+          }
+        )
+      }
+    );
+  };
+}
+const FormSelect = formSelectFactory(Select);
+
+export { FormSelect, formSelectFactory };

package/dist/esm/unstable/extras/forms/shared.js

@@ -0,0 +1,59 @@
+'use strict';
+'use client';
+import { useMemo } from 'react';
+
+function useFormErrorMessage(error) {
+  return useMemo(() => {
+    let errorMessage = void 0;
+    if (!error)
+      return errorMessage;
+    errorMessage = "Invalid";
+    if (error.type === "required") {
+      errorMessage = "Field is required";
+    }
+    if (error.message) {
+      errorMessage = error.message;
+    }
+    return errorMessage;
+  }, [error]);
+}
+function extractControllerProps(props) {
+  const {
+    // controller props
+    name,
+    rules,
+    shouldUnregister,
+    defaultValue,
+    control,
+    disabled,
+    // form control props
+    label,
+    helpLabel,
+    error,
+    placement,
+    className,
+    style,
+    // input props
+    ...rest
+  } = props;
+  const controllerProps = {
+    name,
+    rules,
+    shouldUnregister,
+    defaultValue,
+    control,
+    disabled
+  };
+  const formControlProps = {
+    label,
+    helpLabel,
+    error,
+    placement,
+    disabled,
+    className,
+    style
+  };
+  return { controllerProps, formControlProps, inputProps: rest };
+}
+
+export { extractControllerProps, useFormErrorMessage };

package/dist/esm/unstable/extras/forms/textarea.js

@@ -0,0 +1,24 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useController } from 'react-hook-form';
+import { extractControllerProps, useFormErrorMessage } from './shared.js';
+import FormControl from '../../../FormControl/index.js';
+import Textarea from '../../../Textarea/index.js';
+
+function FormTextarea(props) {
+  const { controllerProps, formControlProps, inputProps } = extractControllerProps(props);
+  const { field, fieldState } = useController(controllerProps);
+  const errorMessage = useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsx(Textarea, { ...inputProps, ...field, value: field.value ?? "" })
+    }
+  );
+}
+
+export { FormTextarea };

package/dist/esm/unstable/extras/forms/upload.js

@@ -0,0 +1,100 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useController } from 'react-hook-form';
+import { extractControllerProps, useFormErrorMessage } from './shared.js';
+import FormControl from '../../../FormControl/index.js';
+import { UploadDropzone, UploadList, FILE_STATES } from '../../../FileUploader/controlled.js';
+
+function FormUploadDropzone(props) {
+  const { controllerProps, formControlProps, inputProps } = extractControllerProps(
+    props
+  );
+  const { onDrop, ...restInputProps } = inputProps;
+  const { field, fieldState } = useController(
+    controllerProps
+  );
+  const { onChange, ref: _ref, ...restFieldProps } = field;
+  const errorMessage = useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsx(
+        UploadDropzone,
+        {
+          ...restInputProps,
+          ...restFieldProps,
+          onDrop: (files, rejections, e) => {
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                // append
+                value: [
+                  ...field.value,
+                  ...files
+                ]
+              }
+            });
+            onDrop?.(files, rejections, e);
+          }
+        }
+      )
+    }
+  );
+}
+function FormUploadList(props) {
+  const { controllerProps, formControlProps, inputProps } = extractControllerProps(
+    props
+  );
+  const { onAbort, state, ...restInputProps } = inputProps;
+  const { field, fieldState } = useController(
+    controllerProps
+  );
+  const { onChange, ref: _ref, ...restFieldProps } = field;
+  const errorMessage = useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsx(
+    FormControl,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsx(
+        UploadList,
+        {
+          ...restInputProps,
+          ...restFieldProps,
+          items: field.value.map((file, i) => {
+            const status = Array.isArray(state) ? state[i] : typeof state === "object" && "state" in state ? state : {
+              state
+            };
+            return {
+              file,
+              ...status ?? {
+                state: FILE_STATES.ADDED,
+                progress: 0
+              }
+            };
+          }),
+          onAbort: (item, e) => {
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                value: field.value.filter(
+                  (file) => file !== item.file
+                )
+              }
+            });
+            onAbort?.(item, e);
+          }
+        }
+      )
+    }
+  );
+}
+
+export { FormUploadDropzone, FormUploadList };

package/dist/esm/unstable/index.js

@@ -0,0 +1,6 @@
+'use strict';
+export { Breadcrumbs, ButtonBreadcrumb, CustomBreadcrumb, LinkBreadcrumb, SeparatorBreadcrumb } from './Breadcrumbs/index.js';
+export { default as Card } from './Card/index.js';
+export { default as LinearProgress } from './LinearProgress/index.js';
+export { Tab, default as Tabs } from './Tabs/index.js';
+export { createLinkBreadcrumbComponent } from './Breadcrumbs/factory.js';

package/dist/esm/utils/capitalize.js

@@ -0,0 +1,3 @@
+'use strict';
+import { unstable_capitalize } from '@mui/utils';
+export { unstable_capitalize as default } from '@mui/utils';

package/dist/esm/utils/isNil.js

@@ -0,0 +1,6 @@
+'use strict';
+function isNil(value) {
+  return value == null;
+}
+
+export { isNil };

package/dist/types/Accordion/Accordion.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { type ResolvablePaletteValue, type PaletteColor } from '../styles/index.js';
+export type AccordionProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> & {
+    /**
+     * Title displayed in the accordion header
+     */
+    title: React.ReactNode;
+    /**
+     * Background color for the accordion header
+     */
+    palette?: ResolvablePaletteValue<PaletteColor>;
+    /**
+     * Whether the accordion is expanded by default
+     * This is ignored when used inside an AccordionGroup
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Unique ID for the accordion when used in an AccordionGroup
+     * If not provided, a generated ID will be used
+     */
+    id?: string;
+    /**
+     * Content to be displayed when the accordion is expanded
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional test id for testing
+     */
+    'data-testid'?: string;
+    /**
+     * Additional class name for the accordion header
+     */
+    headerClassName?: string;
+    /**
+     * Additional class name for the accordion content
+     */
+    contentClassName?: string;
+};
+declare const Accordion: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "title"> & {
+    /**
+     * Title displayed in the accordion header
+     */
+    title: React.ReactNode;
+    /**
+     * Background color for the accordion header
+     */
+    palette?: string | undefined;
+    /**
+     * Whether the accordion is expanded by default
+     * This is ignored when used inside an AccordionGroup
+     */
+    defaultExpanded?: boolean | undefined;
+    /**
+     * Unique ID for the accordion when used in an AccordionGroup
+     * If not provided, a generated ID will be used
+     */
+    id?: string | undefined;
+    /**
+     * Content to be displayed when the accordion is expanded
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional test id for testing
+     */
+    'data-testid'?: string | undefined;
+    /**
+     * Additional class name for the accordion header
+     */
+    headerClassName?: string | undefined;
+    /**
+     * Additional class name for the accordion content
+     */
+    contentClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Accordion;

package/dist/types/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type AccordionGroupProps = React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The initially expanded accordion ID (optional)
+     */
+    defaultActiveId?: string | null;
+    /**
+     * Allow all accordions to be closed
+     * If false, at least one accordion will always be open
+     */
+    allowAllClosed?: boolean;
+    /**
+     * Children accordions to be controlled
+     */
+    children: React.ReactNode;
+    /**
+     * Optional test id for testing
+     */
+    'data-testid'?: string;
+};
+declare const AccordionGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The initially expanded accordion ID (optional)
+     */
+    defaultActiveId?: string | null | undefined;
+    /**
+     * Allow all accordions to be closed
+     * If false, at least one accordion will always be open
+     */
+    allowAllClosed?: boolean | undefined;
+    /**
+     * Children accordions to be controlled
+     */
+    children: React.ReactNode;
+    /**
+     * Optional test id for testing
+     */
+    'data-testid'?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default AccordionGroup;

package/dist/types/Accordion/Context.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" resolution-mode="require"/>
+export type AccordionGroupContextType = {
+    activeAccordionId: string | null;
+    setActiveAccordionId: (id: string | null) => void;
+};
+export declare const defaultContextValue: AccordionGroupContextType;
+export declare const AccordionGroupContext: import("react").Context<AccordionGroupContextType>;
+export declare const useAccordionGroup: () => AccordionGroupContextType;
+export declare const useIsInsideAccordionGroup: () => boolean;
+/**
+ * Hook to manage accordion state logic, handling both group and individual accordion states
+ * @param id - The ID of the accordion
+ * @param defaultExpanded - Whether the accordion is expanded by default (when not in a group)
+ * @returns Object containing isExpanded state and toggle function
+ */
+export declare const useAccordionState: (id: string, defaultExpanded?: boolean) => {
+    isExpanded: boolean;
+    toggleAccordion: () => void;
+};

package/dist/types/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Accordion.js";
+export { default as AccordionGroup } from "./AccordionGroup.js";
+export { AccordionGroupContext, useAccordionGroup, useIsInsideAccordionGroup, useAccordionState } from "./Context.js";

package/dist/types/Alert/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
+export type AlertProps = {
+    label?: React.ReactNode;
+    text?: React.ReactNode;
+    action?: React.ReactNode;
+    severity?: AlertSeverity;
+    onClose?(): void;
+    'data-testid'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const Alert: ({ severity, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/types/Badge/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type PaletteSurfaceColors, type ResolvablePaletteValue } from '../styles/index.js';
+export type BadgeVariant = 'primary' | 'secondary';
+export type BadgePalette = ResolvablePaletteValue<PaletteSurfaceColors>;
+export type BadgeProps = {
+    label: React.ReactNode;
+    disabled?: boolean;
+    variant?: BadgeVariant;
+    children?: React.ReactNode;
+    palette?: BadgePalette;
+    /**
+     * Only applies when `label` is a number. When `label` is a number and larger than `max`,
+     * the badge will display "`max`+". If `label` is not a number, `max` is ignored.
+     */
+    max?: number;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare function Badge({ palette, variant, disabled, ...props }: Readonly<BadgeProps>): import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/types/Button/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type PaletteActionVariantsColors, type ResolvablePaletteValue } from '../styles/index.js';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = 'large' | 'small';
+export type ButtonPalette = ResolvablePaletteValue<PaletteActionVariantsColors>;
+export type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
+    variant?: ButtonVariant;
+    palette?: ButtonPalette;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    active?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    'data-testid'?: string;
+};
+declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    variant?: ButtonVariant | undefined;
+    palette?: PaletteActionVariantsColors | import("../styles/css-vars.js").RecursiveStringObject<PaletteActionVariantsColors> | undefined;
+    size?: ButtonSize | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    active?: boolean | undefined;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/types/Checkbox/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'type'> & {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    label?: React.ReactNode;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?(event: React.ChangeEvent<HTMLInputElement>, checked: boolean): void;
+    'data-testid'?: string;
+    'data-pendo'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    onThumbnail?: boolean;
+};
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    defaultChecked?: boolean | undefined;
+    checked?: boolean | undefined;
+    label?: React.ReactNode;
+    indeterminate?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?(event: React.ChangeEvent<HTMLInputElement>, checked: boolean): void;
+    'data-testid'?: string | undefined;
+    'data-pendo'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+    onThumbnail?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/types/Chip/index.d.ts

@@ -0,0 +1,13 @@
+import React, { MouseEventHandler } from 'react';
+export type ChipProps = {
+    clearable?: boolean;
+    onClear?: MouseEventHandler<HTMLButtonElement>;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    variant?: 'outlined' | 'filled';
+    'data-testid'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+export default Chip;

package/dist/types/CircularProgress/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type CircularProgressProps = {
+    size?: number | string;
+    color?: string;
+    fillParentHeight?: boolean;
+    'data-testid'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export default function CircularProgress({ size, fillParentHeight, ...props }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ColorPicker/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { InputProps } from '../Input/index.js';
+export type ColorPickerProps = Omit<InputProps, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string, error: boolean) => void;
+    'data-testid'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+declare const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;
+export declare const validateHex: (hex: string) => boolean;

package/dist/types/DatePicker/Calendar.d.ts

@@ -0,0 +1,9 @@
+import { DateValue } from 'react-aria';
+import { AriaCalendarProps } from '@react-types/calendar';
+import { YearRange } from './index.js';
+type CalendarProps = AriaCalendarProps<DateValue> & {
+    changeYear: (year: number) => void;
+    yearRange: YearRange;
+};
+export default function Calendar({ changeYear: propsChangeYear, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/DatePicker/DateField.d.ts

@@ -0,0 +1,3 @@
+import { DateValue } from 'react-aria';
+import { AriaDateFieldProps } from '@react-types/datepicker';
+export default function DateField(props: AriaDateFieldProps<DateValue>): import("react/jsx-runtime").JSX.Element;

package/dist/types/DatePicker/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type PopoverPlacement, type PopoverPortalElProp } from '../popover/index.js';
+export interface YearRange {
+    backwardYearCount?: number;
+    forwardYearCount?: number;
+    pastStaticYear?: number;
+    futureStaticYear?: number;
+}
+export type DatePickerProps = {
+    defaultValue?: string | undefined;
+    /** ISO 8601 */
+    value?: string;
+    error?: boolean;
+    disabled?: boolean;
+    shouldForceLeadingZeros?: boolean;
+    yearRange?: YearRange;
+    portalEl?: PopoverPortalElProp;
+    placement?: PopoverPlacement;
+    onChange?(value: string): void;
+    onKeyDown?(e: React.KeyboardEvent<HTMLElement>): void;
+    'data-testid'?: string;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export default function DatePicker({ placement, yearRange, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/DateRangePicker/index.d.ts

@@ -0,0 +1,16 @@
+import { DatePickerProps } from '../DatePicker/index.js';
+import { PopoverPortalElProp } from '../popover/types.js';
+import type { FormControlProps } from '../FormControl/index.js';
+type DateRangePickerProps = {
+    startDate: {
+        control?: FormControlProps;
+        props: DatePickerProps;
+    };
+    endDate: {
+        control?: FormControlProps;
+        props: DatePickerProps;
+    };
+    portalEl?: PopoverPortalElProp;
+};
+export default function DateRangePicker({ startDate, endDate, portalEl }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};