@zentauri-ui/zentauri-components 1.7.5 → 1.7.6

package/src/design-system/context-menu.ts

@@ -0,0 +1,44 @@
+import {
+  zuiDropdownItemBase,
+  zuiDropdownItemVariants,
+  zuiDropdownSpacing,
+} from "./dropdown";
+
+export const zuiContextMenuContentBase =
+  "min-w-[220px] rounded-lg border border-[color:var(--zui-dropdown-content-border,oklch(20.8%_0.042_265.755_/_0.1))] bg-[var(--zui-dropdown-content-bg,oklch(96.8%_0.007_247.896))] p-2 text-[color:var(--zui-dropdown-content-fg,oklch(20.8%_0.042_265.755))] shadow-lg outline-none dark:border-[color:var(--zui-dropdown-content-border-dark,#ffffff1a)] dark:bg-[var(--zui-dropdown-content-bg-dark,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-content-fg-dark,oklch(96.8%_0.007_247.896))]";
+
+export const zuiContextMenuItemBase = zuiDropdownItemBase;
+
+export const zuiContextMenuItemVariants = {
+  ...zuiDropdownItemVariants,
+  ghost: `${zuiDropdownItemVariants.ghost} dark:bg-[var(--zui-dropdown-item-ghost-bg-dark,transparent)]`,
+  sky: `${zuiDropdownItemVariants.sky} dark:bg-[var(--zui-dropdown-item-sky-bg-dark,oklch(29.3%_0.066_243.157))] dark:text-[color:var(--zui-dropdown-item-sky-fg-dark,oklch(90.1%_0.058_230.902))] dark:hover:text-[color:var(--zui-dropdown-item-sky-fg-hover-dark,oklch(90.1%_0.058_230.902))]`,
+  rose: `${zuiDropdownItemVariants.rose} dark:bg-[var(--zui-dropdown-item-rose-bg-dark,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-dropdown-item-rose-fg-dark,oklch(89.2%_0.058_10.001))] dark:hover:text-[color:var(--zui-dropdown-item-rose-fg-hover-dark,oklch(89.2%_0.058_10.001))]`,
+  purple: `${zuiDropdownItemVariants.purple} dark:bg-[var(--zui-dropdown-item-purple-bg-dark,oklch(29.1%_0.149_302.717))] dark:text-[color:var(--zui-dropdown-item-purple-fg-dark,oklch(90.2%_0.063_306.703))] dark:hover:text-[color:var(--zui-dropdown-item-purple-fg-hover-dark,oklch(90.2%_0.063_306.703))]`,
+  pink: `${zuiDropdownItemVariants.pink} dark:bg-[var(--zui-dropdown-item-pink-bg-dark,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-dropdown-item-pink-fg-dark,oklch(89.9%_0.061_343.231))] dark:hover:text-[color:var(--zui-dropdown-item-pink-fg-hover-dark,oklch(89.9%_0.061_343.231))]`,
+  orange: `${zuiDropdownItemVariants.orange} dark:bg-[var(--zui-dropdown-item-orange-bg-dark,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-dropdown-item-orange-fg-dark,oklch(90.1%_0.076_70.697))] dark:hover:text-[color:var(--zui-dropdown-item-orange-fg-hover-dark,oklch(90.1%_0.076_70.697))]`,
+  yellow: `${zuiDropdownItemVariants.yellow} dark:bg-[var(--zui-dropdown-item-yellow-bg-dark,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-dropdown-item-yellow-fg-dark,oklch(94.5%_0.129_101.54))] dark:hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover-dark,oklch(94.5%_0.129_101.54))]`,
+  teal: `${zuiDropdownItemVariants.teal} dark:bg-[var(--zui-dropdown-item-teal-bg-dark,oklch(27.7%_0.046_192.524))] dark:text-[color:var(--zui-dropdown-item-teal-fg-dark,oklch(91%_0.096_180.426))] dark:hover:text-[color:var(--zui-dropdown-item-teal-fg-hover-dark,oklch(91%_0.096_180.426))]`,
+  indigo: `${zuiDropdownItemVariants.indigo} dark:bg-[var(--zui-dropdown-item-indigo-bg-dark,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-dropdown-item-indigo-fg-dark,oklch(87%_0.065_274.039))] dark:hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover-dark,oklch(87%_0.065_274.039))]`,
+  emerald: `${zuiDropdownItemVariants.emerald} dark:bg-[var(--zui-dropdown-item-emerald-bg-dark,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-dropdown-item-emerald-fg-dark,oklch(90.5%_0.093_164.15))] dark:hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover-dark,oklch(90.5%_0.093_164.15))]`,
+  gray: `${zuiDropdownItemVariants.gray} dark:bg-[var(--zui-dropdown-item-gray-bg-dark,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-dropdown-item-gray-fg-dark,oklch(92.8%_0.006_264.531))] dark:hover:text-[color:var(--zui-dropdown-item-gray-fg-hover-dark,oklch(92.8%_0.006_264.531))]`,
+  amber: `${zuiDropdownItemVariants.amber} dark:bg-[var(--zui-dropdown-item-amber-bg-dark,oklch(27.9%_0.077_45.635))] dark:text-[color:var(--zui-dropdown-item-amber-fg-dark,oklch(92.4%_0.12_95.746))] dark:hover:text-[color:var(--zui-dropdown-item-amber-fg-hover-dark,oklch(92.4%_0.12_95.746))]`,
+  violet: `${zuiDropdownItemVariants.violet} dark:bg-[var(--zui-dropdown-item-violet-bg-dark,oklch(28.3%_0.141_291.089))] dark:text-[color:var(--zui-dropdown-item-violet-fg-dark,oklch(89.4%_0.057_293.283))] dark:hover:text-[color:var(--zui-dropdown-item-violet-fg-hover-dark,oklch(89.4%_0.057_293.283))]`,
+  "gradient-blue": `${zuiDropdownItemVariants["gradient-blue"]} dark:from-[var(--zui-dropdown-item-gradient-blue-from-dark,oklch(28.2%_0.091_267.935))] dark:to-[var(--zui-dropdown-item-gradient-blue-to-dark,oklch(29.1%_0.149_302.717))]`,
+  "gradient-green": `${zuiDropdownItemVariants["gradient-green"]} dark:from-[var(--zui-dropdown-item-gradient-green-from-dark,oklch(26.6%_0.065_152.934))] dark:to-[var(--zui-dropdown-item-gradient-green-to-dark,oklch(27.4%_0.072_132.109))]`,
+  "gradient-red": `${zuiDropdownItemVariants["gradient-red"]} dark:from-[var(--zui-dropdown-item-gradient-red-from-dark,oklch(25.8%_0.092_26.042))] dark:to-[var(--zui-dropdown-item-gradient-red-to-dark,oklch(28.4%_0.109_3.907))]`,
+  "gradient-yellow": `${zuiDropdownItemVariants["gradient-yellow"]} dark:from-[var(--zui-dropdown-item-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813))] dark:to-[var(--zui-dropdown-item-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259))]`,
+  "gradient-purple": `${zuiDropdownItemVariants["gradient-purple"]} dark:from-[var(--zui-dropdown-item-gradient-purple-from-dark,oklch(29.1%_0.149_302.717))] dark:to-[var(--zui-dropdown-item-gradient-purple-to-dark,oklch(28.4%_0.109_3.907))]`,
+  "gradient-teal": `${zuiDropdownItemVariants["gradient-teal"]} dark:from-[var(--zui-dropdown-item-gradient-teal-from-dark,oklch(27.7%_0.046_192.524))] dark:to-[var(--zui-dropdown-item-gradient-teal-to-dark,oklch(30.2%_0.056_229.695))]`,
+  "gradient-indigo": `${zuiDropdownItemVariants["gradient-indigo"]} dark:from-[var(--zui-dropdown-item-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288))] dark:to-[var(--zui-dropdown-item-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717))]`,
+  "gradient-pink": `${zuiDropdownItemVariants["gradient-pink"]} dark:from-[var(--zui-dropdown-item-gradient-pink-from-dark,oklch(28.4%_0.109_3.907))] dark:to-[var(--zui-dropdown-item-gradient-pink-to-dark,oklch(27.1%_0.105_12.094))]`,
+  "gradient-orange": `${zuiDropdownItemVariants["gradient-orange"]} dark:from-[var(--zui-dropdown-item-gradient-orange-from-dark,oklch(26.6%_0.079_36.259))] dark:to-[var(--zui-dropdown-item-gradient-orange-to-dark,oklch(25.8%_0.092_26.042))]`,
+} as const;
+
+export const zuiContextMenuSpacing = zuiDropdownSpacing;
+
+export const zuiContextMenuLabelBase =
+  "px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--zui-dropdown-label-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-dropdown-label-fg-dark,oklch(70.7%_0.022_261.325))]";
+
+export const zuiContextMenuSeparatorBase =
+  "my-1 h-px bg-[var(--zui-dropdown-separator-bg,oklch(20.8%_0.042_265.755_/_0.12))] dark:bg-[var(--zui-dropdown-separator-bg-dark,#ffffff1a)]";

package/src/design-system/index.ts

@@ -7,6 +7,7 @@ export * from "./button";
 export * from "./card";
 export * from "./checkbox";
 export * from "./command";
+export * from "./context-menu";
 export * from "./divider";
 export * from "./drawer";
 export * from "./dropdown";
@@ -28,6 +29,7 @@ export * from "./spinner";
 export * from "./stepper";
 export * from "./table";
 export * from "./tabs";
+export * from "./timeline";
 export * from "./toast";
 export * from "./tokens";
 export * from "./toggle";

package/src/design-system/timeline.ts

@@ -0,0 +1,87 @@
+export const zuiTimelineBase = "flex w-full flex-col";
+
+export const zuiTimelineItemBase = "relative flex gap-4";
+
+export const zuiTimelineIndicatorBase =
+  "relative z-[1] grid shrink-0 place-items-center rounded-full border font-semibold transition-colors";
+
+export const zuiTimelineIndicatorAppearances = {
+  default:
+    "border-[color:var(--zui-timeline-indicator-default-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-default-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-default-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-default-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
+  sky: "border-[color:var(--zui-timeline-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-timeline-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-timeline-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-timeline-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-timeline-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]",
+  rose: "border-[color:var(--zui-timeline-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-timeline-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-timeline-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-timeline-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-timeline-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]",
+  purple:
+    "border-[color:var(--zui-timeline-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-timeline-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-timeline-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-timeline-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-timeline-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  pink: "border-[color:var(--zui-timeline-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-timeline-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-timeline-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-timeline-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-timeline-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  orange:
+    "border-[color:var(--zui-timeline-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-timeline-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-timeline-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-timeline-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-timeline-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+  yellow:
+    "border-[color:var(--zui-timeline-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-timeline-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-timeline-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-timeline-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  teal: "border-[color:var(--zui-timeline-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-timeline-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-timeline-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-timeline-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-timeline-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  indigo:
+    "border-[color:var(--zui-timeline-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-timeline-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-timeline-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-timeline-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-timeline-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  emerald:
+    "border-[color:var(--zui-timeline-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-timeline-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-timeline-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-timeline-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-timeline-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
+  gray: "border-[color:var(--zui-timeline-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
+  violet:
+    "border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
+  "gradient-blue":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
+  "gradient-green":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
+  "gradient-red":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
+  "gradient-yellow":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  "gradient-purple":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  "gradient-teal":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  "gradient-indigo":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  "gradient-pink":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  "gradient-orange":
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+} as const;
+
+export const zuiTimelineIndicatorSizes = {
+  sm: "size-5 text-[0.625rem]",
+  md: "size-6 text-xs",
+  lg: "size-7 text-sm",
+} as const;
+
+export const zuiTimelineConnectorBase =
+  "pointer-events-none absolute bottom-0 w-px -translate-x-1/2 rounded-full bg-[var(--zui-timeline-connector,#0000001f)] dark:bg-[var(--zui-timeline-connector-dark,#ffffff1f)]";
+
+export const zuiTimelineConnectorSizes = {
+  sm: "left-2.5 top-6",
+  md: "left-3 top-7",
+  lg: "left-3.5 top-8",
+} as const;
+
+export const zuiTimelineContentBase = "min-w-0 flex-1";
+
+export const zuiTimelineContentSizes = {
+  sm: "pb-5",
+  md: "pb-6",
+  lg: "pb-8",
+} as const;
+
+export const zuiTimelineTitleBase =
+  "font-semibold text-[color:var(--zui-timeline-title-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-timeline-title-fg-dark,#ffffff)]";
+
+export const zuiTimelineTitleSizes = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base",
+} as const;
+
+export const zuiTimelineDescriptionBase =
+  "text-[color:var(--zui-timeline-description-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-timeline-description-fg-dark,oklch(70.4%_0.04_256.788))]";
+
+export const zuiTimelineDescriptionSizes = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm",
+} as const;

package/src/ui/context-menu/context-menu.test.tsx

@@ -0,0 +1,176 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./context-menu";
+
+function renderContextMenu(onSelect = vi.fn()) {
+  render(
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <div data-testid="surface">Right-click row</div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuLabel>Row actions</ContextMenuLabel>
+          <ContextMenuItem onSelect={onSelect}>Copy</ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>More actions</ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              <ContextMenuItem>Archive</ContextMenuItem>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        </ContextMenuContent>
+      </ContextMenu>
+      <button type="button">Outside</button>
+    </>,
+  );
+}
+
+describe("ContextMenu", () => {
+  it("should open at the pointer position from a context menu event", () => {
+    renderContextMenu();
+
+    fireEvent.contextMenu(screen.getByTestId("surface"), {
+      clientX: 120,
+      clientY: 80,
+    });
+
+    const menu = screen.getByRole("menu");
+    expect(menu).toBeVisible();
+    expect(menu).toHaveStyle({ left: "120px", top: "80px" });
+    expect(screen.getByText("Row actions").tagName).toBe("P");
+  });
+
+  it("should clamp using the rendered menu dimensions", async () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+      bottom: 0,
+      height: 300,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 320,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 768,
+    });
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 800,
+    });
+    renderContextMenu();
+
+    fireEvent.contextMenu(screen.getByTestId("surface"), {
+      clientX: 760,
+      clientY: 740,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole("menu")).toHaveStyle({
+        left: "472px",
+        top: "460px",
+      });
+    });
+  });
+
+  it("should invoke item selection and close the menu", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    renderContextMenu(onSelect);
+
+    fireEvent.contextMenu(screen.getByTestId("surface"));
+    await user.click(screen.getByRole("menuitem", { name: "Copy" }));
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close when clicking outside", async () => {
+    const user = userEvent.setup();
+    renderContextMenu();
+
+    fireEvent.contextMenu(screen.getByTestId("surface"));
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close on Escape and return focus to the trigger", async () => {
+    const user = userEvent.setup();
+    renderContextMenu();
+
+    const trigger = screen.getByTestId("surface");
+    fireEvent.contextMenu(trigger);
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+    expect(trigger).toHaveFocus();
+  });
+
+  it("should support controlled open state", () => {
+    const onOpenChange = vi.fn();
+    render(
+      <ContextMenu open={false} onOpenChange={onOpenChange}>
+        <ContextMenuTrigger>
+          <div data-testid="surface">Right-click row</div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>Copy</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByTestId("surface"));
+
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  });
+
+  it("should keep the menu open when closeOnSelect is false", async () => {
+    const user = userEvent.setup();
+    render(
+      <ContextMenu defaultOpen>
+        <ContextMenuTrigger>Right-click row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem closeOnSelect={false}>Pin</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+
+    await user.click(screen.getByRole("menuitem", { name: "Pin" }));
+
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+  });
+
+  it("should reveal submenu content from the sub trigger", async () => {
+    const user = userEvent.setup();
+    renderContextMenu();
+
+    fireEvent.contextMenu(screen.getByTestId("surface"));
+    await user.hover(screen.getByRole("menuitem", { name: "More actions" }));
+
+    expect(screen.getByRole("menuitem", { name: "Archive" })).toBeVisible();
+  });
+});