@veritone-ce/design-system 2.0.7 → 2.1.0

package/dist/cjs/Textarea/index.js

@@ -0,0 +1,69 @@
+'use strict';
+'use client';
+'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');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+const Textarea = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-testid": props["data-testid"],
+        style: props.style,
+        className: cx.cx(styles_module.default["textarea"], props.className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles_module.default["label"], children: props.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-disabled": props.disabled ?? false,
+              "data-error": props.error !== void 0,
+              className: styles_module.default["inner-textarea-container"],
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ref,
+                  placeholder: props.placeholder,
+                  value: props.value,
+                  rows: props.rows,
+                  onChange: props.onChange,
+                  disabled: props.disabled,
+                  className: styles_module.default["inner-textarea"]
+                }
+              )
+            }
+          ),
+          props.helpLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["help-label"], children: props.helpLabel }),
+          props.error && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["error-label"], children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IndicatorCircle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: props.error })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const IndicatorCircle = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6", r: "6", fill: "currentColor" })
+  }
+);
+
+exports.default = Textarea;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__77e999b0","label":"vt_ce_Textarea_label__77e999b0","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__77e999b0","inner-textarea":"vt_ce_Textarea_innerTextarea__77e999b0","help-label":"vt_ce_Textarea_helpLabel__77e999b0","error-label":"vt_ce_Textarea_errorLabel__77e999b0"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Toast/content.js

@@ -0,0 +1,18 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../Alert/index.js');
+
+const ToastContent = ({
+  className,
+  onClose,
+  ...alertProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { onClose, className, ...alertProps });
+};
+
+exports.default = ToastContent;

package/dist/cjs/Toast/hook.js

@@ -0,0 +1,63 @@
+'use strict';
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var notistack = require('notistack');
+var content = require('./content.js');
+
+const NotiToastOverride = React.forwardRef(function InnerNotiToastOverride({
+  id,
+  // veritone toast options start
+  label,
+  text,
+  // link, FIXME
+  severity,
+  // veritone toast options end
+  ...props
+}, ref) {
+  const { closeSnackbar } = notistack.useSnackbar();
+  const handleDismiss = React.useCallback(() => {
+    closeSnackbar(id);
+  }, [id, closeSnackbar]);
+  return /* @__PURE__ */ jsxRuntime.jsx(notistack.SnackbarContent, { ref, style: props.style, className: props.className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    content.default,
+    {
+      label,
+      text,
+      severity,
+      onClose: handleDismiss
+    }
+  ) });
+});
+const ToastProvider = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    notistack.SnackbarProvider,
+    {
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      Components: { veritone: NotiToastOverride },
+      children: props.children
+    }
+  );
+};
+function useToast() {
+  const snackbar = notistack.useSnackbar();
+  return {
+    enqueueToast(options = {}) {
+      snackbar.enqueueSnackbar({
+        variant: "veritone",
+        ...options
+      });
+    },
+    closeToast() {
+      snackbar.closeSnackbar();
+    }
+  };
+}
+
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;

package/dist/cjs/Toast/index.js

@@ -0,0 +1,15 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+var content = require('./content.js');
+
+const Toast = ({ open, onClose, className, ...alertProps }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Snackbar, { open, onClose, className, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(content.default, { onClose, ...alertProps }) }) });
+};
+
+exports.default = Toast;

package/dist/cjs/Tooltip/index.js

@@ -0,0 +1,94 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+require('color2k');
+require('../styles/css-vars.js');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+
+function Tooltip({
+  placement = "bottom",
+  showArrow = true,
+  ...props
+}) {
+  const [_isOpen, setIsOpen] = React.useState(false);
+  const isOpen = props.isOpen ?? _isOpen;
+  const arrowRef = React.useRef(null);
+  const { refs, floatingStyles, context } = react.useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: [
+      react.offset(10),
+      react.inline(),
+      react.flip(),
+      react.shift(),
+      showArrow && react.arrow({
+        element: arrowRef
+      })
+    ],
+    whileElementsMounted: react.autoUpdate
+  });
+  const role = react.useRole(context, { role: "tooltip" });
+  const hover = react.useHover(context, {
+    handleClose: react.safePolygon()
+  });
+  const focus = react.useFocus(context);
+  const dismiss = react.useDismiss(context, {
+    outsidePress: false
+  });
+  const { getReferenceProps, getFloatingProps } = react.useInteractions([
+    role,
+    focus,
+    hover,
+    dismiss
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "tooltip",
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: styles_module.default["tooltip-anchor"],
+        children: props.children
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: refs.setFloating,
+        "data-testid": props["data-testid"],
+        style: {
+          ...floatingStyles,
+          ...props.style
+        },
+        ...getFloatingProps(),
+        className: styles_module.default["tooltip-body"],
+        children: [
+          showArrow && /* @__PURE__ */ jsxRuntime.jsx(
+            react.FloatingArrow,
+            {
+              ref: arrowRef,
+              context,
+              fill: defaultTheme.defaultThemeCssVariableUsages.palette.background.primary,
+              stroke: defaultTheme.defaultThemeCssVariableUsages.palette.background.secondary,
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: props.tooltip })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.default = Tooltip;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__767b0a12","tooltip-body":"vt_ce_Tooltip_tooltipBody__767b0a12"};
+
+exports.default = modules_efc4e723;

package/dist/cjs/Typography/index.js

@@ -0,0 +1,42 @@
+'use strict';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('color2k');
+require('../styles/css-vars.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultTheme.js');
+require('@mui/system');
+require('../styles/styled.js');
+require('react/jsx-runtime');
+var variants_module = require('./variants.module.scss.js');
+
+const Typography = React.forwardRef(
+  ({ variant = "paragraph1", color = "inherit", ...props }, ref) => {
+    const variantCn = variants_module.default[`t-${variant}`];
+    const VariantComponent = variantComponents[variant];
+    const colorCn = variants_module.default[`c-${color}`];
+    return React.createElement(VariantComponent, {
+      ...props,
+      ref,
+      className: cx.cx(variantCn, colorCn, props.className)
+    });
+  }
+);
+const variantComponents = {
+  title: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  label: "span",
+  paragraph1: "p",
+  paragraph2: "p",
+  paragraph3: "p",
+  button: "span",
+  buttonSmall: "span"
+};
+
+exports.default = Typography;

package/dist/cjs/Typography/variants.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__8a6d644d","t-h1":"vt_ce_Typography_tH1__8a6d644d","t-h2":"vt_ce_Typography_tH2__8a6d644d","t-h3":"vt_ce_Typography_tH3__8a6d644d","t-h4":"vt_ce_Typography_tH4__8a6d644d","t-label":"vt_ce_Typography_tLabel__8a6d644d","t-paragraph1":"vt_ce_Typography_tParagraph1__8a6d644d","t-paragraph2":"vt_ce_Typography_tParagraph2__8a6d644d","t-paragraph3":"vt_ce_Typography_tParagraph3__8a6d644d","t-button":"vt_ce_Typography_tButton__8a6d644d","t-buttonSmall":"vt_ce_Typography_tButtonSmall__8a6d644d","c-primary":"vt_ce_Typography_cPrimary__8a6d644d","c-secondary":"vt_ce_Typography_cSecondary__8a6d644d","c-tertiary":"vt_ce_Typography_cTertiary__8a6d644d","c-disabled":"vt_ce_Typography_cDisabled__8a6d644d"};
+
+exports.default = modules_b5c3b63b;