@blerp/design 1.3.17 → 1.4.1

package/dist/esm/neo-components/Dialog.js

@@ -0,0 +1,423 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { withSx } from './withSx.js';
+
+const _excluded = ["open", "invisible", "children", "onClick", "style"],
+      _excluded2 = ["open", "onClose", "children", "disableEscapeKeyDown", "disableBackdropClick", "disableEnforceFocus", "disableAutoFocus", "disableRestoreFocus", "disablePortal", "hideBackdrop", "keepMounted", "BackdropProps", "container", "style"],
+      _excluded3 = ["open", "onClose", "maxWidth", "fullWidth", "fullScreen", "scroll", "children", "PaperProps", "TransitionProps", "disablePortal", "style"],
+      _excluded4 = ["children", "component", "style"],
+      _excluded5 = ["dividers", "children", "style"],
+      _excluded6 = ["children", "style"],
+      _excluded7 = ["disableSpacing", "children", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Backdrop - Overlay behind modals (replaces MUI Backdrop)
+ */
+
+const BaseBackdrop = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    open,
+    invisible = false,
+    children,
+    onClick,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  if (!open) return null;
+
+  const backdropStyle = _objectSpread({
+    position: "fixed",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    inset: 0,
+    backgroundColor: invisible ? "transparent" : "rgba(0, 0, 0, 0.5)",
+    zIndex: -1,
+    WebkitTapHighlightColor: "transparent"
+  }, style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: backdropStyle,
+    onClick: onClick
+  }, props), children);
+});
+BaseBackdrop.displayName = "BaseBackdrop";
+const Backdrop = withSx(BaseBackdrop);
+/**
+ * Get all focusable elements within a container
+ */
+
+const getFocusableElements = container => {
+  const focusableSelectors = ['a[href]', 'button:not([disabled])', 'textarea:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(', ');
+  return Array.from(container.querySelectorAll(focusableSelectors)).filter(el => el.offsetParent !== null);
+};
+/**
+ * Modal - Base modal component (replaces MUI Modal)
+ */
+
+
+const BaseModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    open,
+    onClose,
+    children,
+    disableEscapeKeyDown = false,
+    disableBackdropClick = false,
+    disableEnforceFocus = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
+    disablePortal = false,
+    hideBackdrop = false,
+    keepMounted = false,
+    BackdropProps = {},
+    container,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const modalRef = useRef(null);
+  const previousActiveElement = useRef(null);
+  const handleRef = useCallback(node => {
+    modalRef.current = node;
+
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  useEffect(() => {
+    if (open && !disableAutoFocus) {
+      previousActiveElement.current = document.activeElement;
+      requestAnimationFrame(() => {
+        if (modalRef.current) {
+          const focusable = getFocusableElements(modalRef.current);
+
+          if (focusable.length > 0) {
+            focusable[0].focus();
+          } else {
+            modalRef.current.focus();
+          }
+        }
+      });
+    }
+
+    return () => {
+      if (open && !disableRestoreFocus && previousActiveElement.current) {
+        var _previousActiveElemen, _previousActiveElemen2;
+
+        (_previousActiveElemen = (_previousActiveElemen2 = previousActiveElement.current).focus) === null || _previousActiveElemen === void 0 ? void 0 : _previousActiveElemen.call(_previousActiveElemen2);
+      }
+    };
+  }, [open, disableAutoFocus, disableRestoreFocus]);
+  useEffect(() => {
+    if (!open || disableEscapeKeyDown) return;
+
+    const handleKeyDown = event => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose === null || onClose === void 0 ? void 0 : onClose(event, "escapeKeyDown");
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, disableEscapeKeyDown, onClose]);
+  useEffect(() => {
+    if (!open || disableEnforceFocus) return;
+
+    const handleFocusTrap = event => {
+      if (!modalRef.current) return;
+
+      if (!modalRef.current.contains(event.target)) {
+        event.stopPropagation();
+        const focusable = getFocusableElements(modalRef.current);
+
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          modalRef.current.focus();
+        }
+      }
+    };
+
+    const handleKeyDown = event => {
+      if (event.key !== 'Tab' || !modalRef.current) return;
+      const focusable = getFocusableElements(modalRef.current);
+      if (focusable.length === 0) return;
+      const firstElement = focusable[0];
+      const lastElement = focusable[focusable.length - 1];
+
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    };
+
+    document.addEventListener("focus", handleFocusTrap, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("focus", handleFocusTrap, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, disableEnforceFocus]);
+  useEffect(() => {
+    if (open) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open]); // Handle backdrop click - properly stop propagation for modal content clicks
+
+  const handleModalClick = useCallback(event => {
+    // Stop propagation so document-level handlers don't close parent menus
+    event.stopPropagation();
+  }, []);
+  const handleBackdropClick = useCallback(event => {
+    // Only trigger close if clicking directly on the backdrop, not its children
+    if (event.target === event.currentTarget && !disableBackdropClick) {
+      onClose === null || onClose === void 0 ? void 0 : onClose(event, "backdropClick");
+    }
+  }, [disableBackdropClick, onClose]);
+  if (!open && !keepMounted) return null;
+
+  const modalStyle = _objectSpread({
+    position: "fixed",
+    zIndex: 1300,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: open ? "flex" : "none",
+    alignItems: "center",
+    justifyContent: "center"
+  }, style);
+
+  const backdropStyle = _objectSpread({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: hideBackdrop ? "transparent" : "rgba(0, 0, 0, 0.5)",
+    zIndex: -1
+  }, BackdropProps.style);
+
+  const modalContent = /*#__PURE__*/React.createElement("div", _extends({
+    ref: handleRef,
+    role: "presentation",
+    tabIndex: -1,
+    style: modalStyle,
+    "data-modal-root": "true",
+    "data-modal-disable-portal": disablePortal ? "true" : undefined,
+    onClick: handleModalClick,
+    onMouseDown: handleModalClick
+  }, props), /*#__PURE__*/React.createElement("div", _extends({
+    style: backdropStyle,
+    "aria-hidden": "true",
+    onClick: handleBackdropClick
+  }, BackdropProps)), children);
+
+  if (disablePortal) {
+    return modalContent;
+  }
+
+  return /*#__PURE__*/createPortal(modalContent, container || document.body);
+});
+BaseModal.displayName = "BaseModal";
+const Modal = withSx(BaseModal);
+/**
+ * Dialog - Modal dialog component (replaces MUI Dialog)
+ */
+
+const BaseDialog = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    open,
+    onClose,
+    maxWidth = "sm",
+    fullWidth = false,
+    fullScreen = false,
+    scroll = "paper",
+    children,
+    PaperProps = {},
+    TransitionProps = {},
+    disablePortal = false,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  const maxWidthValues = {
+    xs: "444px",
+    sm: "600px",
+    md: "900px",
+    lg: "1200px",
+    xl: "1536px",
+    false: "none"
+  };
+  const handlePaperClick = useCallback(event => {
+    // Prevent clicks inside the dialog from closing it
+    event.stopPropagation();
+  }, []);
+
+  const dialogPaperStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: fullScreen ? "100%" : "calc(100% - 64px)",
+    overflowY: scroll === "paper" ? "auto" : "visible",
+    backgroundColor: "var(--flyout-background, #fff)",
+    color: "var(--body-text, rgba(0, 0, 0, 0.87))",
+    borderRadius: fullScreen ? 0 : "8px",
+    boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
+    boxSizing: "border-box",
+    isolation: "isolate"
+  }, fullScreen && {
+    width: "100%",
+    height: "100%",
+    maxWidth: "none",
+    maxHeight: "none"
+  }), !fullScreen && fullWidth && {
+    width: "calc(100% - 64px)",
+    maxWidth: maxWidthValues[maxWidth] || maxWidth
+  }), !fullScreen && !fullWidth && {
+    width: "fit-content",
+    minWidth: "280px",
+    maxWidth: maxWidthValues[maxWidth] || maxWidth
+  }), PaperProps.style);
+
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    ref: ref,
+    open: open,
+    onClose: onClose,
+    disablePortal: disablePortal,
+    style: style
+  }, props), /*#__PURE__*/React.createElement("div", _extends({
+    role: "dialog",
+    "aria-modal": "true",
+    style: dialogPaperStyle,
+    onClick: handlePaperClick,
+    onMouseDown: handlePaperClick
+  }, PaperProps), children));
+});
+BaseDialog.displayName = "BaseDialog";
+const Dialog = withSx(BaseDialog);
+/**
+ * DialogTitle - Title for dialogs
+ */
+
+const DialogTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    children,
+    component: Component = "h2",
+    style
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded4);
+
+  const titleStyle = _objectSpread({
+    margin: 0,
+    padding: "16px 24px",
+    fontSize: "1.25rem",
+    fontWeight: 500,
+    lineHeight: 1.6
+  }, style);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    style: titleStyle
+  }, props), children);
+});
+DialogTitle.displayName = "DialogTitle";
+/**
+ * DialogContent - Content area for dialogs
+ */
+
+const DialogContent = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+  let {
+    dividers = false,
+    children,
+    style
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded5);
+
+  const contentStyle = _objectSpread(_objectSpread({
+    flex: "1 1 auto",
+    overflowY: "auto",
+    padding: "20px 24px"
+  }, dividers && {
+    borderTop: "1px solid var(--border-color, rgba(0, 0, 0, 0.12))",
+    borderBottom: "1px solid var(--border-color, rgba(0, 0, 0, 0.12))",
+    padding: "16px 24px"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: contentStyle
+  }, props), children);
+});
+DialogContent.displayName = "DialogContent";
+/**
+ * DialogContentText - Text inside dialog content
+ */
+
+const DialogContentText = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+    children,
+    style
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded6);
+
+  const textStyle = _objectSpread({
+    margin: 0,
+    color: "var(--secondary-text, rgba(0, 0, 0, 0.6))",
+    fontSize: "1rem",
+    lineHeight: 1.5
+  }, style);
+
+  return /*#__PURE__*/React.createElement("p", _extends({
+    ref: ref,
+    style: textStyle
+  }, props), children);
+});
+DialogContentText.displayName = "DialogContentText";
+/**
+ * DialogActions - Action buttons for dialogs
+ */
+
+const DialogActions = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let {
+    disableSpacing = false,
+    children,
+    style
+  } = _ref7,
+      props = _objectWithoutProperties(_ref7, _excluded7);
+
+  const actionsStyle = _objectSpread(_objectSpread({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "8px"
+  }, !disableSpacing && {
+    gap: "8px"
+  }), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    style: actionsStyle
+  }, props), children);
+});
+DialogActions.displayName = "DialogActions";
+
+export { Backdrop, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Modal, Dialog as default };

package/dist/esm/neo-components/Fab.js

@@ -0,0 +1,225 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import { withSx } from './withSx.js';
+
+const _excluded = ["children", "color", "size", "variant", "disabled", "href", "onClick", "className", "style"],
+      _excluded2 = ["ariaLabel", "children", "direction", "hidden", "icon", "onClose", "onOpen", "open", "FabProps", "className", "style"],
+      _excluded3 = ["icon", "tooltipTitle", "tooltipOpen", "tooltipPlacement", "onClick", "FabProps", "className", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/**
+ * Floating Action Button (FAB)
+ */
+
+const FabBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    color = "primary",
+    size = "large",
+    variant = "circular",
+    disabled = false,
+    href,
+    onClick,
+    className,
+    style
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const sizeStyles = {
+    small: {
+      width: 40,
+      height: 40,
+      fontSize: 18
+    },
+    medium: {
+      width: 48,
+      height: 48,
+      fontSize: 20
+    },
+    large: {
+      width: 56,
+      height: 56,
+      fontSize: 24
+    }
+  };
+  const colorStyles = {
+    primary: {
+      backgroundColor: "#7C4DFF",
+      color: "#FFFFFF"
+    },
+    secondary: {
+      backgroundColor: "#FF4081",
+      color: "#FFFFFF"
+    },
+    default: {
+      backgroundColor: "#E0E0E0",
+      color: "#000000"
+    },
+    inherit: {
+      backgroundColor: "inherit",
+      color: "inherit"
+    }
+  };
+
+  const baseStyle = _objectSpread(_objectSpread(_objectSpread({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "none",
+    borderRadius: variant === "extended" ? 24 : "50%",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    boxShadow: "0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12)",
+    transition: "background-color 0.2s, box-shadow 0.2s",
+    textDecoration: "none",
+    padding: variant === "extended" ? "0 16px" : 0,
+    minWidth: variant === "extended" ? 48 : undefined
+  }, sizeStyles[size]), colorStyles[color]), style);
+
+  const Component = href ? "a" : "button";
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle,
+    disabled: disabled,
+    href: href,
+    onClick: onClick
+  }, props), children);
+});
+FabBase.displayName = "Fab";
+const Fab = withSx(FabBase);
+/**
+ * SpeedDial - FAB that reveals related actions
+ */
+
+const SpeedDialBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    ariaLabel,
+    children,
+    direction = "up",
+    hidden = false,
+    icon,
+    onClose,
+    onOpen,
+    open: controlledOpen,
+    FabProps = {},
+    className,
+    style
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const handleToggle = () => {
+    if (controlledOpen === undefined) {
+      setInternalOpen(!internalOpen);
+    }
+
+    if (open) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    } else {
+      onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }
+  };
+
+  const directionStyles = {
+    up: {
+      flexDirection: "column-reverse",
+      bottom: 16,
+      right: 16
+    },
+    down: {
+      flexDirection: "column",
+      top: 16,
+      right: 16
+    },
+    left: {
+      flexDirection: "row-reverse",
+      bottom: 16,
+      right: 16
+    },
+    right: {
+      flexDirection: "row",
+      bottom: 16,
+      left: 16
+    }
+  };
+
+  const baseStyle = _objectSpread(_objectSpread({
+    position: "fixed",
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    zIndex: 1050,
+    visibility: hidden ? "hidden" : "visible"
+  }, directionStyles[direction]), style);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: baseStyle
+  }, props), /*#__PURE__*/React.createElement(Fab, _extends({
+    "aria-label": ariaLabel,
+    onClick: handleToggle
+  }, FabProps), icon), open && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: directionStyles[direction].flexDirection,
+      gap: 8
+    }
+  }, children));
+});
+SpeedDialBase.displayName = "SpeedDial";
+const SpeedDial = withSx(SpeedDialBase);
+/**
+ * SpeedDialAction - Individual action in SpeedDial
+ */
+
+const SpeedDialActionBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    icon,
+    tooltipTitle,
+    tooltipOpen = false,
+    tooltipPlacement = "left",
+    onClick,
+    FabProps = {},
+    className,
+    style
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded3);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: className,
+    style: _objectSpread({
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center"
+    }, style)
+  }, props), tooltipOpen && tooltipTitle && /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      [tooltipPlacement]: "100%",
+      marginLeft: tooltipPlacement === "left" ? -8 : 8,
+      marginRight: tooltipPlacement === "right" ? -8 : 8,
+      backgroundColor: "#616161",
+      color: "#fff",
+      padding: "4px 8px",
+      borderRadius: 4,
+      fontSize: 12,
+      whiteSpace: "nowrap"
+    }
+  }, tooltipTitle), /*#__PURE__*/React.createElement(Fab, _extends({
+    size: "small",
+    onClick: onClick
+  }, FabProps), icon));
+});
+SpeedDialActionBase.displayName = "SpeedDialAction";
+withSx(SpeedDialActionBase);
+
+export { Fab, SpeedDial };