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

package/dist/cjs/Dialog/components.js

@@ -0,0 +1,250 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@floating-ui/react');
+var styles_module = require('./styles.module.scss.js');
+var state = require('./state.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');
+var portal = require('../styles/portal.js');
+require('../styles/css-vars.js');
+var index$1 = require('../Button/index.js');
+var index = require('../Typography/index.js');
+var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Dialog = React__namespace.forwardRef(function Dialog2({
+  children,
+  portalEl,
+  style,
+  className,
+  overlayStyle,
+  overlayClassName,
+  lockScroll = true,
+  disableAutoFocus = false,
+  "data-testid": dataTestId,
+  ...options
+}, propRef) {
+  const dialog = state.useDialog(options);
+  const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = react.useTransitionStyles(dialog.context, {
+    duration: 225,
+    initial: {
+      opacity: 0
+    }
+  });
+  const { isMounted: innerIsMounted, styles: innerTransitionStyles } = react.useTransitionStyles(dialog.context, {
+    duration: 225,
+    initial: {
+      transform: `scale(95%)`
+    }
+  });
+  const ref = react.useMergeRefs([dialog.context.refs.setFloating, propRef]);
+  let content = null;
+  if (overlayIsMounted || innerIsMounted) {
+    content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.FloatingOverlay,
+      {
+        style: {
+          ...overlayTransitionStyles,
+          ...overlayStyle
+        },
+        className: cx.cx(styles_module.default["dialog-overlay"], overlayClassName),
+        lockScroll,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.FloatingFocusManager,
+          {
+            context: dialog.context,
+            disabled: disableAutoFocus,
+            children: /* @__PURE__ */ jsxRuntime.jsx(portal.PortalThemeRelay, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref,
+                "aria-labelledby": dialog.labelId,
+                "aria-describedby": dialog.descriptionId,
+                ...dialog.getFloatingProps(),
+                "data-testid": dataTestId,
+                style: {
+                  ...innerTransitionStyles,
+                  ...style
+                },
+                className: cx.cx(styles_module.default["dialog"], className),
+                children
+              }
+            ) })
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(state.DialogContext.Provider, { value: dialog, children: content });
+});
+const DialogStart = React__namespace.forwardRef(
+  function DialogStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["dialog-start"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogContent = React__namespace.forwardRef(function DialogContent2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-content"], props.className),
+      children
+    }
+  );
+});
+const DialogEnd = React__namespace.forwardRef(
+  function DialogEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["dialog-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DialogTitle = React__namespace.forwardRef(function DialogTitle2({ children, ...props }, ref) {
+  const { setLabelId } = state.useDialogContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogStart, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "h4",
+      color: "primary",
+      ref,
+      id,
+      leadingTrim: true,
+      ...props,
+      className: cx.cx(styles_module.default["dialog-title"], props.className),
+      children
+    }
+  ) });
+});
+const DialogTypography = React__namespace.forwardRef(function DialogTypography2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-typography"], props.className),
+      children
+    }
+  );
+});
+const DialogDescription = React__namespace.forwardRef(function DialogDescription2({ children, ...props }, ref) {
+  const { setDescriptionId } = state.useDialogContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
+});
+const DialogActions = React__namespace.forwardRef(function DialogActions2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogEnd, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["dialog-actions"], props.className),
+      children
+    }
+  ) });
+});
+const DialogCloseButton = React__namespace.forwardRef(function DialogCloseButton2(props, ref) {
+  const { dismiss } = state.useDialogContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+const DialogCloseIconButton = React__namespace.forwardRef(function DialogCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
+  const { dismiss } = state.useDialogContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$2.default,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      },
+      children
+    }
+  );
+});
+
+exports.DialogActions = DialogActions;
+exports.DialogCloseButton = DialogCloseButton;
+exports.DialogCloseIconButton = DialogCloseIconButton;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogEnd = DialogEnd;
+exports.DialogStart = DialogStart;
+exports.DialogTitle = DialogTitle;
+exports.DialogTypography = DialogTypography;
+exports.default = Dialog;

package/dist/cjs/Dialog/factory.js

@@ -0,0 +1,16 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components = require('./components.js');
+
+function createDialogComponent({ portalEl }) {
+  return React.forwardRef(
+    function ScopedDialog(props, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components.default, { portalEl, ref, ...props });
+    }
+  );
+}
+
+exports.createDialogComponent = createDialogComponent;

package/dist/cjs/Dialog/state.js

@@ -0,0 +1,72 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+var react = require('@floating-ui/react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function useDialog({
+  open,
+  onDismiss: dismissDialog,
+  preventOutsideDismiss,
+  preventEscapeDismiss
+}) {
+  const [labelId, setLabelId] = React__namespace.useState();
+  const [descriptionId, setDescriptionId] = React__namespace.useState();
+  const data = react.useFloating({
+    open,
+    onOpenChange: (newOpen) => !newOpen && typeof dismissDialog === "function" && dismissDialog()
+  });
+  const context = data.context;
+  const dismiss = react.useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    outsidePress: !preventOutsideDismiss,
+    escapeKey: !preventEscapeDismiss
+  });
+  const role = react.useRole(context);
+  const interactions = react.useInteractions([dismiss, role]);
+  return React__namespace.useMemo(
+    () => ({
+      open,
+      dismiss: dismissDialog,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, dismissDialog, interactions, data, labelId, descriptionId]
+  );
+}
+const DialogContext = React__namespace.createContext(null);
+const useDialogContext = () => {
+  const context = React__namespace.useContext(DialogContext);
+  if (context == null) {
+    throw new Error("Dialog components must be wrapped in <Dialog />");
+  }
+  return context;
+};
+
+exports.DialogContext = DialogContext;
+exports.useDialog = useDialog;
+exports.useDialogContext = useDialogContext;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = {"dialog-overlay":"vt_ce_Dialog_dialog-overlay__9285b892","dialog":"vt_ce_Dialog_dialog__6471c2e3","dialog-start":"vt_ce_Dialog_dialog-start__3d0c37c9","dialog-end":"vt_ce_Dialog_dialog-end__d33601cf","dialog-content":"vt_ce_Dialog_dialog-content__237fe65e","dialog-title":"vt_ce_Dialog_dialog-title__d88ef551","dialog-typography":"vt_ce_Dialog_dialog-typography__94d06942","dialog-actions":"vt_ce_Dialog_dialog-actions__e259c208"};
+
+exports.default = css;

package/dist/cjs/Drawer/components.js

@@ -0,0 +1,291 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@floating-ui/react');
+var reactRemoveScroll = require('react-remove-scroll');
+var styles_module = require('./styles.module.scss.js');
+var state = require('./state.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$1 = require('../Button/index.js');
+var index = require('../Typography/index.js');
+var index$2 = require('../IconButton/index.js');
+var internal = require('../Icon/internal.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Drawer = React__namespace.forwardRef(function Drawer2({
+  placement = "end",
+  children,
+  portalEl,
+  style,
+  className,
+  overlay = true,
+  strategy = "fixed",
+  overlayStyle,
+  overlayClassName,
+  lockScroll = true,
+  disableAutoFocus = false,
+  "data-testid": dataTestId,
+  ...options
+}, propRef) {
+  const drawer = state.useDrawer({
+    ...options,
+    dismissEnabled: overlay
+  });
+  const { isMounted: overlayIsMounted, styles: overlayTransitionStyles } = react.useTransitionStyles(drawer.context, {
+    duration: 225,
+    initial: {
+      opacity: 0
+    }
+  });
+  const { isMounted: innerIsMounted, styles: innerTransitionStyles } = react.useTransitionStyles(drawer.context, {
+    duration: 225,
+    initial: {
+      transform: `translateX(${placement === "start" ? "-66px" : "66px"})`
+    }
+  });
+  const ref = react.useMergeRefs([drawer.context.refs.setFloating, propRef]);
+  const strategyCn = styles_module.default[`drawer-overlay-strategy-${strategy}`];
+  const placementCn = styles_module.default[`drawer-overlay-placement-${placement}`];
+  let content = null;
+  if (overlayIsMounted || innerIsMounted) {
+    content = /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { root: portalEl, children: /* @__PURE__ */ jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { enabled: overlay && lockScroll, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          ...overlayTransitionStyles,
+          ...overlayStyle
+        },
+        className: cx.cx(
+          styles_module.default["drawer-overlay"],
+          strategyCn,
+          placementCn,
+          overlay && styles_module.default["drawer-overlay-enabled"],
+          overlayClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            ...drawer.getFloatingProps(),
+            "aria-labelledby": drawer.labelId,
+            "aria-describedby": drawer.descriptionId,
+            className: styles_module.default["drawer-wrapper"],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.FloatingFocusManager,
+              {
+                context: drawer.context,
+                disabled: disableAutoFocus,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-testid": dataTestId,
+                    className: cx.cx(styles_module.default["drawer"], className),
+                    style: {
+                      ...innerTransitionStyles,
+                      ...style
+                    },
+                    children
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(state.DrawerContext.Provider, { value: drawer, children: content });
+});
+const DrawerStart = React__namespace.forwardRef(
+  function DrawerStart2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["drawer-start"], props.className),
+        children
+      }
+    );
+  }
+);
+const DrawerContent = React__namespace.forwardRef(function DrawerContent2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["drawer-content"], props.className),
+      children
+    }
+  );
+});
+const DrawerEnd = React__namespace.forwardRef(
+  function DrawerEnd2({ children, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        className: cx.cx(styles_module.default["drawer-end"], props.className),
+        children
+      }
+    );
+  }
+);
+const DrawerTitle = React__namespace.forwardRef(function DrawerTitle2({
+  children,
+  actions,
+  container = "text",
+  palette = defaultTheme.defaultThemeCssVariableUsages.palette.brand["1"].base,
+  ...props
+}, ref) {
+  const { setLabelId } = state.useDrawerContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [id, setLabelId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DrawerStart,
+    {
+      "data-container": container,
+      style: {
+        ...{
+          "--vt-ce-drawer-palette-surface": palette.surface,
+          "--vt-ce-drawer-palette-on": palette.on
+        }
+      },
+      className: styles_module.default["drawer-title-container"],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index.default,
+          {
+            variant: "title",
+            ref,
+            id,
+            color: "inherit",
+            leadingTrim: true,
+            ...props,
+            className: cx.cx(styles_module.default["drawer-title"], props.className),
+            children
+          }
+        ),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["drawer-title-actions"], children: actions })
+      ]
+    }
+  );
+});
+const DrawerTypography = React__namespace.forwardRef(function DrawerTypography2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["drawer-typography"], props.className),
+      children
+    }
+  );
+});
+const DrawerDescription = React__namespace.forwardRef(function DrawerDescription2({ children, ...props }, ref) {
+  const { setDescriptionId } = state.useDrawerContext();
+  const id = React__namespace.useId();
+  React__namespace.useLayoutEffect(() => {
+    setDescriptionId(id);
+    return () => setDescriptionId(void 0);
+  }, [id, setDescriptionId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DrawerTypography,
+    {
+      variant: "paragraph2",
+      color: "primary",
+      ...props,
+      ref,
+      id,
+      children
+    }
+  );
+});
+const DrawerActions = React__namespace.forwardRef(function DrawerActions2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerEnd, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cx.cx(styles_module.default["drawer-actions"], props.className),
+      children
+    }
+  ) });
+});
+const DrawerCloseButton = React__namespace.forwardRef(function DrawerCloseButton2(props, ref) {
+  const { dismiss } = state.useDrawerContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      variant: "tertiary",
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      }
+    }
+  );
+});
+const DrawerCloseIconButton = React__namespace.forwardRef(function DrawerCloseIconButton2({ children = /* @__PURE__ */ jsxRuntime.jsx(internal.CloseIcon, {}), ...props }, ref) {
+  const { dismiss } = state.useDrawerContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$2.default,
+    {
+      ...props,
+      ref,
+      onClick: (e) => {
+        dismiss();
+        props.onClick?.(e);
+      },
+      children
+    }
+  );
+});
+
+exports.DrawerActions = DrawerActions;
+exports.DrawerCloseButton = DrawerCloseButton;
+exports.DrawerCloseIconButton = DrawerCloseIconButton;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerEnd = DrawerEnd;
+exports.DrawerStart = DrawerStart;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTypography = DrawerTypography;
+exports.default = Drawer;

package/dist/cjs/Drawer/factory.js

@@ -0,0 +1,16 @@
+'use strict';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var components = require('./components.js');
+
+function createDrawerComponent(overrides) {
+  return React.forwardRef(
+    function ScopedDrawer(props, ref) {
+      return /* @__PURE__ */ jsxRuntime.jsx(components.default, { ...overrides, ref, ...props });
+    }
+  );
+}
+
+exports.createDrawerComponent = createDrawerComponent;