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

package/dist/cjs/unstable/extras/drawers/index.js

@@ -0,0 +1,58 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index_module = require('./index.module.scss.js');
+var components = require('../../../Drawer/components.js');
+var cx = require('../../../styles/cx.js');
+require('../../../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../../../styles/defaultTheme.js');
+require('../../../styles/provider.client.js');
+require('../../../styles/css-vars.js');
+var index = require('../../../ErrorBoundary/index.js');
+var vanilla = require('../../../bundled_modules/jotai/esm/vanilla.js');
+var react = require('../../../bundled_modules/jotai/esm/react.js');
+
+function createDrawer(config, store = vanilla.getDefaultStore()) {
+  const drawerAtom = vanilla.atom(false);
+  return {
+    Component: createBoundDrawerComponent(drawerAtom, config),
+    useDrawer: () => react.useAtom(drawerAtom),
+    setOpen(open) {
+      store.set(drawerAtom, open);
+    }
+  };
+}
+function createBoundDrawerComponent(drawerAtom, config) {
+  return function BoundDrawer() {
+    const [open, setOpen] = react.useAtom(drawerAtom);
+    const cachedOpenRef = React.useRef(open);
+    React.useEffect(() => {
+      if (open !== false) {
+        cachedOpenRef.current = open;
+      }
+    }, [open]);
+    const cachedOpen = cachedOpenRef.current !== false ? cachedOpenRef.current : open;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.default,
+      {
+        disableAutoFocus: true,
+        overlay: true,
+        ...config.drawerProps,
+        open: open !== false,
+        onDismiss: () => {
+          setOpen(false);
+          config.drawerProps?.onDismiss?.();
+        },
+        className: cx.cx(index_module.default.drawer, config.drawerProps?.className),
+        children: cachedOpen !== false && /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { fallback: config.errorFallback, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: config.loadingFallback, children: /* @__PURE__ */ jsxRuntime.jsx(config.Content, { open: cachedOpen }) }) }) }, JSON.stringify(cachedOpen))
+      }
+    );
+  };
+}
+
+exports.createDrawer = createDrawer;

package/dist/cjs/unstable/extras/drawers/index.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"drawer":"vt_ce_drawers_drawer__da3660a2"};
+
+exports.default = styles;

package/dist/cjs/unstable/extras/forms/button.js

@@ -0,0 +1,31 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var internal = require('../../../Icon/internal.js');
+var index = require('../../../Button/index.js');
+
+function FormSubmitButton({
+  control,
+  contentWhenSubmitted,
+  ...props
+}) {
+  const { isLoading, isSubmitSuccessful, isDirty, isValid } = reactHookForm.useFormState({
+    control
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      ...props,
+      type: "submit",
+      loading: isLoading || props.loading,
+      startIcon: isSubmitSuccessful && !isDirty ? /* @__PURE__ */ jsxRuntime.jsx(internal.SuccessIcon, {}) : props.startIcon,
+      disabled: !isValid || !isDirty || props.disabled,
+      children: isSubmitSuccessful && !isDirty && contentWhenSubmitted || props.children
+    }
+  );
+}
+
+exports.FormSubmitButton = FormSubmitButton;

package/dist/cjs/unstable/extras/forms/checkbox.js

@@ -0,0 +1,35 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var shared = require('./shared.js');
+var index$1 = require('../../../Checkbox/index.js');
+var index = require('../../../FormControl/index.js');
+
+function FormCheckbox(props) {
+  const { controllerProps, formControlProps, inputProps } = shared.extractControllerProps(props);
+  const { label, ...restFormControlProps } = formControlProps;
+  const { field, fieldState } = reactHookForm.useController(controllerProps);
+  const errorMessage = shared.useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      disabled: field.disabled,
+      ...restFormControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          ...inputProps,
+          ...field,
+          label,
+          checked: field.value ?? false
+        }
+      )
+    }
+  );
+}
+
+exports.FormCheckbox = FormCheckbox;

package/dist/cjs/unstable/extras/forms/index.js

@@ -0,0 +1,23 @@
+'use strict';
+'use strict';
+
+var button = require('./button.js');
+var checkbox = require('./checkbox.js');
+var input = require('./input.js');
+var select = require('./select.js');
+var shared = require('./shared.js');
+var textarea = require('./textarea.js');
+var upload = require('./upload.js');
+
+
+
+exports.FormSubmitButton = button.FormSubmitButton;
+exports.FormCheckbox = checkbox.FormCheckbox;
+exports.FormInput = input.FormInput;
+exports.FormSelect = select.FormSelect;
+exports.formSelectFactory = select.formSelectFactory;
+exports.extractControllerProps = shared.extractControllerProps;
+exports.useFormErrorMessage = shared.useFormErrorMessage;
+exports.FormTextarea = textarea.FormTextarea;
+exports.FormUploadDropzone = upload.FormUploadDropzone;
+exports.FormUploadList = upload.FormUploadList;

package/dist/cjs/unstable/extras/forms/input.js

@@ -0,0 +1,26 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var shared = require('./shared.js');
+var index$1 = require('../../../Input/index.js');
+var index = require('../../../FormControl/index.js');
+
+function FormInput(props) {
+  const { controllerProps, formControlProps, inputProps } = shared.extractControllerProps(props);
+  const { field, fieldState } = reactHookForm.useController(controllerProps);
+  const errorMessage = shared.useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { ...inputProps, ...field, value: field.value ?? "" })
+    }
+  );
+}
+
+exports.FormInput = FormInput;

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

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

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

@@ -0,0 +1,62 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+
+function useFormErrorMessage(error) {
+  return React.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 };
+}
+
+exports.extractControllerProps = extractControllerProps;
+exports.useFormErrorMessage = useFormErrorMessage;

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

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

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

@@ -0,0 +1,103 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactHookForm = require('react-hook-form');
+var shared = require('./shared.js');
+var index = require('../../../FormControl/index.js');
+var controlled = require('../../../FileUploader/controlled.js');
+
+function FormUploadDropzone(props) {
+  const { controllerProps, formControlProps, inputProps } = shared.extractControllerProps(
+    props
+  );
+  const { onDrop, ...restInputProps } = inputProps;
+  const { field, fieldState } = reactHookForm.useController(
+    controllerProps
+  );
+  const { onChange, ref: _ref, ...restFieldProps } = field;
+  const errorMessage = shared.useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        controlled.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 } = shared.extractControllerProps(
+    props
+  );
+  const { onAbort, state, ...restInputProps } = inputProps;
+  const { field, fieldState } = reactHookForm.useController(
+    controllerProps
+  );
+  const { onChange, ref: _ref, ...restFieldProps } = field;
+  const errorMessage = shared.useFormErrorMessage(fieldState.error);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      disabled: field.disabled,
+      ...formControlProps,
+      error: errorMessage,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        controlled.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: controlled.FILE_STATES.ADDED,
+                progress: 0
+              }
+            };
+          }),
+          onAbort: (item, e) => {
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                value: field.value.filter(
+                  (file) => file !== item.file
+                )
+              }
+            });
+            onAbort?.(item, e);
+          }
+        }
+      )
+    }
+  );
+}
+
+exports.FormUploadDropzone = FormUploadDropzone;
+exports.FormUploadList = FormUploadList;

package/dist/cjs/unstable/index.js

@@ -0,0 +1,21 @@
+'use strict';
+'use strict';
+
+var index$3 = require('./Breadcrumbs/index.js');
+var index = require('./Card/index.js');
+var index$1 = require('./LinearProgress/index.js');
+var index$2 = require('./Tabs/index.js');
+var factory = require('./Breadcrumbs/factory.js');
+
+
+
+exports.Breadcrumbs = index$3.Breadcrumbs;
+exports.ButtonBreadcrumb = index$3.ButtonBreadcrumb;
+exports.CustomBreadcrumb = index$3.CustomBreadcrumb;
+exports.LinkBreadcrumb = index$3.LinkBreadcrumb;
+exports.SeparatorBreadcrumb = index$3.SeparatorBreadcrumb;
+exports.Card = index.default;
+exports.LinearProgress = index$1.default;
+exports.Tab = index$2.Tab;
+exports.Tabs = index$2.default;
+exports.createLinkBreadcrumbComponent = factory.createLinkBreadcrumbComponent;

package/dist/cjs/utils/capitalize.js

@@ -0,0 +1,13 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@mui/utils');
+
+
+
+Object.defineProperty(exports, "default", {
+	enumerable: true,
+	get: function () { return utils.unstable_capitalize; }
+});

package/dist/cjs/utils/isNil.js

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

package/dist/esm/Accordion/Accordion.js

@@ -0,0 +1,116 @@
+'use strict';
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef } from 'react';
+import styles from './styles.module.scss.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import { defaultThemeCssVariableUsages } from '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import { ExpandLess } from '@mui/icons-material';
+import { adaptMuiSvgIcon } from '../Icon/wrappers.js';
+import '../Icon/factory.js';
+import { useAccordionState } from './Context.js';
+import { a as animated } from '../bundled_modules/@react-spring/web/dist/react-spring_web.modern.js';
+import { useSpring } from '../bundled_modules/@react-spring/core/dist/react-spring_core.modern.js';
+
+const ExpandLessIcon = adaptMuiSvgIcon(ExpandLess);
+const Accordion = forwardRef(
+  ({
+    title,
+    palette = defaultThemeCssVariableUsages.palette.background.primary,
+    defaultExpanded = false,
+    id: providedId,
+    children,
+    "data-testid": dataTestId,
+    className,
+    headerClassName,
+    contentClassName,
+    style,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const { isExpanded, toggleAccordion } = useAccordionState(
+      id,
+      defaultExpanded
+    );
+    const contentRef = useRef(null);
+    const contentAnimation = useSpring({
+      from: {
+        height: 0,
+        opacity: 0,
+        overflow: "hidden"
+      },
+      to: {
+        height: isExpanded ? contentRef.current?.scrollHeight || "auto" : 0,
+        opacity: isExpanded ? 1 : 0,
+        overflow: "hidden"
+      },
+      config: {
+        tension: 250,
+        friction: 25
+      },
+      // When animation completes and content is expanded, remove height constraint
+      onRest: () => {
+        if (isExpanded && contentRef.current) {
+          contentRef.current.style.height = "auto";
+        }
+      }
+    });
+    const iconAnimation = useSpring({
+      transform: isExpanded ? "rotate(0deg)" : "rotate(180deg)",
+      config: {
+        tension: 300,
+        friction: 20
+      }
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref,
+        "data-testid": dataTestId,
+        className: cx(styles["accordion"], className),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx(styles["accordion-header"], headerClassName),
+              onClick: toggleAccordion,
+              style: {
+                backgroundColor: palette,
+                ...style
+              },
+              "data-expanded": isExpanded,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: styles["accordion-title"], children: title }),
+                /* @__PURE__ */ jsx(
+                  animated.span,
+                  {
+                    className: styles["accordion-icon"],
+                    style: iconAnimation,
+                    children: /* @__PURE__ */ jsx(ExpandLessIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(animated.div, { style: contentAnimation, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: contentRef,
+              className: cx(styles["accordion-content"], contentClassName),
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+export { Accordion as default };

package/dist/esm/Accordion/AccordionGroup.js

@@ -0,0 +1,57 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import styles from './styles.module.scss.js';
+import { cx } from '../styles/cx.js';
+import '../styles/defaultThemeOptions.js';
+import '@capsizecss/core';
+import 'color2k';
+import '../styles/defaultTheme.js';
+import '../styles/provider.client.js';
+import '../styles/css-vars.js';
+import { AccordionGroupContext } from './Context.js';
+
+const AccordionGroup = forwardRef(
+  ({
+    defaultActiveId = null,
+    allowAllClosed = true,
+    children,
+    "data-testid": dataTestId,
+    className,
+    ...props
+  }, ref) => {
+    const [activeAccordionId, setActiveAccordionId] = useState(
+      defaultActiveId
+    );
+    const handleSetActiveAccordion = (id) => {
+      setActiveAccordionId((prevId) => {
+        if (id === prevId && allowAllClosed) {
+          return null;
+        }
+        return id;
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      AccordionGroupContext.Provider,
+      {
+        value: {
+          activeAccordionId,
+          setActiveAccordionId: handleSetActiveAccordion
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ref,
+            "data-testid": dataTestId,
+            className: cx(styles["accordion-group"], className),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+
+export { AccordionGroup as default };

package/dist/esm/Accordion/Context.js

@@ -0,0 +1,33 @@
+'use strict';
+'use client';
+import { createContext, useState, useContext } from 'react';
+
+const defaultContextValue = {
+  activeAccordionId: null,
+  setActiveAccordionId: () => {
+  }
+};
+const AccordionGroupContext = createContext(defaultContextValue);
+const useAccordionGroup = () => {
+  return useContext(AccordionGroupContext);
+};
+const useIsInsideAccordionGroup = () => {
+  const context = useContext(AccordionGroupContext);
+  return context !== defaultContextValue;
+};
+const useAccordionState = (id, defaultExpanded = false) => {
+  const accordionGroup = useAccordionGroup();
+  const isInGroup = useIsInsideAccordionGroup();
+  const [localExpanded, setLocalExpanded] = useState(defaultExpanded);
+  const isExpanded = isInGroup ? accordionGroup?.activeAccordionId === id : localExpanded;
+  const toggleAccordion = () => {
+    if (isInGroup && accordionGroup) {
+      accordionGroup.setActiveAccordionId(isExpanded ? null : id);
+    } else {
+      setLocalExpanded(!localExpanded);
+    }
+  };
+  return { isExpanded, toggleAccordion };
+};
+
+export { AccordionGroupContext, defaultContextValue, useAccordionGroup, useAccordionState, useIsInsideAccordionGroup };