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

package/dist/esm/extras/markdown/index.js

@@ -0,0 +1,242 @@
+'use strict';
+import { jsx } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import styles from './styles.module.scss.js';
+import { createContext, useMemo, useContext } from 'react';
+import Typography from '../../Typography/index.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';
+
+const MarkdownContext = createContext({
+  headerIncrement: 0,
+  paragraphIncrement: 0,
+  styles: {},
+  classNames: {}
+});
+const h = (base, hAddend) => `h${Math.max(1, Math.min(base + hAddend, 4))}`;
+const p = (base, pAddend) => `paragraph${Math.max(1, Math.min(base + pAddend, 3))}`;
+const DefaultComponents = {
+  h1: function H1({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h1: h1Style },
+      classNames: { h1: h1ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(1, headerIncrement),
+        style: {
+          ...h1Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h1ClassName, className),
+        ...props
+      }
+    );
+  },
+  h2: function H2({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h2: h2Style },
+      classNames: { h2: h2ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(2, headerIncrement),
+        style: {
+          ...h2Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h2ClassName, className),
+        ...props
+      }
+    );
+  },
+  h3: function H3({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h3: h3Style },
+      classNames: { h3: h3ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(3, headerIncrement),
+        style: {
+          ...h3Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h3ClassName, className),
+        ...props
+      }
+    );
+  },
+  h4: function H4({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h4: h4Style },
+      classNames: { h4: h4ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(4, headerIncrement),
+        style: {
+          ...h4Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h4ClassName, className),
+        ...props
+      }
+    );
+  },
+  h5: function H5({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h5: h5Style },
+      classNames: { h5: h5ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(5, headerIncrement),
+        style: {
+          ...h5Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h5ClassName, className),
+        ...props
+      }
+    );
+  },
+  h6: function H6({ color, ref, style, className, ...props }) {
+    const {
+      headerIncrement,
+      styles: { h6: h6Style },
+      classNames: { h6: h6ClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: h(6, headerIncrement),
+        style: {
+          ...h6Style,
+          ...style
+        },
+        className: cx(styles.inheritColor, h6ClassName, className),
+        ...props
+      }
+    );
+  },
+  p: function P({ color, ref, style, className, ...props }) {
+    const {
+      paragraphIncrement,
+      styles: { p: pStyle },
+      classNames: { p: pClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        ref,
+        variant: p(1, paragraphIncrement),
+        style: {
+          ...pStyle,
+          ...style
+        },
+        className: cx(styles.inheritColor, pClassName, className),
+        ...props
+      }
+    );
+  },
+  // table: (props) => <Table {...props} />,
+  // thead: (props) => <TableHead {...props} />,
+  // tbody: (props) => <TableBody {...props} />,
+  // tr: ({ ref, ...props }) => <TableRow ref={ref as any} {...props} />,
+  // th: ({ ref, ...props }) => (
+  //   <TableCell ref={ref as any} variant={'header'} {...props} />
+  // ),
+  // td: ({ ref, ...props }) => (
+  //   <TableCell ref={ref as any} variant={'data'} {...props} />
+  // ),
+  li: function Li(props) {
+    const {
+      paragraphIncrement,
+      styles: { li: liStyle },
+      classNames: { li: liClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ...props,
+        style: {
+          ...liStyle,
+          ...props.style
+        },
+        className: cx(
+          styles[`li_${p(1, paragraphIncrement)}`],
+          liClassName,
+          props.className
+        )
+      }
+    );
+  },
+  img: function Img(props) {
+    const {
+      styles: { li: liStyle },
+      classNames: { li: liClassName }
+    } = useContext(MarkdownContext);
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        style: { ...liStyle, ...props.style },
+        className: cx(styles.img, liClassName, props.className)
+      }
+    );
+  }
+};
+function Markdown({
+  components,
+  headerIncrement,
+  paragraphIncrement,
+  style,
+  className,
+  styles: componentStyles,
+  classNames: componentClassNames,
+  ...props
+}) {
+  const allComponents = useMemo(
+    () => ({
+      ...DefaultComponents,
+      ...components
+    }),
+    [components]
+  );
+  return /* @__PURE__ */ jsx(
+    MarkdownContext.Provider,
+    {
+      value: {
+        headerIncrement: headerIncrement ?? 0,
+        paragraphIncrement: paragraphIncrement ?? 0,
+        styles: componentStyles ?? {},
+        classNames: componentClassNames ?? {}
+      },
+      children: /* @__PURE__ */ jsx("div", { style, className: cx(styles.markdown, className), children: /* @__PURE__ */ jsx(ReactMarkdown, { components: allComponents, ...props }) })
+    }
+  );
+}
+
+export { Markdown };

package/dist/esm/extras/markdown/styles.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"markdown":"vt_ce_markdown_markdown__643d008c","inheritColor":"vt_ce_markdown_inheritColor__bde529c4","img":"vt_ce_markdown_img__ec9cc012","li_paragraph1":"vt_ce_markdown_li_paragraph1__92fed597","li_paragraph2":"vt_ce_markdown_li_paragraph2__c769f415","li_paragraph3":"vt_ce_markdown_li_paragraph3__f31baa03"};
+
+export { styles as default };

package/dist/esm/extras/uploady/index.js

@@ -0,0 +1,2 @@
+'use strict';
+export { UploadyButton, UploadyDropzone, UploadyList, UploadyListItem, useUploadStatus } from './uploady.js';

package/dist/esm/extras/uploady/uploady.js

@@ -0,0 +1,106 @@
+'use strict';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useCallback, useState } from 'react';
+import { useUploadyContext, BATCH_STATES, useBatchAddListener, useBatchStartListener, useBatchFinalizeListener, useUploady, useBatchProgressListener, useAbortItem, useItemFinalizeListener, useItemProgressListener } from '@rpldy/uploady';
+import Button from '../../Button/index.js';
+import { UploadDropzone, FILE_STATES, UploadListContainer, UploadListItem } from '../../FileUploader/controlled.js';
+
+function UploadyDropzone(props) {
+  const { upload, getOptions } = useUploady();
+  const [batchState, setBatchState] = useState(
+    BATCH_STATES.PENDING
+  );
+  useBatchFinalizeListener((batch) => {
+    setBatchState(batch.state);
+  });
+  useBatchProgressListener((batch) => {
+    setBatchState(batch.state);
+  });
+  return /* @__PURE__ */ jsx(
+    UploadDropzone,
+    {
+      ...props,
+      multiple: !getOptions().autoUpload,
+      state: batchState === BATCH_STATES.PROCESSING ? FILE_STATES.UPLOADING : batchState,
+      onDrop: (files) => {
+        upload(files);
+        setBatchState(BATCH_STATES.PENDING);
+      }
+    }
+  );
+}
+function UploadyList(props) {
+  const [items, setItems] = useState([]);
+  useBatchAddListener((batch) => {
+    setItems((items2) => items2.concat(batch.items));
+  });
+  return /* @__PURE__ */ jsx(UploadListContainer, { ...props, children: items.map((item, index) => /* @__PURE__ */ jsx(UploadyListItem, { item }, index)) });
+}
+function UploadyListItem({ item }) {
+  const [itemState, setState] = useState(item.state);
+  const [progress, setProgress] = useState(0);
+  const abortItem = useAbortItem();
+  useItemFinalizeListener((item2) => {
+    setState(item2.state);
+  }, item.id);
+  useItemProgressListener((item2) => {
+    setProgress(item2.completed);
+  });
+  const onAbortItem = () => {
+    abortItem(item.id);
+  };
+  return /* @__PURE__ */ jsx(
+    UploadListItem,
+    {
+      item: {
+        file: item.file,
+        progress,
+        state: itemState
+      },
+      onAbort: onAbortItem
+    }
+  );
+}
+function useUploadStatus() {
+  const [batchState, setBatchState] = useState(
+    BATCH_STATES.PENDING
+  );
+  const [itemCount, setItemCount] = useState(0);
+  useBatchAddListener((batch) => {
+    setItemCount(batch.total);
+  });
+  const [loading, setLoading] = useState(false);
+  useBatchStartListener(() => {
+    setLoading(true);
+  });
+  useBatchFinalizeListener((batch) => {
+    setLoading(false);
+    setBatchState(batch.state);
+  });
+  return { loading, itemCount, batchState };
+}
+const UploadyButton = React__default.forwardRef(function UploadButton({ children, onClick, disabled, ...props }, ref) {
+  const { processPending } = useUploadyContext();
+  const { itemCount, batchState, loading } = useUploadStatus();
+  const onButtonClick = useCallback(
+    (e) => {
+      processPending();
+      onClick?.(e);
+    },
+    [processPending, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      onClick: onButtonClick,
+      disabled: disabled || itemCount === 0 || batchState === BATCH_STATES.FINISHED,
+      loading,
+      ...props,
+      children: children || "Upload"
+    }
+  );
+});
+
+export { UploadyButton, UploadyDropzone, UploadyList, UploadyListItem, useUploadStatus };

package/dist/esm/index.js

@@ -0,0 +1,58 @@
+'use strict';
+export { cx } from './styles/cx.js';
+export { defaultThemeOptions } from './styles/defaultThemeOptions.js';
+export { default as createTheme } from './styles/createTheme.js';
+export { defaultThemeCssVariableUsages as ThemeVars, defaultDarkTheme, default as defaultTheme } from './styles/defaultTheme.js';
+export { default as useTheme } from './styles/useTheme.js';
+export { TypographyVariantKeys } from './styles/typography.js';
+export { PortalThemeRelay } from './styles/portal.js';
+export { createPalette } from './styles/createPalette.js';
+export { createTypography } from './styles/createTypography.js';
+export { ThemeContext, ThemeContextProvider, useThemeContext } from './styles/provider.client.js';
+export { ThemeCssVarsProvider } from './styles/provider.css-vars.js';
+export { createThemeCssVariableDefinitions, themeCSSVariableNames } from './styles/css-vars.js';
+export { unstable_capitalize as capitalize } from '@mui/utils';
+export { default as Alert } from './Alert/index.js';
+export { default as Badge } from './Badge/index.js';
+export { default as Button } from './Button/index.js';
+export { default as Checkbox } from './Checkbox/index.js';
+export { default as Chip } from './Chip/index.js';
+export { default as CircularProgress } from './CircularProgress/index.js';
+export { default as DatePicker } from './DatePicker/index.js';
+export { default as DateRangePicker } from './DateRangePicker/index.js';
+export { default as Dialog, DialogActions, DialogCloseButton, DialogCloseIconButton, DialogContent, DialogDescription, DialogEnd, DialogStart, DialogTitle, DialogTypography } from './Dialog/components.js';
+export { createDialogComponent } from './Dialog/factory.js';
+export { default as Drawer, DrawerActions, DrawerCloseButton, DrawerCloseIconButton, DrawerContent, DrawerDescription, DrawerEnd, DrawerStart, DrawerTitle, DrawerTypography } from './Drawer/components.js';
+export { createDrawerComponent } from './Drawer/factory.js';
+export { default as ErrorBoundary } from './ErrorBoundary/index.js';
+export { FILE_STATES, UploadDropzone, UploadList, UploadListContainer, UploadListItem } from './FileUploader/controlled.js';
+export { default as FormControl } from './FormControl/index.js';
+export { adaptMuiSvgIcon, adaptSvgIcon } from './Icon/wrappers.js';
+export { DefaultIconFallback, createIconComponent } from './Icon/factory.js';
+export { default as IconButton } from './IconButton/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Menu, MenuItem, NestedMenu } from './Menu/controlled.js';
+export { createMenuComponent } from './Menu/factory.js';
+export { default as Pagination } from './Pagination/index.js';
+export { default as RadioButton } from './RadioButton/index.js';
+export { default as ControlledSelect } from './Select/controlled.js';
+export { default as Select } from './Select/uncontrolled.js';
+export { createControlledSelectComponent, createSelectComponent } from './Select/factory.js';
+export { default as StatusChip } from './StatusChip/index.js';
+export { Table, TableBody, TableFooter, TableHead, TableMessage, TableSortLabel } from './Table/index.js';
+export { default as AutoTable } from './Table/AutoTable/index.js';
+export { default as TableCell } from './Table/TableCell/index.js';
+export { default as TableRow } from './Table/TableRow/index.js';
+export { default as TablePagination } from './TablePagination/index.js';
+export { default as Textarea } from './Textarea/index.js';
+export { default as Toast } from './Toast/index.js';
+export { ToastProvider, useToast } from './Toast/hook.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { default as Typography } from './Typography/index.js';
+export { default as ColorPicker, validateHex } from './ColorPicker/index.js';
+export { default as Stepper } from './Stepper/stepper.js';
+export { default as AutoStepper } from './Stepper/auto.js';
+export { default as Accordion } from './Accordion/Accordion.js';
+export { default as AccordionGroup } from './Accordion/AccordionGroup.js';
+export { AccordionGroupContext, useAccordionGroup, useAccordionState, useIsInsideAccordionGroup } from './Accordion/Context.js';
+export { createColumnHelper } from './Table/AutoTable/common.js';

package/dist/esm/popover/utils.js

@@ -0,0 +1,6 @@
+'use strict';
+function resolvePopoverAnchor(anchor) {
+  return typeof anchor === "function" ? anchor() : anchor;
+}
+
+export { resolvePopoverAnchor };

package/dist/esm/styles/components.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"css-var-provider":"vt_ce_styles_css-var-provider__dc02b308"};
+
+export { styles as default };

package/dist/esm/styles/createPalette.js

@@ -0,0 +1,225 @@
+'use strict';
+import { readableColor, toHex, darken, lighten, desaturate } from 'color2k';
+import { isPaletteColorOptions, isPaletteActionVariantsColorsOptions, isPaletteSurfaceColorsOptions } from './themeOptions.js';
+import { defaultThemeOptions } from './defaultThemeOptions.js';
+
+function createPaletteColor(options) {
+  return options;
+}
+function contrastColor(surface) {
+  return readableColor(surface);
+}
+function createPaletteSurfaceColors(options) {
+  if (typeof options === "string") {
+    const surface = createPaletteColor(options);
+    return {
+      surface,
+      on: contrastColor(surface)
+    };
+  } else {
+    const surface = createPaletteColor(options.surface);
+    return {
+      surface,
+      on: options.on ? createPaletteColor(options.on) : contrastColor(surface)
+    };
+  }
+}
+function createPaletteActionVariantsColors(options, disabled) {
+  const hoverFromBase = (b) => ({
+    surface: toHex(desaturate(darken(b.surface, 1 / 10), 1 / 4)),
+    on: b.on
+  });
+  const activeFromBase = (b) => hoverFromBase(b);
+  if (isPaletteSurfaceColorsOptions(options)) {
+    const resolved = createPaletteSurfaceColors(options);
+    return {
+      base: resolved,
+      hover: hoverFromBase(resolved),
+      active: activeFromBase(resolved),
+      disabled
+    };
+  } else {
+    const base = createPaletteSurfaceColors(options.base);
+    return {
+      base,
+      hover: options.hover ? createPaletteSurfaceColors(options.hover) : hoverFromBase(base),
+      active: options.active ? createPaletteSurfaceColors(options.active) : activeFromBase(base),
+      disabled
+    };
+  }
+}
+function createPaletteBrand(options, disabled) {
+  const brandColorStepFromBase = (b, step) => createPaletteActionVariantsColors(
+    step >= 1 ? toHex(darken(b.base.surface, step / 20)) : toHex(lighten(b.base.surface, step / 2)),
+    disabled
+  );
+  if (isPaletteActionVariantsColorsOptions(options)) {
+    const resolved = createPaletteActionVariantsColors(options, disabled);
+    return {
+      1: resolved,
+      2: brandColorStepFromBase(resolved, 1),
+      3: brandColorStepFromBase(resolved, 2),
+      4: brandColorStepFromBase(resolved, 0.5),
+      5: brandColorStepFromBase(resolved, 0.25)
+    };
+  } else {
+    const base = createPaletteActionVariantsColors(options[1], disabled);
+    return {
+      1: base,
+      2: options[2] ? createPaletteActionVariantsColors(options[2], disabled) : brandColorStepFromBase(base, 1),
+      3: options[3] ? createPaletteActionVariantsColors(options[3], disabled) : brandColorStepFromBase(base, 2),
+      4: options[4] ? createPaletteActionVariantsColors(options[4], disabled) : brandColorStepFromBase(base, 0.5),
+      5: options[5] ? createPaletteActionVariantsColors(options[5], disabled) : brandColorStepFromBase(base, 0.25)
+    };
+  }
+}
+function createPaletteText(options) {
+  const textColorStepFromBase = (b, _step) => {
+    return b;
+  };
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: textColorStepFromBase(resolved),
+      tertiary: textColorStepFromBase(resolved)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : textColorStepFromBase(base),
+      tertiary: options.tertiary ? createPaletteColor(options.tertiary) : textColorStepFromBase(base)
+    };
+  }
+}
+function createPaletteAction(options, disabled, text) {
+  const destructiveDefault = createPaletteActionVariantsColors(
+    defaultThemeOptions.palette.action.destructive,
+    disabled
+  );
+  const primary = createPaletteActionVariantsColors(options.primary, disabled);
+  const secondary = createPaletteActionVariantsColors(
+    options.secondary,
+    disabled
+  );
+  return {
+    primary,
+    secondary,
+    destructive: options.destructive ? createPaletteActionVariantsColors(options.destructive, disabled) : destructiveDefault,
+    text: options.text ? createPaletteActionVariantsColors(options.text, disabled) : createPaletteActionVariantsColors(
+      {
+        ...primary,
+        base: {
+          surface: text,
+          on: contrastColor(text)
+        }
+      },
+      disabled
+    )
+  };
+}
+function createPaletteIndicator(options, disabled) {
+  return {
+    success: options.success ? createPaletteActionVariantsColors(options.success, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.palette.indicator.success,
+      disabled
+    ),
+    info: options.info ? createPaletteActionVariantsColors(options.info, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.palette.indicator.info,
+      disabled
+    ),
+    warning: options.warning ? createPaletteActionVariantsColors(options.warning, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.palette.indicator.warning,
+      disabled
+    ),
+    error: options.error ? createPaletteActionVariantsColors(options.error, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.palette.indicator.error,
+      disabled
+    ),
+    pending: options.pending ? createPaletteActionVariantsColors(options.pending, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.palette.indicator.pending,
+      disabled
+    ),
+    processing: options.processing ? createPaletteActionVariantsColors(options.processing, disabled) : createPaletteActionVariantsColors(
+      defaultThemeOptions.palette.indicator.processing,
+      disabled
+    )
+  };
+}
+function createPaletteTable(options, disabled) {
+  return createPaletteActionVariantsColors(options, disabled);
+}
+function createPaletteTooltip(options) {
+  return createPaletteSurfaceColors(options);
+}
+function createPaletteBackground(options) {
+  const backgroundStepFromBase = (b, step) => {
+    return toHex(darken(b, step / 20));
+  };
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved,
+      secondary: backgroundStepFromBase(resolved, 1)
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base,
+      secondary: options.secondary ? createPaletteColor(options.secondary) : backgroundStepFromBase(base, 1)
+    };
+  }
+}
+function createPaletteStroke(options) {
+  if (isPaletteColorOptions(options)) {
+    const resolved = createPaletteColor(options);
+    return {
+      primary: resolved
+    };
+  } else {
+    const base = createPaletteColor(options.primary);
+    return {
+      primary: base
+    };
+  }
+}
+function createPalette(options = {}) {
+  const disabled = options.disabled ? createPaletteSurfaceColors(options.disabled) : createPaletteSurfaceColors(defaultThemeOptions.palette.disabled);
+  const text = createPaletteText(
+    options.text ?? defaultThemeOptions.palette.text
+  );
+  return {
+    brand: createPaletteBrand(
+      options.brand ?? defaultThemeOptions.palette.brand,
+      disabled
+    ),
+    text,
+    action: createPaletteAction(
+      options.action ?? defaultThemeOptions.palette.action,
+      disabled,
+      text.tertiary
+    ),
+    indicator: createPaletteIndicator(
+      options.indicator ?? defaultThemeOptions.palette.indicator,
+      disabled
+    ),
+    disabled,
+    background: createPaletteBackground(
+      options.background ?? defaultThemeOptions.palette.background
+    ),
+    stroke: createPaletteStroke(
+      options.stroke ?? defaultThemeOptions.palette.stroke
+    ),
+    table: createPaletteTable(
+      options.table ?? defaultThemeOptions.palette.table,
+      disabled
+    ),
+    tooltip: createPaletteTooltip(
+      options.tooltip ?? defaultThemeOptions.palette.tooltip
+    ),
+    thumbnailCheckbox: defaultThemeOptions.palette.thumbnailCheckbox
+  };
+}
+
+export { createPalette };

package/dist/esm/styles/createTheme.js

@@ -0,0 +1,12 @@
+'use strict';
+import { createTypography } from './createTypography.js';
+import { createPalette } from './createPalette.js';
+
+function createTheme(options = {}) {
+  return {
+    palette: createPalette(options.palette),
+    typography: createTypography(options.typography)
+  };
+}
+
+export { createTheme as default };