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

package/dist/cjs/Pagination/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"list":"vt_ce_Pagination_list__006cb35b","ellipsis":"vt_ce_Pagination_ellipsis__c6ba7751"};
+
+exports.default = css;

package/dist/cjs/RadioButton/index.js

@@ -0,0 +1,85 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useForkRef = require('@mui/utils/useForkRef');
+var styles_module = require('./styles.module.scss.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');
+
+const RadioButton = React.forwardRef(
+  ({
+    defaultChecked,
+    checked,
+    label,
+    disabled = false,
+    "data-testid": dataTestId,
+    style,
+    className,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    const forkedRef = useForkRef(inputRef, ref);
+    const labelId = React.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "radio",
+        "aria-labelledby": labelId,
+        "aria-checked": checked ?? defaultChecked,
+        "aria-disabled": disabled,
+        onClick: (e) => {
+          inputRef.current?.click();
+          e.stopPropagation();
+          e.preventDefault();
+        },
+        "data-testid": dataTestId,
+        style,
+        className: cx.cx(styles_module.default["radio"], className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles_module.default["passthrough-label-container"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...props,
+                type: "radio",
+                ref: forkedRef,
+                defaultChecked,
+                checked,
+                disabled,
+                className: styles_module.default["invisible-radio"]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["icon-container"], children: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon, {}) })
+          ] }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["visible-label"], id: labelId, children: label })
+        ]
+      }
+    );
+  }
+);
+const RadioIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 9, cy: 9, r: 8.5, className: styles_module.default["radio-circle-outer"] }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 9, cy: 9, r: 5.625, className: styles_module.default["radio-circle-inner"] })
+    ]
+  }
+);
+
+exports.default = RadioButton;

package/dist/cjs/RadioButton/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"radio":"vt_ce_RadioButton_radio__162f9a8e","radio-circle-outer":"vt_ce_RadioButton_radio-circle-outer__d3f9decf","radio-circle-inner":"vt_ce_RadioButton_radio-circle-inner__cf7da66b","passthrough-label-container":"vt_ce_RadioButton_passthrough-label-container__a7aa3abd","invisible-radio":"vt_ce_RadioButton_invisible-radio__610a0807","visible-label":"vt_ce_RadioButton_visible-label__5a55d508","icon-container":"vt_ce_RadioButton_icon-container__a4c0c8b4"};
+
+exports.default = css;

package/dist/cjs/Select/controlled.js

@@ -0,0 +1,208 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+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 styles_module = require('./styles.module.scss.js');
+var iconsMaterial = require('@mui/icons-material');
+var controlled = require('../Menu/controlled.js');
+var wrappers = require('../Icon/wrappers.js');
+require('../Icon/factory.js');
+var context = require('../FormControl/context.js');
+var index = require('../Chip/index.js');
+
+const DefaultEndIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ArrowDropDown);
+const DefaultUnsetIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.Close);
+function ControlledSelect({
+  ref,
+  value,
+  freeSolo = false,
+  triggerChangeOnBlur = false,
+  multiple = false,
+  endIcon = /* @__PURE__ */ jsxRuntime.jsx(DefaultEndIcon, {}),
+  placeholder = "Select",
+  clearable = true,
+  tight = false,
+  ...props
+}) {
+  const ctx = context.useFormControlContext();
+  const error = props.error ?? ctx.error;
+  const disabled = props.disabled ?? ctx.disabled;
+  const anchorId = React.useId();
+  const anchorRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const unsetIcon = /* @__PURE__ */ jsxRuntime.jsx(DefaultUnsetIcon, {});
+  const selectedOption = !multiple ? props.options.find((option) => option.value === value) : void 0;
+  let filteredOptions = props.options;
+  if (props.filterOptions) {
+    filteredOptions = props.filterOptions(filteredOptions);
+  }
+  filteredOptions = filteredOptions.filter(
+    (option) => option.label.toLowerCase().includes(props.inputValue.toLowerCase())
+  );
+  let startAdornment = null;
+  if (multiple) {
+    const multiValue = value;
+    if (multiValue && multiValue.length > 0) {
+      startAdornment = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["value-chips"], children: multiValue.map((optionValue, index$1) => {
+        const option = props.options.find(
+          (option2) => option2.value === optionValue
+        );
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            clearable: true,
+            onClear: (e) => {
+              const old = [...value];
+              old.splice(index$1, 1);
+              props.onChange(
+                e,
+                old
+              );
+            },
+            className: styles_module.default["value-chip"],
+            children: option?.label ?? optionValue?.toString()
+          },
+          option?.value?.toString() ?? optionValue?.toString() ?? `i-${index$1}`
+        );
+      }) }) });
+    }
+  }
+  const handleAddInputValue = (e) => {
+    if (freeSolo && props.inputValue !== "") {
+      if (!e.currentTarget.validity.patternMismatch) {
+        props.onChange(
+          e,
+          multiple ? [
+            // Don't add duplicates
+            .../* @__PURE__ */ new Set([
+              ...value ?? [],
+              props.inputValue
+            ])
+          ] : props.inputValue
+        );
+        props.onInputChange(e, "");
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        id: anchorId,
+        ref: anchorRef,
+        "data-focused": open,
+        "data-disabled": disabled,
+        "data-error": error,
+        onClick: () => {
+          if (!disabled) {
+            setOpen(true);
+          }
+        },
+        "data-testid": props["data-testid"],
+        style: props.style,
+        className: cx.cx(
+          styles_module.default["select"],
+          multiple && styles_module.default["select-multi"],
+          tight && styles_module.default["tight"],
+          props.className
+        ),
+        children: [
+          props.startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: props.startIcon }),
+          startAdornment,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["inner-input-container"], children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              size: props.size,
+              "data-selected": Boolean(selectedOption) || (value ?? []).length > 0,
+              placeholder: selectedOption?.label ?? placeholder,
+              value: props.inputValue,
+              disabled: props.disabled,
+              pattern: props.pattern,
+              onChange: (e) => {
+                setOpen(true);
+                props.onInputChange(e, e.target.value);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleAddInputValue(e);
+                }
+              },
+              onBlur: (e) => {
+                if (triggerChangeOnBlur) {
+                  handleAddInputValue(e);
+                }
+              },
+              className: styles_module.default["inner-input"],
+              "data-pendo": props["data-pendo"]
+            }
+          ) }),
+          selectedOption && clearable && !freeSolo && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: styles_module.default["select-icon"],
+              onClick: (e) => {
+                props.onChange?.(e, null);
+                props.onInputChange(e, "");
+              },
+              children: unsetIcon
+            }
+          ),
+          endIcon && !freeSolo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["select-icon"], children: endIcon })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      controlled.default,
+      {
+        className: styles_module.default["select-menu"],
+        role: "select",
+        anchorId,
+        anchor: open ? anchorRef.current : null,
+        open: open && !freeSolo,
+        virtualize: props.virtualize,
+        onReachEnd: props.onMenuReachEnd,
+        reachEndOffset: props.menuReachEndOffset,
+        portalEl: props.portalEl,
+        strategy: props.dropdownStrategy,
+        enableTypeahead: false,
+        matchAnchorWidth: true,
+        onDismiss: () => {
+          setOpen(false);
+          props.onBlur?.();
+        },
+        options: filteredOptions.map((option) => ({
+          label: option.label,
+          icon: option.icon,
+          onSelect(e) {
+            if (multiple) {
+              const multiValue = value || [];
+              const hasValue = multiValue && multiValue.some((val) => val === option.value);
+              if (!hasValue) {
+                props.onChange(e, [...multiValue, option.value]);
+              }
+            } else {
+              props.onChange(e, option.value);
+            }
+            props.onInputChange(e, "");
+            setOpen(false);
+          }
+        }))
+      }
+    )
+  ] });
+}
+
+exports.default = ControlledSelect;

package/dist/cjs/Select/factory.js

@@ -0,0 +1,23 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var uncontrolled = require('./uncontrolled.js');
+var controlled = require('./controlled.js');
+
+function createSelectComponent({ portalEl }) {
+  return React.forwardRef(function ScopedSelect(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(uncontrolled.default, { portalEl, ref, ...props });
+  });
+}
+function createControlledSelectComponent({
+  portalEl
+}) {
+  return React.forwardRef(function ScopedControlledSelect(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(controlled.default, { portalEl, ref, ...props });
+  });
+}
+
+exports.createControlledSelectComponent = createControlledSelectComponent;
+exports.createSelectComponent = createSelectComponent;

package/dist/cjs/Select/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"select":"vt_ce_Select_select__b63e11a6","select-multi":"vt_ce_Select_select-multi__b4d53651","tight":"vt_ce_Select_tight__b64bac2c","value-chips":"vt_ce_Select_value-chips__f38b862b","value-chip":"vt_ce_Select_value-chip__edb4413e","inner-input-container":"vt_ce_Select_inner-input-container__b9ca36fc","inner-input":"vt_ce_Select_inner-input__d94e8d90","select-icon":"vt_ce_Select_select-icon__c2e4bcaf","select-menu":"vt_ce_Select_select-menu__1bc3932d"};
+
+exports.default = css;

package/dist/cjs/Select/uncontrolled.js

@@ -0,0 +1,61 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var controlled = require('./controlled.js');
+
+function Select({
+  ref,
+  defaultValue = null,
+  value: propsValue,
+  inputValue: propsInputValue,
+  onChange: propsOnChange,
+  onInputChange: propsOnInputChange,
+  tight = false,
+  ...props
+}) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const [value, onChange] = propsValue !== void 0 ? [
+    propsValue,
+    (e, newValue) => {
+      propsOnChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolled,
+    (e, newValue) => {
+      setUncontrolled(newValue);
+      propsOnChange?.(e, newValue);
+    }
+  ];
+  const [uncontrolledInputValue, setUncontrolledInputValue] = React.useState("");
+  const [inputValue, onInputChange] = propsInputValue !== void 0 ? [
+    propsInputValue,
+    (e, newValue) => {
+      propsOnInputChange?.(e, newValue);
+    }
+  ] : [
+    uncontrolledInputValue,
+    (e, newValue) => {
+      setUncontrolledInputValue(newValue);
+      propsOnInputChange?.(e, newValue);
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    controlled.default,
+    {
+      ref,
+      ...props,
+      value,
+      onChange,
+      inputValue,
+      onInputChange,
+      tight
+    }
+  );
+}
+
+exports.default = Select;

package/dist/cjs/StatusChip/index.js

@@ -0,0 +1,39 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var index = require('../Typography/index.js');
+
+const StatusChip = ({
+  children,
+  palette = defaultTheme.defaultThemeCssVariableUsages.palette.indicator.info,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": props["data-testid"],
+      style: {
+        // @ts-ignore
+        "--vt-ce-status-chip-base-surface": palette.base.surface,
+        "--vt-ce-status-chip-base-on": palette.base.on,
+        ...props.style
+      },
+      className: cx.cx(styles_module.default.statusChip, props.className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { variant: "statusChip", color: "inherit", leadingTrim: true, children })
+    }
+  );
+};
+
+exports.default = StatusChip;

package/dist/cjs/StatusChip/styles.module.scss.js

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

package/dist/cjs/Stepper/auto.js

@@ -0,0 +1,127 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var index = require('../Button/index.js');
+var stepper = require('./stepper.js');
+
+function AutoStepper({
+  steps,
+  onCancel,
+  onFinish,
+  backLabel = "Back",
+  cancelLabel = "Cancel",
+  nextLabel = "Next",
+  finishLabel = "Finish"
+}) {
+  const validatedSteps = steps.map((step) => {
+    const valid = !step.validateStep || step.validateStep();
+    return {
+      ...step,
+      disabled: step.disabled && valid,
+      valid
+    };
+  });
+  const [activeStepIndex, setActiveStepIndex] = React.useState(0);
+  const [completed, setCompleted] = React.useState({});
+  const activeStep = React.useMemo(
+    () => validatedSteps[activeStepIndex],
+    [activeStepIndex, validatedSteps]
+  );
+  const totalSteps = () => {
+    return steps.length;
+  };
+  const completedSteps = () => {
+    return Object.keys(completed).length;
+  };
+  const isLastStep = () => {
+    return activeStepIndex === totalSteps() - 1;
+  };
+  const allStepsCompleted = () => {
+    return completedSteps() === totalSteps();
+  };
+  const handleNext = () => {
+    const newActiveStep = isLastStep() && !allStepsCompleted() ? (
+      // It's the last step, but not all steps have been completed,
+      // find the first step that has been completed
+      steps.findIndex((step, i) => !(i in completed))
+    ) : activeStepIndex + 1;
+    setActiveStepIndex(newActiveStep);
+  };
+  const handleBack = () => {
+    handleChangeStep(activeStepIndex - 1);
+  };
+  const handleChangeStep = (selectedStep) => {
+    if (selectedStep < activeStepIndex) {
+      if (selectedStep >= 0) {
+        setActiveStepIndex(selectedStep);
+      }
+      return;
+    }
+    const prevStep = validatedSteps[activeStepIndex];
+    if (!prevStep || prevStep.valid) {
+      setActiveStepIndex(selectedStep);
+    }
+  };
+  const handleCompleteStep = () => {
+    const newCompleted = completed;
+    newCompleted[activeStepIndex] = true;
+    setCompleted(newCompleted);
+    if (!isLastStep()) {
+      handleNext();
+    } else {
+      handleFinishForm();
+    }
+  };
+  const handleCancel = () => {
+    setActiveStepIndex(0);
+    setCompleted({});
+    onCancel();
+  };
+  const handleFinishForm = () => {
+    onFinish();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.autoStepperWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      stepper.default,
+      {
+        steps,
+        activeStep: activeStepIndex,
+        onChangeStep: handleChangeStep,
+        className: styles_module.default.autoStepperTopWrapper
+      }
+    ),
+    activeStep && /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeStep.step }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.verticalSpacer }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.buttonRowBottom, children: [
+      activeStepIndex !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          variant: "secondary",
+          disabled: activeStepIndex === 0,
+          onClick: handleBack,
+          children: backLabel
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.horizontalSpacer }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            variant: "tertiary",
+            onClick: handleCancel,
+            style: { marginRight: "10px" },
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(index.default, { disabled: !activeStep?.valid, onClick: handleCompleteStep, children: isLastStep() ? finishLabel : nextLabel })
+      ] })
+    ] })
+  ] });
+}
+
+exports.default = AutoStepper;

package/dist/cjs/Stepper/stepper.js

@@ -0,0 +1,48 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../Button/index.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var styles_module = require('./styles.module.scss.js');
+
+const Stepper = ({
+  steps,
+  activeStep,
+  onChangeStep,
+  style,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style, className: cx.cx(styles_module.default.stepperContainer, className), children: steps.map((step, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles_module.default.step,
+      "aria-disabled": step.disabled,
+      onClick: () => !step.disabled && onChangeStep(index$1),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            palette: defaultTheme.defaultThemeCssVariableUsages.palette.action.secondary,
+            variant: activeStep === index$1 ? "primary" : "secondary",
+            className: styles_module.default.stepButton,
+            children: index$1 + 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.stepLabelContainer, children: /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default.stepLabel, children: step.label }) }),
+        index$1 !== steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: styles_module.default.stepperLine })
+      ]
+    },
+    index$1
+  )) });
+};
+
+exports.default = Stepper;

package/dist/cjs/Stepper/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"autoStepperWrapper":"vt_ce_Stepper_autoStepperWrapper__6738d6c6","autoStepperTopWrapper":"vt_ce_Stepper_autoStepperTopWrapper__69bedd07","stepperContainer":"vt_ce_Stepper_stepperContainer__ddfeda9e","step":"vt_ce_Stepper_step__f32fe4d5","stepButton":"vt_ce_Stepper_stepButton__4a78fec9","stepLabelContainer":"vt_ce_Stepper_stepLabelContainer__f4b13398","stepLabel":"vt_ce_Stepper_stepLabel__0a16e4d1","stepperLine":"vt_ce_Stepper_stepperLine__3e88e7db","buttonRowBottom":"vt_ce_Stepper_buttonRowBottom__c2cc1743","verticalSpacer":"vt_ce_Stepper_verticalSpacer__13111b03","horizontalSpacer":"vt_ce_Stepper_horizontalSpacer__c6ff8b27"};
+
+exports.default = styles;