@react-cupertino-ui/context-menu 0.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -0,0 +1,249 @@
+.react-cupertino-ui-context-menu__content, .react-cupertino-ui-context-menu__sub-content {
+  min-width: 220px;
+  background: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(40px) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(40px) saturate(var(--glass-saturation, 180%));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-context-menu__content::before, .react-cupertino-ui-context-menu__sub-content::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
+  border-radius: inherit;
+  opacity: var(--glass-highlight-opacity, 0.95);
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-context-menu__content, .react-cupertino-ui-context-menu__sub-content {
+  border-radius: 12px;
+  padding: 6px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  animation: zoomIn 0.2s ease-out;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-context-menu__content, .react-cupertino-ui-context-menu__sub-content {
+    background: rgba(30, 30, 30, 0.75);
+  }
+}
+.react-cupertino-ui-context-menu__item, .react-cupertino-ui-context-menu__checkbox-item, .react-cupertino-ui-context-menu__radio-item, .react-cupertino-ui-context-menu__sub-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 14px;
+  outline: none;
+  cursor: default;
+  user-select: none;
+  color: var(--foreground);
+}
+.react-cupertino-ui-context-menu__item[data-state=open], .react-cupertino-ui-context-menu__checkbox-item[data-state=open], .react-cupertino-ui-context-menu__radio-item[data-state=open], .react-cupertino-ui-context-menu__sub-trigger[data-state=open] {
+  background: var(--color-blue);
+  color: white;
+}
+.react-cupertino-ui-context-menu__item[data-highlighted], .react-cupertino-ui-context-menu__checkbox-item[data-highlighted], .react-cupertino-ui-context-menu__radio-item[data-highlighted], .react-cupertino-ui-context-menu__sub-trigger[data-highlighted] {
+  background: var(--color-blue);
+  color: white;
+}
+.react-cupertino-ui-context-menu__item[data-highlighted] .react-cupertino-ui-context-menu__shortcut, .react-cupertino-ui-context-menu__checkbox-item[data-highlighted] .react-cupertino-ui-context-menu__shortcut, .react-cupertino-ui-context-menu__radio-item[data-highlighted] .react-cupertino-ui-context-menu__shortcut, .react-cupertino-ui-context-menu__sub-trigger[data-highlighted] .react-cupertino-ui-context-menu__shortcut {
+  color: rgba(255, 255, 255, 0.8);
+}
+.react-cupertino-ui-context-menu__item[data-disabled], .react-cupertino-ui-context-menu__checkbox-item[data-disabled], .react-cupertino-ui-context-menu__radio-item[data-disabled], .react-cupertino-ui-context-menu__sub-trigger[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.react-cupertino-ui-context-menu__item.inset, .react-cupertino-ui-context-menu__checkbox-item.inset, .react-cupertino-ui-context-menu__radio-item.inset, .react-cupertino-ui-context-menu__sub-trigger.inset {
+  padding-left: 32px;
+}
+.react-cupertino-ui-context-menu__separator {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.1);
+  margin: 4px -6px;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-context-menu__separator {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+.react-cupertino-ui-context-menu__label {
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+.react-cupertino-ui-context-menu__label.inset {
+  padding-left: 32px;
+}
+.react-cupertino-ui-context-menu__shortcut {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--muted-foreground);
+  letter-spacing: 1px;
+}
+.react-cupertino-ui-context-menu .checkbox-indicator,
+.react-cupertino-ui-context-menu .radio-indicator {
+  position: absolute;
+  left: 8px;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.react-cupertino-ui-context-menu__preview {
+  width: 100%;
+  margin: 2px 0 6px;
+  display: flex;
+  justify-content: center;
+  --preview-height: 180px;
+}
+.react-cupertino-ui-context-menu__preview.size-sm {
+  --preview-height: 140px;
+}
+.react-cupertino-ui-context-menu__preview.size-lg {
+  --preview-height: 220px;
+}
+.react-cupertino-ui-context-menu__preview-card {
+  width: 100%;
+  border-radius: 18px;
+  overflow: hidden;
+  position: relative;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.65));
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  color: var(--foreground);
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-context-menu__preview-card {
+    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(35, 35, 35, 0.7));
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+}
+.react-cupertino-ui-context-menu__preview-media {
+  width: 100%;
+  height: var(--preview-height);
+  overflow: hidden;
+}
+.react-cupertino-ui-context-menu__preview-media img,
+.react-cupertino-ui-context-menu__preview-media video,
+.react-cupertino-ui-context-menu__preview-media picture,
+.react-cupertino-ui-context-menu__preview-media canvas,
+.react-cupertino-ui-context-menu__preview-media div {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.react-cupertino-ui-context-menu__preview-body {
+  padding: 0.85rem 1rem 0.85rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.react-cupertino-ui-context-menu__preview-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+.react-cupertino-ui-context-menu__preview-subtitle {
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+}
+.react-cupertino-ui-context-menu__preview-children {
+  font-size: 0.78rem;
+  color: color-mix(in srgb, var(--foreground), transparent 40%);
+}
+.react-cupertino-ui-context-menu__preview-meta {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: color-mix(in srgb, var(--foreground), transparent 30%);
+}
+.react-cupertino-ui-context-menu__preview-footer {
+  padding: 0 1rem 0.85rem;
+  font-size: 0.78rem;
+  color: color-mix(in srgb, var(--foreground), transparent 20%);
+}
+.react-cupertino-ui-context-menu__trigger-preview {
+  position: fixed;
+  z-index: 60;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(0.95);
+  opacity: 0;
+  transition: opacity 200ms ease, transform 320ms cubic-bezier(0.18, 0.86, 0.35, 1.15);
+  --trigger-preview-width: 280px;
+}
+.react-cupertino-ui-context-menu__trigger-preview.size-sm {
+  --trigger-preview-width: 220px;
+}
+.react-cupertino-ui-context-menu__trigger-preview.size-lg {
+  --trigger-preview-width: 320px;
+}
+.react-cupertino-ui-context-menu__trigger-preview[data-state=open] {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+.react-cupertino-ui-context-menu__trigger-preview-inner {
+  width: min(var(--trigger-preview-width), 100vw - 2rem);
+  border-radius: 22px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(var(--glass-blur, 48px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 48px)) saturate(var(--glass-saturation, 180%));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-context-menu__trigger-preview-inner::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
+  border-radius: inherit;
+  opacity: var(--glass-highlight-opacity, 0.95);
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-context-menu__trigger-preview-inner {
+  box-shadow: 0 30px 70px rgba(15, 15, 15, 0.35), 0 8px 24px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(var(--glass-blur, 48px)) saturate(170%);
+}
+
+[data-context-menu-trigger=true] {
+  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.4, 1), filter 200ms ease, box-shadow 200ms ease;
+  will-change: transform;
+}
+[data-context-menu-trigger=true][data-preview-visible=true] {
+  transform: scale(0.97) translateZ(0);
+  filter: brightness(1.02);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-context-menu-trigger=true] {
+    transition: none;
+  }
+  [data-context-menu-trigger=true][data-preview-visible=true] {
+    transform: none;
+  }
+  .react-cupertino-ui-context-menu__trigger-preview {
+    transition: none;
+  }
+}
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import "./index.scss";
+type PreviewPlacement = "menu" | "trigger" | "both";
+interface ContextMenuProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>, "children"> {
+    children?: React.ReactNode;
+}
+declare const ContextMenu: ({ children, onOpenChange, ...props }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
+    preview?: React.ReactNode;
+    previewSize?: "sm" | "md" | "lg";
+    previewPlacement?: PreviewPlacement;
+    previewOffset?: number;
+}
+declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface ContextMenuPreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    media?: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    meta?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const ContextMenuPreview: {
+    ({ className, media, title, subtitle, meta, footer, children, ...props }: ContextMenuPreviewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, ContextMenuPreview, };
+export type { ContextMenuContentProps, ContextMenuProps };

package/dist/index.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const defaultPreviewConfig = {
+    size: "md",
+    placement: "menu",
+    offset: -28,
+};
+const ContextMenuPreviewContext = React.createContext(null);
+const useContextMenuPreview = () => React.useContext(ContextMenuPreviewContext);
+const ContextMenuTriggerPreview = () => {
+    const context = useContextMenuPreview();
+    const previewNode = context?.previewState.node;
+    const { placement, size, offset } = context?.previewState.config ?? defaultPreviewConfig;
+    const triggerNode = context?.triggerNode;
+    const shouldShow = Boolean(typeof document !== "undefined" &&
+        previewNode &&
+        triggerNode &&
+        context?.isOpen &&
+        (placement === "trigger" || placement === "both"));
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const updatePosition = React.useCallback(() => {
+        if (!triggerNode || typeof window === "undefined") {
+            return;
+        }
+        const rect = triggerNode.getBoundingClientRect();
+        setPosition({
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2 + offset,
+        });
+    }, [offset, triggerNode]);
+    React.useLayoutEffect(() => {
+        if (shouldShow) {
+            updatePosition();
+        }
+    }, [shouldShow, updatePosition]);
+    React.useEffect(() => {
+        if (!shouldShow) {
+            return;
+        }
+        const handle = () => updatePosition();
+        window.addEventListener("resize", handle);
+        window.addEventListener("scroll", handle, true);
+        return () => {
+            window.removeEventListener("resize", handle);
+            window.removeEventListener("scroll", handle, true);
+        };
+    }, [shouldShow, updatePosition]);
+    if (!shouldShow || typeof document === "undefined") {
+        return null;
+    }
+    return createPortal(_jsx("div", { className: cn("react-cupertino-ui-context-menu__trigger-preview", `size-${size}`), style: { left: `${position.x}px`, top: `${position.y}px` }, "data-state": context?.isOpen ? "open" : "closed", children: _jsx("div", { className: "react-cupertino-ui-context-menu__trigger-preview-inner", children: previewNode }) }), document.body);
+};
+function assignRef(ref, value) {
+    if (!ref)
+        return;
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    ref.current = value;
+}
+const ContextMenu = ({ children, onOpenChange, ...props }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [triggerNode, setTriggerNode] = React.useState(null);
+    const [previewState, setPreviewState] = React.useState({
+        node: null,
+        config: defaultPreviewConfig,
+    });
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        setIsOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange]);
+    const setPreview = React.useCallback((node, config) => {
+        if (!node) {
+            setPreviewState({ node: null, config: defaultPreviewConfig });
+            return;
+        }
+        setPreviewState((prev) => ({
+            node,
+            config: {
+                size: config?.size ?? prev.config.size,
+                placement: config?.placement ?? prev.config.placement,
+                offset: config?.offset ?? prev.config.offset,
+            },
+        }));
+    }, []);
+    const contextValue = React.useMemo(() => ({
+        triggerNode,
+        setTriggerNode,
+        previewState,
+        setPreview,
+        isOpen,
+    }), [isOpen, previewState, setPreview, triggerNode]);
+    return (_jsxs(ContextMenuPreviewContext.Provider, { value: contextValue, children: [_jsx(ContextMenuPrimitive.Root, { ...props, onOpenChange: handleOpenChange, children: children }), _jsx(ContextMenuTriggerPreview, {})] }));
+};
+const ContextMenuTrigger = React.forwardRef((props, forwardedRef) => {
+    const { className, ...rest } = props;
+    const context = useContextMenuPreview();
+    const showPreview = Boolean(context?.isOpen &&
+        context.previewState.node &&
+        (context.previewState.config.placement === "trigger" ||
+            context.previewState.config.placement === "both"));
+    const setTriggerNode = context?.setTriggerNode;
+    const composedRef = React.useCallback((node) => {
+        if (setTriggerNode) {
+            if (node instanceof HTMLElement) {
+                setTriggerNode(node);
+            }
+            else {
+                setTriggerNode(null);
+            }
+        }
+        assignRef(forwardedRef, node);
+    }, [forwardedRef, setTriggerNode]);
+    return (_jsx(ContextMenuPrimitive.Trigger, { ...rest, ref: composedRef, className: className, "data-context-menu-trigger": "true", "data-preview-visible": showPreview ? "true" : undefined }));
+});
+ContextMenuTrigger.displayName = ContextMenuPrimitive.Trigger.displayName;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(ContextMenuPrimitive.SubTrigger, { ref: ref, className: cn("react-cupertino-ui-context-menu__sub-trigger", inset && "inset", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(ContextMenuPrimitive.SubContent, { ref: ref, className: cn("react-cupertino-ui-context-menu__sub-content", className), ...props })));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+const ContextMenuContent = React.forwardRef(({ className, preview, previewSize = "md", previewPlacement = "menu", previewOffset, children, ...props }, ref) => {
+    const previewContext = useContextMenuPreview();
+    const previewApi = previewContext?.setPreview;
+    const shouldRenderInline = Boolean(preview && (previewPlacement === "menu" || previewPlacement === "both"));
+    React.useEffect(() => {
+        if (!previewApi) {
+            return;
+        }
+        if (!preview) {
+            previewApi(null);
+            return;
+        }
+        previewApi(preview, {
+            size: previewSize,
+            placement: previewPlacement,
+            offset: previewOffset ?? defaultPreviewConfig.offset,
+        });
+        return () => {
+            previewApi(null);
+        };
+    }, [previewApi, preview, previewSize, previewPlacement, previewOffset]);
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsxs(ContextMenuPrimitive.Content, { ref: ref, className: cn("react-cupertino-ui-context-menu__content", shouldRenderInline && "has-preview", className), "data-has-preview": shouldRenderInline ? "true" : undefined, ...props, children: [shouldRenderInline ? (_jsx("div", { className: cn("react-cupertino-ui-context-menu__preview", `size-${previewSize}`), children: preview })) : null, children] }) }));
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+const ContextMenuPreview = ({ className, media, title, subtitle, meta, footer, children, ...props }) => {
+    return (_jsxs("div", { className: cn("react-cupertino-ui-context-menu__preview-card", className), ...props, children: [media ? (_jsx("div", { className: "react-cupertino-ui-context-menu__preview-media", children: media })) : null, (title || subtitle || meta || children) && (_jsxs("div", { className: "react-cupertino-ui-context-menu__preview-body", children: [title && _jsx("p", { className: "react-cupertino-ui-context-menu__preview-title", children: title }), subtitle && (_jsx("p", { className: "react-cupertino-ui-context-menu__preview-subtitle", children: subtitle })), children ? (_jsx("div", { className: "react-cupertino-ui-context-menu__preview-children", children: children })) : null, meta && _jsx("span", { className: "react-cupertino-ui-context-menu__preview-meta", children: meta })] })), footer ? (_jsx("div", { className: "react-cupertino-ui-context-menu__preview-footer", children: footer })) : null] }));
+};
+ContextMenuPreview.displayName = "ContextMenuPreview";
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(ContextMenuPrimitive.Item, { ref: ref, className: cn("react-cupertino-ui-context-menu__item", inset && "inset", className), ...props })));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(ContextMenuPrimitive.CheckboxItem, { ref: ref, className: cn("react-cupertino-ui-context-menu__checkbox-item", className), checked: checked, ...props, children: [_jsx("span", { className: "checkbox-indicator", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+ContextMenuCheckboxItem.displayName =
+    ContextMenuPrimitive.CheckboxItem.displayName;
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ContextMenuPrimitive.RadioItem, { ref: ref, className: cn("react-cupertino-ui-context-menu__radio-item", className), ...props, children: [_jsx("span", { className: "radio-indicator", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(ContextMenuPrimitive.Label, { ref: ref, className: cn("react-cupertino-ui-context-menu__label", inset && "inset", className), ...props })));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(ContextMenuPrimitive.Separator, { ref: ref, className: cn("react-cupertino-ui-context-menu__separator", className), ...props })));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+const ContextMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("react-cupertino-ui-context-menu__shortcut", className), ...props }));
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, ContextMenuPreview, };

package/dist/index.scss

@@ -0,0 +1,249 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-context-menu {
+  
+  &__content,
+  &__sub-content {
+    min-width: 220px;
+    background: rgba(255, 255, 255, 0.75);
+    @include glass.glass-panel(light, 40px, 0.75);
+    border-radius: 12px;
+    padding: 6px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+    animation: zoomIn 0.2s ease-out;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    
+    @media (prefers-color-scheme: dark) {
+        background: rgba(30, 30, 30, 0.75);
+    }
+  }
+
+  &__item,
+  &__checkbox-item,
+  &__radio-item,
+  &__sub-trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 14px;
+    outline: none;
+    cursor: default;
+    user-select: none;
+    color: var(--foreground);
+    
+    &[data-state="open"] {
+        background: var(--color-blue);
+        color: white;
+    }
+    
+    &[data-highlighted] {
+        background: var(--color-blue);
+        color: white;
+        
+        .react-cupertino-ui-context-menu__shortcut {
+            color: rgba(255,255,255,0.8);
+        }
+    }
+    
+    &[data-disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    
+    &.inset {
+        padding-left: 32px;
+    }
+  }
+
+  &__separator {
+    height: 1px;
+    background: rgba(0,0,0,0.1);
+    margin: 4px -6px;
+    
+    @media (prefers-color-scheme: dark) {
+        background: rgba(255,255,255,0.1);
+    }
+  }
+
+  &__label {
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted-foreground);
+    
+    &.inset {
+        padding-left: 32px;
+    }
+  }
+
+  &__shortcut {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--muted-foreground);
+    letter-spacing: 1px;
+  }
+  
+  .checkbox-indicator,
+  .radio-indicator {
+      position: absolute;
+      left: 8px;
+      width: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+  }
+
+  &__preview {
+    width: 100%;
+    margin: 2px 0 6px;
+    display: flex;
+    justify-content: center;
+    --preview-height: 180px;
+
+    &.size-sm {
+      --preview-height: 140px;
+    }
+
+    &.size-lg {
+      --preview-height: 220px;
+    }
+  }
+
+  &__preview-card {
+    width: 100%;
+    border-radius: 18px;
+    overflow: hidden;
+    position: relative;
+    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.65));
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
+    border: 1px solid rgba(255,255,255,0.6);
+    color: var(--foreground);
+
+    @media (prefers-color-scheme: dark) {
+      background: linear-gradient(180deg, rgba(20,20,20,0.95), rgba(35,35,35,0.7));
+      border-color: rgba(255,255,255,0.15);
+    }
+  }
+
+  &__preview-media {
+    width: 100%;
+    height: var(--preview-height);
+    overflow: hidden;
+
+    img,
+    video,
+    picture,
+    canvas,
+    div {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  &__preview-body {
+    padding: 0.85rem 1rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__preview-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+  }
+
+  &__preview-subtitle {
+    font-size: 0.8rem;
+    color: var(--muted-foreground);
+  }
+
+  &__preview-children {
+    font-size: 0.78rem;
+    color: color-mix(in srgb, var(--foreground), transparent 40%);
+  }
+
+  &__preview-meta {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: color-mix(in srgb, var(--foreground), transparent 30%);
+  }
+
+  &__preview-footer {
+    padding: 0 1rem 0.85rem;
+    font-size: 0.78rem;
+    color: color-mix(in srgb, var(--foreground), transparent 20%);
+  }
+
+  &__trigger-preview {
+    position: fixed;
+    z-index: 60;
+    pointer-events: none;
+    transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0;
+    transition: opacity 200ms ease, transform 320ms cubic-bezier(0.18, 0.86, 0.35, 1.15);
+    --trigger-preview-width: 280px;
+
+    &.size-sm {
+      --trigger-preview-width: 220px;
+    }
+
+    &.size-lg {
+      --trigger-preview-width: 320px;
+    }
+
+    &[data-state="open"] {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &__trigger-preview-inner {
+    width: min(var(--trigger-preview-width), calc(100vw - 2rem));
+    border-radius: 22px;
+    overflow: hidden;
+    @include glass.glass-panel(light, var(--glass-blur, 48px), 0.72);
+    box-shadow:
+      0 30px 70px rgba(15, 15, 15, 0.35),
+      0 8px 24px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(var(--glass-blur, 48px)) saturate(170%);
+  }
+}
+
+[data-context-menu-trigger="true"] {
+  transition:
+    transform 240ms cubic-bezier(0.2, 0.8, 0.4, 1),
+    filter 200ms ease,
+    box-shadow 200ms ease;
+  will-change: transform;
+
+  &[data-preview-visible="true"] {
+    transform: scale(0.97) translateZ(0);
+    filter: brightness(1.02);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-context-menu-trigger="true"] {
+    transition: none;
+    &[data-preview-visible="true"] {
+      transform: none;
+    }
+  }
+
+  .react-cupertino-ui-context-menu__trigger-preview {
+    transition: none;
+  }
+}
+
+@keyframes zoomIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@react-cupertino-ui/context-menu",
+  "version": "0.0.0",
+  "description": "ContextMenu component from React Cupertino UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@react-cupertino-ui/shared": "0.0.0",
+    "lucide-react": "^0.417.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "a6b07a7a8a0ab6f4c80884b6fb9d5eb16ee6da1d",
+  "publishConfig": {
+    "access": "public"
+  }
+}