@omnitron-dev/prism 0.1.3 → 0.2.0

package/dist/chunk-2FYNRDXR.js

@@ -0,0 +1,192 @@
+import { useState, useCallback } from 'react';
+import Popover from '@mui/material/Popover';
+import { styled, alpha } from '@mui/material/styles';
+import { listClasses } from '@mui/material/List';
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var POPOVER_DISTANCE = 0.75;
+function calculateAnchorOrigin(arrow = "top-right") {
+  const configs = {
+    "top-left": {
+      paperStyles: { ml: -POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" }
+    },
+    "top-center": {
+      paperStyles: void 0,
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" }
+    },
+    "top-right": {
+      paperStyles: { ml: POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    "bottom-left": {
+      paperStyles: { ml: -POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "bottom", horizontal: "left" }
+    },
+    "bottom-center": {
+      paperStyles: void 0,
+      anchorOrigin: { vertical: "top", horizontal: "center" },
+      transformOrigin: { vertical: "bottom", horizontal: "center" }
+    },
+    "bottom-right": {
+      paperStyles: { ml: POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "bottom", horizontal: "right" }
+    },
+    "left-top": {
+      paperStyles: { mt: -POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "left" }
+    },
+    "left-center": {
+      paperStyles: void 0,
+      anchorOrigin: { vertical: "center", horizontal: "right" },
+      transformOrigin: { vertical: "center", horizontal: "left" }
+    },
+    "left-bottom": {
+      paperStyles: { mt: POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "bottom", horizontal: "left" }
+    },
+    "right-top": {
+      paperStyles: { mt: -POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "right" }
+    },
+    "right-center": {
+      paperStyles: void 0,
+      anchorOrigin: { vertical: "center", horizontal: "left" },
+      transformOrigin: { vertical: "center", horizontal: "right" }
+    },
+    "right-bottom": {
+      paperStyles: { mt: POPOVER_DISTANCE },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "bottom", horizontal: "right" }
+    }
+  };
+  return configs[arrow] || configs["top-right"];
+}
+var Arrow = styled("span", {
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(({ theme, ownerState }) => {
+  const { size, offset, placement } = ownerState;
+  const directions = {
+    top: { top: 0, rotate: "135deg", translate: "0 -50%" },
+    bottom: { bottom: 0, rotate: "-45deg", translate: "0 50%" },
+    left: { left: 0, rotate: "45deg", translate: "-50% 0" },
+    right: { right: 0, rotate: "-135deg", translate: "50% 0" }
+  };
+  const getDirection = () => {
+    if (placement.startsWith("top-")) return directions.top;
+    if (placement.startsWith("bottom-")) return directions.bottom;
+    if (placement.startsWith("left-")) return directions.left;
+    if (placement.startsWith("right-")) return directions.right;
+    return {};
+  };
+  const getPosition = () => {
+    if (placement.endsWith("-left")) return { left: offset };
+    if (placement.endsWith("-right")) return { right: offset };
+    if (placement.endsWith("-top")) return { top: offset };
+    if (placement.endsWith("-bottom")) return { bottom: offset };
+    if (placement.endsWith("-center")) {
+      if (placement.startsWith("top-") || placement.startsWith("bottom-")) {
+        return { left: 0, right: 0, margin: "auto" };
+      }
+      return { top: 0, bottom: 0, margin: "auto" };
+    }
+    return {};
+  };
+  return {
+    width: size,
+    height: size,
+    position: "absolute",
+    borderBottomLeftRadius: size / 4,
+    clipPath: "polygon(0% 0%, 100% 100%, 0% 100%)",
+    backgroundColor: theme.palette.background.paper,
+    border: `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`,
+    ...getDirection(),
+    ...getPosition()
+  };
+});
+function CustomPopover({
+  open,
+  onClose,
+  children,
+  anchorEl,
+  arrow,
+  minWidth = 140,
+  slotProps,
+  ...other
+}) {
+  const arrowSize = arrow?.size ?? 14;
+  const arrowOffset = arrow?.offset ?? 17;
+  const arrowPlacement = arrow?.placement ?? "top-right";
+  const hideArrow = arrow?.hide ?? false;
+  const { paperStyles, anchorOrigin, transformOrigin } = calculateAnchorOrigin(arrowPlacement);
+  const isOpen = Boolean(open);
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: isOpen,
+      anchorEl,
+      onClose,
+      anchorOrigin,
+      transformOrigin,
+      slotProps: {
+        ...slotProps,
+        paper: {
+          ...typeof slotProps?.paper === "object" ? slotProps.paper : {},
+          sx: [
+            paperStyles,
+            {
+              overflow: "inherit",
+              [`& .${listClasses.root}`]: { minWidth },
+              [`& .${menuItemClasses.root}`]: { gap: 2 }
+            },
+            ...typeof slotProps?.paper === "object" && slotProps.paper && "sx" in slotProps.paper ? Array.isArray(slotProps.paper.sx) ? slotProps.paper.sx : [slotProps.paper.sx] : []
+          ]
+        }
+      },
+      ...other,
+      children: [
+        !hideArrow && /* @__PURE__ */ jsx(
+          Arrow,
+          {
+            ownerState: {
+              size: arrowSize,
+              offset: arrowOffset,
+              placement: arrowPlacement
+            },
+            sx: arrow?.sx
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function usePopover() {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const onOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const onClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  return {
+    open: Boolean(anchorEl),
+    anchorEl,
+    onOpen,
+    onClose,
+    setAnchorEl
+  };
+}
+
+export { CustomPopover, usePopover };
+//# sourceMappingURL=chunk-2FYNRDXR.js.map
+//# sourceMappingURL=chunk-2FYNRDXR.js.map

package/dist/chunk-2FYNRDXR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/popover/popover.tsx"],"names":[],"mappings":"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","file":"chunk-2FYNRDXR.js","sourcesContent":["'use client';\n\n/**\n * Popover Component\n *\n * Enhanced popover component with arrow support and useful hook.\n *\n * @module @omnitron-dev/prism/components/popover\n */\n\nimport type { ReactNode, MouseEvent, Dispatch, SetStateAction } from 'react';\nimport { useState, useCallback } from 'react';\nimport Popover from '@mui/material/Popover';\nimport { styled, alpha } from '@mui/material/styles';\nimport type { PopoverProps, PopoverOrigin } from '@mui/material/Popover';\nimport type { SxProps, Theme, CSSObject } from '@mui/material/styles';\nimport { listClasses } from '@mui/material/List';\nimport { menuItemClasses } from '@mui/material/MenuItem';\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\nexport type ArrowPlacement =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right'\n  | 'left-top'\n  | 'left-center'\n  | 'left-bottom'\n  | 'right-top'\n  | 'right-center'\n  | 'right-bottom';\n\nexport interface PopoverArrowProps {\n  /** Hide the arrow */\n  hide?: boolean;\n  /** Arrow size in pixels */\n  size?: number;\n  /** Offset from edge */\n  offset?: number;\n  /** Arrow placement */\n  placement?: ArrowPlacement;\n  /** Additional styles */\n  sx?: SxProps<Theme>;\n}\n\nexport interface CustomPopoverProps extends Omit<PopoverProps, 'open'> {\n  /** Whether the popover is open */\n  open: boolean | Element | null;\n  /** Close handler */\n  onClose: () => void;\n  /** Arrow configuration */\n  arrow?: PopoverArrowProps;\n  /** Minimum width of the popover */\n  minWidth?: number | string;\n}\n\n// =============================================================================\n// UTILS\n// =============================================================================\n\nconst POPOVER_DISTANCE = 0.75;\n\ninterface AnchorOriginConfig {\n  paperStyles?: CSSObject;\n  anchorOrigin: PopoverOrigin;\n  transformOrigin: PopoverOrigin;\n}\n\nfunction calculateAnchorOrigin(arrow: ArrowPlacement = 'top-right'): AnchorOriginConfig {\n  const configs: Record<ArrowPlacement, AnchorOriginConfig> = {\n    'top-left': {\n      paperStyles: { ml: -POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n      transformOrigin: { vertical: 'top', horizontal: 'left' },\n    },\n    'top-center': {\n      paperStyles: undefined,\n      anchorOrigin: { vertical: 'bottom', horizontal: 'center' },\n      transformOrigin: { vertical: 'top', horizontal: 'center' },\n    },\n    'top-right': {\n      paperStyles: { ml: POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n      transformOrigin: { vertical: 'top', horizontal: 'right' },\n    },\n    'bottom-left': {\n      paperStyles: { ml: -POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'top', horizontal: 'left' },\n      transformOrigin: { vertical: 'bottom', horizontal: 'left' },\n    },\n    'bottom-center': {\n      paperStyles: undefined,\n      anchorOrigin: { vertical: 'top', horizontal: 'center' },\n      transformOrigin: { vertical: 'bottom', horizontal: 'center' },\n    },\n    'bottom-right': {\n      paperStyles: { ml: POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'top', horizontal: 'right' },\n      transformOrigin: { vertical: 'bottom', horizontal: 'right' },\n    },\n    'left-top': {\n      paperStyles: { mt: -POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'top', horizontal: 'right' },\n      transformOrigin: { vertical: 'top', horizontal: 'left' },\n    },\n    'left-center': {\n      paperStyles: undefined,\n      anchorOrigin: { vertical: 'center', horizontal: 'right' },\n      transformOrigin: { vertical: 'center', horizontal: 'left' },\n    },\n    'left-bottom': {\n      paperStyles: { mt: POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n      transformOrigin: { vertical: 'bottom', horizontal: 'left' },\n    },\n    'right-top': {\n      paperStyles: { mt: -POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'top', horizontal: 'left' },\n      transformOrigin: { vertical: 'top', horizontal: 'right' },\n    },\n    'right-center': {\n      paperStyles: undefined,\n      anchorOrigin: { vertical: 'center', horizontal: 'left' },\n      transformOrigin: { vertical: 'center', horizontal: 'right' },\n    },\n    'right-bottom': {\n      paperStyles: { mt: POPOVER_DISTANCE },\n      anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n      transformOrigin: { vertical: 'bottom', horizontal: 'right' },\n    },\n  };\n\n  return configs[arrow] || configs['top-right'];\n}\n\n// =============================================================================\n// ARROW COMPONENT\n// =============================================================================\n\ninterface ArrowStyledProps {\n  ownerState: {\n    size: number;\n    offset: number;\n    placement: ArrowPlacement;\n  };\n}\n\nconst Arrow = styled('span', {\n  shouldForwardProp: (prop) => prop !== 'ownerState',\n})<ArrowStyledProps>(({ theme, ownerState }) => {\n  const { size, offset, placement } = ownerState;\n\n  const directions: Record<string, CSSObject> = {\n    top: { top: 0, rotate: '135deg', translate: '0 -50%' },\n    bottom: { bottom: 0, rotate: '-45deg', translate: '0 50%' },\n    left: { left: 0, rotate: '45deg', translate: '-50% 0' },\n    right: { right: 0, rotate: '-135deg', translate: '50% 0' },\n  };\n\n  const getDirection = () => {\n    if (placement.startsWith('top-')) return directions.top;\n    if (placement.startsWith('bottom-')) return directions.bottom;\n    if (placement.startsWith('left-')) return directions.left;\n    if (placement.startsWith('right-')) return directions.right;\n    return {};\n  };\n\n  const getPosition = () => {\n    if (placement.endsWith('-left')) return { left: offset };\n    if (placement.endsWith('-right')) return { right: offset };\n    if (placement.endsWith('-top')) return { top: offset };\n    if (placement.endsWith('-bottom')) return { bottom: offset };\n    if (placement.endsWith('-center')) {\n      if (placement.startsWith('top-') || placement.startsWith('bottom-')) {\n        return { left: 0, right: 0, margin: 'auto' };\n      }\n      return { top: 0, bottom: 0, margin: 'auto' };\n    }\n    return {};\n  };\n\n  return {\n    width: size,\n    height: size,\n    position: 'absolute',\n    borderBottomLeftRadius: size / 4,\n    clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',\n    backgroundColor: theme.palette.background.paper,\n    border: `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`,\n    ...getDirection(),\n    ...getPosition(),\n  };\n});\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\n/**\n * CustomPopover - Enhanced popover with arrow support.\n *\n * @example\n * ```tsx\n * const popover = usePopover();\n *\n * <Button onClick={popover.onOpen}>Open Menu</Button>\n *\n * <CustomPopover\n *   open={popover.open}\n *   onClose={popover.onClose}\n *   anchorEl={popover.anchorEl}\n *   arrow={{ placement: 'top-right' }}\n * >\n *   <MenuItem>Option 1</MenuItem>\n *   <MenuItem>Option 2</MenuItem>\n * </CustomPopover>\n * ```\n */\nexport function CustomPopover({\n  open,\n  onClose,\n  children,\n  anchorEl,\n  arrow,\n  minWidth = 140,\n  slotProps,\n  ...other\n}: CustomPopoverProps): ReactNode {\n  const arrowSize = arrow?.size ?? 14;\n  const arrowOffset = arrow?.offset ?? 17;\n  const arrowPlacement = arrow?.placement ?? 'top-right';\n  const hideArrow = arrow?.hide ?? false;\n\n  const { paperStyles, anchorOrigin, transformOrigin } = calculateAnchorOrigin(arrowPlacement);\n\n  const isOpen = Boolean(open);\n\n  return (\n    <Popover\n      open={isOpen}\n      anchorEl={anchorEl}\n      onClose={onClose}\n      anchorOrigin={anchorOrigin}\n      transformOrigin={transformOrigin}\n      slotProps={{\n        ...slotProps,\n        paper: {\n          ...(typeof slotProps?.paper === 'object' ? slotProps.paper : {}),\n          sx: [\n            paperStyles as SxProps<Theme>,\n            {\n              overflow: 'inherit',\n              [`& .${listClasses.root}`]: { minWidth },\n              [`& .${menuItemClasses.root}`]: { gap: 2 },\n            },\n            ...(typeof slotProps?.paper === 'object' && slotProps.paper && 'sx' in slotProps.paper\n              ? Array.isArray(slotProps.paper.sx)\n                ? slotProps.paper.sx\n                : [slotProps.paper.sx]\n              : []),\n          ],\n        },\n      }}\n      {...other}\n    >\n      {!hideArrow && (\n        <Arrow\n          ownerState={{\n            size: arrowSize,\n            offset: arrowOffset,\n            placement: arrowPlacement,\n          }}\n          sx={arrow?.sx}\n        />\n      )}\n      {children}\n    </Popover>\n  );\n}\n\n// =============================================================================\n// HOOK\n// =============================================================================\n\n/**\n * Return type for usePopover hook with generic element type.\n *\n * @typeParam T - The HTML element type (default: HTMLElement)\n */\nexport interface UsePopoverReturn<T extends HTMLElement = HTMLElement> {\n  /** Whether the popover is open */\n  open: boolean;\n  /** The anchor element (typed to T) */\n  anchorEl: T | null;\n  /** Open the popover - accepts MouseEvent with typed currentTarget */\n  onOpen: (event: MouseEvent<T>) => void;\n  /** Close the popover */\n  onClose: () => void;\n  /** Set the anchor element directly (typed to T | null) */\n  setAnchorEl: Dispatch<SetStateAction<T | null>>;\n}\n\n/**\n * usePopover - Generic hook for managing popover state.\n *\n * Type-safe hook that accepts a generic type parameter for the anchor element.\n * This ensures type safety when accessing `event.currentTarget` and `anchorEl`.\n *\n * @typeParam T - The HTML element type (default: HTMLElement)\n * @returns Popover state and controls with typed elements\n *\n * @example\n * ```tsx\n * // Basic usage with default HTMLElement\n * function MenuButton() {\n *   const popover = usePopover();\n *\n *   return (\n *     <>\n *       <IconButton onClick={popover.onOpen}>\n *         <MoreVertIcon />\n *       </IconButton>\n *\n *       <CustomPopover\n *         open={popover.open}\n *         onClose={popover.onClose}\n *         anchorEl={popover.anchorEl}\n *       >\n *         <MenuItem onClick={popover.onClose}>Edit</MenuItem>\n *         <MenuItem onClick={popover.onClose}>Delete</MenuItem>\n *       </CustomPopover>\n *     </>\n *   );\n * }\n *\n * // Type-safe usage with specific element type\n * function TypedButton() {\n *   const popover = usePopover<HTMLButtonElement>();\n *\n *   // TypeScript knows anchorEl is HTMLButtonElement | null\n *   // and onOpen accepts MouseEvent<HTMLButtonElement>\n *\n *   return (\n *     <>\n *       <button onClick={popover.onOpen}>Click me</button>\n *       <Popover open={popover.open} anchorEl={popover.anchorEl} onClose={popover.onClose}>\n *         Content here\n *       </Popover>\n *     </>\n *   );\n * }\n * ```\n */\nexport function usePopover<T extends HTMLElement = HTMLElement>(): UsePopoverReturn<T> {\n  const [anchorEl, setAnchorEl] = useState<T | null>(null);\n\n  const onOpen = useCallback((event: MouseEvent<T>) => {\n    setAnchorEl(event.currentTarget as T);\n  }, []);\n\n  const onClose = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return {\n    open: Boolean(anchorEl),\n    anchorEl,\n    onOpen,\n    onClose,\n    setAnchorEl,\n  };\n}\n"]}