@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/context-menu.d.ts

@@ -0,0 +1,259 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ContextMenu as ContextMenu$1 } from 'radix-ui';
+
+interface ContextMenuProps {
+    children: ReactNode;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled open state. */
+    open?: boolean;
+    /** The reading direction of submenus. */
+    dir?: "ltr" | "rtl";
+    /** The modality of the context menu. */
+    modal?: boolean;
+}
+interface ContextMenuTriggerProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.Trigger> {
+    /** When true, right-click event propagation is disabled. */
+    disabled?: boolean;
+    className?: string;
+}
+interface ContextMenuContentProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.Content> {
+    className?: string;
+}
+type ContextMenuItemVariant = "default" | "danger";
+interface ContextMenuItemProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.Item> {
+    /** Visual variant of the menu item. */
+    variant?: ContextMenuItemVariant;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    className?: string;
+}
+interface ContextMenuCheckboxItemProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.CheckboxItem> {
+    /** Whether the checkbox item is checked. */
+    checked?: boolean;
+    className?: string;
+}
+interface ContextMenuRadioGroupProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.RadioGroup> {
+    className?: string;
+}
+interface ContextMenuRadioItemProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.RadioItem> {
+    className?: string;
+}
+interface ContextMenuLabelProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.Label> {
+    /** Whether the label should be inset (aligned with items that have icons). */
+    inset?: boolean;
+    className?: string;
+}
+interface ContextMenuSeparatorProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.Separator> {
+    className?: string;
+}
+interface ContextMenuGroupProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.Group> {
+    className?: string;
+}
+interface ContextMenuSubProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+interface ContextMenuSubTriggerProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.SubTrigger> {
+    /** Whether to inset the trigger (aligned with items that have icons). */
+    inset?: boolean;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    className?: string;
+}
+interface ContextMenuSubContentProps extends ComponentPropsWithoutRef<typeof ContextMenu$1.SubContent> {
+    className?: string;
+}
+interface ContextMenuShortcutProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * ContextMenu — provides right-click context menu functionality.
+ *
+ * Wrap any element with `ContextMenuTrigger` to make it the trigger target.
+ * Right-clicking (or long-pressing on touch) that element opens the menu.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger>
+ *     <div className="border rounded-md p-8">Right-click me</div>
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem>Open</ContextMenuItem>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem variant="danger">Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+declare function ContextMenu({ children, ...rest }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextMenu {
+    var displayName: string;
+}
+/**
+ * ContextMenuTrigger — the area that triggers the context menu on right-click.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuTrigger asChild>
+ *   <div className="p-4 border rounded-md">Right-click this area</div>
+ * </ContextMenuTrigger>
+ * ```
+ */
+declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
+/**
+ * ContextMenuContent — the panel that contains the menu items.
+ *
+ * Renders inside a Portal automatically so z-index stacking is correct.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuContent>
+ *   <ContextMenuItem>Cut</ContextMenuItem>
+ *   <ContextMenuItem>Copy</ContextMenuItem>
+ *   <ContextMenuItem>Paste</ContextMenuItem>
+ * </ContextMenuContent>
+ * ```
+ */
+declare const ContextMenuContent: react.ForwardRefExoticComponent<ContextMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuItem — a single menu item.
+ *
+ * Supports a `variant` prop for danger-styled destructive actions,
+ * and an optional `icon` slot rendered before the label.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuItem icon={<Copy className="size-4" />}>Copy</ContextMenuItem>
+ * <ContextMenuItem variant="danger" icon={<Trash2 className="size-4" />}>
+ *   Delete
+ * </ContextMenuItem>
+ * ```
+ */
+declare const ContextMenuItem: react.ForwardRefExoticComponent<ContextMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuCheckboxItem — a menu item with a checkbox indicator.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+ *   Show Grid
+ * </ContextMenuCheckboxItem>
+ * ```
+ */
+declare const ContextMenuCheckboxItem: react.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuRadioGroup — groups radio items so only one can be selected.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuRadioGroup value={view} onValueChange={setView}>
+ *   <ContextMenuRadioItem value="list">List</ContextMenuRadioItem>
+ *   <ContextMenuRadioItem value="grid">Grid</ContextMenuRadioItem>
+ * </ContextMenuRadioGroup>
+ * ```
+ */
+declare const ContextMenuRadioGroup: react.ForwardRefExoticComponent<ContextMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuRadioItem — a selectable radio item inside a radio group.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuRadioItem value="list">List View</ContextMenuRadioItem>
+ * ```
+ */
+declare const ContextMenuRadioItem: react.ForwardRefExoticComponent<ContextMenuRadioItemProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuLabel — a non-interactive label for grouping menu items.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuLabel>File Actions</ContextMenuLabel>
+ * ```
+ */
+declare const ContextMenuLabel: react.ForwardRefExoticComponent<ContextMenuLabelProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuSeparator — a thin horizontal rule between menu sections.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuSeparator />
+ * ```
+ */
+declare const ContextMenuSeparator: react.ForwardRefExoticComponent<ContextMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuGroup — groups multiple menu items together logically.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuGroup>
+ *   <ContextMenuLabel>Edit</ContextMenuLabel>
+ *   <ContextMenuItem>Cut</ContextMenuItem>
+ *   <ContextMenuItem>Copy</ContextMenuItem>
+ * </ContextMenuGroup>
+ * ```
+ */
+declare const ContextMenuGroup: react.ForwardRefExoticComponent<ContextMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuSub — a submenu root that nests inside a context menu.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuSub>
+ *   <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+ *   <ContextMenuSubContent>
+ *     <ContextMenuItem>Email</ContextMenuItem>
+ *     <ContextMenuItem>Copy Link</ContextMenuItem>
+ *   </ContextMenuSubContent>
+ * </ContextMenuSub>
+ * ```
+ */
+declare function ContextMenuSub({ children, ...rest }: ContextMenuSubProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextMenuSub {
+    var displayName: string;
+}
+/**
+ * ContextMenuSubTrigger — the item that opens the nested submenu on hover.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuSubTrigger icon={<Share className="size-4" />}>
+ *   Share
+ * </ContextMenuSubTrigger>
+ * ```
+ */
+declare const ContextMenuSubTrigger: react.ForwardRefExoticComponent<ContextMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuSubContent — the content panel for a nested submenu.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuSubContent>
+ *   <ContextMenuItem>Email link</ContextMenuItem>
+ *   <ContextMenuItem>Copy link</ContextMenuItem>
+ * </ContextMenuSubContent>
+ * ```
+ */
+declare const ContextMenuSubContent: react.ForwardRefExoticComponent<ContextMenuSubContentProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ContextMenuShortcut — displays a keyboard shortcut hint aligned to the right.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenuItem>
+ *   Copy
+ *   <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+ * </ContextMenuItem>
+ * ```
+ */
+declare function ContextMenuShortcut({ className, children, }: ContextMenuShortcutProps): react_jsx_runtime.JSX.Element;
+declare namespace ContextMenuShortcut {
+    var displayName: string;
+}
+
+export { ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, type ContextMenuContentProps, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLabel, type ContextMenuLabelProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubContentProps, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps };

package/dist/components/context-menu.mjs

@@ -0,0 +1,290 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import {
+  forwardRef
+} from "react";
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function DotIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" })
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+const menuItemBase = [
+  "relative flex w-full cursor-pointer select-none items-center",
+  "rounded-sm py-1.5 px-2",
+  "text-sm leading-5 outline-none",
+  "transition-colors duration-fast ease-standard",
+  "focus:bg-muted",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+];
+const menuContentBase = [
+  "z-[var(--z-dropdown)]",
+  "min-w-[10rem]",
+  "overflow-hidden",
+  "rounded-md",
+  "border border-border",
+  "bg-background",
+  "p-1",
+  "shadow-lg",
+  "text-foreground",
+  // Entry animation
+  "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+];
+function ContextMenu({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Root, { ...rest, children });
+}
+ContextMenu.displayName = "ContextMenu";
+const ContextMenuTrigger = forwardRef(function ContextMenuTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Trigger,
+    {
+      ref,
+      className: cn(className),
+      "data-ds": "",
+      "data-ds-component": "context-menu-trigger",
+      ...rest
+    }
+  );
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+const ContextMenuContent = forwardRef(function ContextMenuContent2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(...menuContentBase, className),
+      "data-ds": "",
+      "data-ds-component": "context-menu-content",
+      ...rest,
+      children
+    }
+  ) });
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+const ContextMenuItem = forwardRef(function ContextMenuItem2({ className, variant = "default", icon, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        ...menuItemBase,
+        variant === "danger" && "text-destructive focus:bg-destructive/10 focus:text-destructive",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "context-menu-item",
+      "data-ds-variant": variant,
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex size-4 shrink-0 items-center justify-center", children: icon }),
+        children
+      ]
+    }
+  );
+});
+ContextMenuItem.displayName = "ContextMenuItem";
+const ContextMenuCheckboxItem = forwardRef(function ContextMenuCheckboxItem2({ className, children, checked, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.CheckboxItem,
+    {
+      ref,
+      checked,
+      className: cn(...menuItemBase, "pl-8", className),
+      "data-ds": "",
+      "data-ds-component": "context-menu-checkbox-item",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-foreground" }) }) }),
+        children
+      ]
+    }
+  );
+});
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+const ContextMenuRadioGroup = forwardRef(function ContextMenuRadioGroup2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.RadioGroup,
+    {
+      ref,
+      className: cn(className),
+      ...rest
+    }
+  );
+});
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+const ContextMenuRadioItem = forwardRef(function ContextMenuRadioItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.RadioItem,
+    {
+      ref,
+      className: cn(...menuItemBase, "pl-8", className),
+      "data-ds": "",
+      "data-ds-component": "context-menu-radio-item",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, { className: "text-foreground" }) }) }),
+        children
+      ]
+    }
+  );
+});
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+const ContextMenuLabel = forwardRef(function ContextMenuLabel2({ className, inset, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Label,
+    {
+      ref,
+      className: cn(
+        "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+        inset && "pl-8",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "context-menu-label",
+      ...rest
+    }
+  );
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+const ContextMenuSeparator = forwardRef(function ContextMenuSeparator2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      "data-ds": "",
+      "data-ds-component": "context-menu-separator",
+      ...rest
+    }
+  );
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+const ContextMenuGroup = forwardRef(function ContextMenuGroup2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Group, { ref, className: cn(className), ...rest });
+});
+ContextMenuGroup.displayName = "ContextMenuGroup";
+function ContextMenuSub({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Sub, { ...rest, children });
+}
+ContextMenuSub.displayName = "ContextMenuSub";
+const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger2({ className, inset, icon, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.SubTrigger,
+    {
+      ref,
+      className: cn(
+        ...menuItemBase,
+        "data-[state=open]:bg-muted",
+        inset && "pl-8",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "context-menu-sub-trigger",
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex size-4 shrink-0 items-center justify-center", children: icon }),
+        children,
+        /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto text-muted-foreground" })
+      ]
+    }
+  );
+});
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+const ContextMenuSubContent = forwardRef(function ContextMenuSubContent2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(...menuContentBase, className),
+      "data-ds": "",
+      "data-ds-component": "context-menu-sub-content",
+      ...rest,
+      children
+    }
+  ) });
+});
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+function ContextMenuShortcut({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto pl-4 text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "context-menu-shortcut",
+      children
+    }
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+};