@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Combobox/Combobox.types.ts

@@ -0,0 +1,99 @@
+import type { Ref } from "react"
+/**
+ * Combobox.types.ts
+ *
+ * Public and internal types for Combobox component.
+ */
+
+import type { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+
+export type ComboboxSize = "sm" | "md" | "lg"
+
+export type ComboboxProps<
+  Value = string,
+  Multiple extends boolean | undefined = false,
+> = BaseCombobox.Root.Props<Value, Multiple>
+
+export type ComboboxLabelProps = BaseCombobox.Label.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export interface ComboboxTriggerProps extends Omit<
+  BaseCombobox.Trigger.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLButtonElement>
+  size?: ComboboxSize
+  className?: BaseCombobox.Trigger.Props["className"]
+}
+
+export interface ComboboxInputGroupProps extends Omit<
+  BaseCombobox.InputGroup.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLDivElement>
+  size?: ComboboxSize
+  className?: BaseCombobox.InputGroup.Props["className"]
+}
+
+export interface ComboboxInputProps extends Omit<
+  BaseCombobox.Input.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLInputElement>
+  size?: ComboboxSize
+  className?: BaseCombobox.Input.Props["className"]
+}
+
+export type ComboboxValueProps = BaseCombobox.Value.Props
+
+export type ComboboxIconProps = BaseCombobox.Icon.Props
+
+export type ComboboxPortalProps = BaseCombobox.Portal.Props
+
+export type ComboboxBackdropProps = BaseCombobox.Backdrop.Props
+
+export type ComboboxPositionerProps = BaseCombobox.Positioner.Props
+
+export type ComboboxPopupProps = BaseCombobox.Popup.Props
+
+export type ComboboxListProps = BaseCombobox.List.Props
+
+export interface ComboboxItemProps extends Omit<
+  BaseCombobox.Item.Props,
+  "className" | "ref"
+> {
+  ref?: Ref<HTMLDivElement>
+  className?: BaseCombobox.Item.Props["className"]
+}
+
+export interface ComboboxItemIndicatorProps extends Omit<
+  BaseCombobox.ItemIndicator.Props,
+  "className"
+> {
+  className?: BaseCombobox.ItemIndicator.Props["className"]
+}
+
+export type ComboboxArrowProps = BaseCombobox.Arrow.Props
+
+export type ComboboxGroupProps = BaseCombobox.Group.Props
+
+export type ComboboxGroupLabelProps = BaseCombobox.GroupLabel.Props
+
+export type ComboboxEmptyProps = BaseCombobox.Empty.Props
+
+export type ComboboxClearProps = BaseCombobox.Clear.Props
+
+export type ComboboxStatusProps = BaseCombobox.Status.Props
+
+export type ComboboxChipsProps = BaseCombobox.Chips.Props
+
+export type ComboboxChipProps = BaseCombobox.Chip.Props
+
+export type ComboboxChipRemoveProps = BaseCombobox.ChipRemove.Props
+
+export type ComboboxRowProps = BaseCombobox.Row.Props
+
+export type ComboboxCollectionProps = BaseCombobox.Collection.Props
+
+export type ComboboxSeparatorProps = BaseCombobox.Separator.Props

package/templates/primitives/Combobox/Combobox.variants.ts

@@ -0,0 +1,180 @@
+/**
+ * Combobox.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const comboboxLabelVariants = cva(
+  "text-(length:--lsys-select-label-font-size) font-(--lsys-select-label-font-weight) leading-(--lsys-select-label-font-line-height) text-(--lsys-select-label-foreground)",
+)
+
+export const comboboxTriggerVariants = cva(
+  [
+    "inline-flex w-full min-w-0 items-center justify-between gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
+    "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
+        md: "h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
+        lg: "h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const comboboxInputGroupVariants = cva(
+  [
+    "inline-flex w-full min-w-0 flex-wrap items-center gap-(--lsys-select-trigger-gap) rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-border-color) bg-(--lsys-select-background) text-(--lsys-select-foreground)",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "outline-none data-[focused]:border-(--lsys-select-focus-border-color) data-[focused]:ring-(length:--lsys-select-focus-ring-width) data-[focused]:ring-(--lsys-select-focus-ring-color) data-[focused]:ring-offset-(length:--lsys-select-focus-ring-offset) data-[focused]:ring-offset-(--lsys-select-focus-ring-offset-color)",
+    "data-[invalid]:border-(--lsys-select-invalid-border-color) data-[invalid]:ring-(length:--lsys-select-invalid-ring-width) data-[invalid]:ring-(--lsys-select-invalid-ring-color)",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "min-h-(--lsys-select-height-sm) px-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
+        md: "min-h-(--lsys-select-height-md) px-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
+        lg: "min-h-(--lsys-select-height-lg) px-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const comboboxInputVariants = cva(
+  [
+    "min-w-[4rem] flex-1 border-0 bg-transparent text-(--lsys-select-foreground) outline-none",
+    "font-(family-name:--lsys-select-font-family) font-(--lsys-select-font-weight) leading-(--lsys-select-font-line-height) tracking-(--lsys-select-font-letter-spacing)",
+    "placeholder:text-(--lsys-select-placeholder-color)",
+    "disabled:cursor-not-allowed",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-(--lsys-select-padding-x-sm) text-(length:--lsys-select-font-size-sm)",
+        md: "py-(--lsys-select-padding-x-md) text-(length:--lsys-select-font-size-md)",
+        lg: "py-(--lsys-select-padding-x-lg) text-(length:--lsys-select-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+export const comboboxValueVariants = cva(
+  "min-w-0 flex-1 truncate text-left data-[placeholder]:text-(--lsys-select-placeholder-color)",
+)
+
+export const comboboxIconVariants = cva(
+  "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center text-(--lsys-select-icon-foreground) transition-transform duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing) data-[open]:rotate-180",
+)
+
+export const comboboxClearVariants = cva(
+  [
+    "inline-flex size-(--lsys-select-icon-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-(--lsys-select-icon-foreground)",
+    "transition-colors duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+    "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const comboboxBackdropVariants = cva(
+  "fixed inset-0 z-(--lsys-select-backdrop-z-index) bg-(--lsys-select-backdrop-background) opacity-(--lsys-select-backdrop-opacity) data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+)
+
+export const comboboxPositionerVariants = cva(
+  "z-(--lsys-select-positioner-z-index)",
+)
+
+export const comboboxPopupVariants = cva(
+  [
+    "min-w-[var(--anchor-width)] overflow-hidden rounded-(--lsys-select-radius) border",
+    "border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background) text-(--lsys-select-popup-foreground) shadow-(--lsys-select-popup-shadow)",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "origin-[var(--transform-origin)] transition-[opacity,transform] duration-(--lsys-select-transition-duration) ease-(--lsys-select-transition-easing)",
+  ].join(" "),
+)
+
+export const comboboxListVariants = cva(
+  "grid max-h-(--lsys-select-popup-max-height) gap-(--lsys-select-list-gap) overflow-y-auto p-(--lsys-select-list-padding)",
+)
+
+export const comboboxItemVariants = cva(
+  [
+    "relative flex min-w-0 cursor-default select-none items-center gap-(--lsys-select-item-gap) rounded-(--lsys-select-item-radius) px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y)",
+    "text-(length:--lsys-select-item-font-size) font-(--lsys-select-item-font-weight) leading-(--lsys-select-item-font-line-height) text-(--lsys-select-item-foreground) outline-none",
+    "data-[highlighted]:bg-(--lsys-select-item-highlight-background) data-[highlighted]:text-(--lsys-select-item-highlight-foreground)",
+    "data-[selected]:bg-(--lsys-select-item-selected-background) data-[selected]:text-(--lsys-select-item-selected-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const comboboxItemIndicatorVariants = cva(
+  "inline-flex size-(--lsys-select-item-indicator-size) shrink-0 items-center justify-center text-current",
+)
+
+export const comboboxArrowVariants = cva(
+  "size-(--lsys-select-arrow-size) rotate-45 border border-(--lsys-select-popup-border-color) bg-(--lsys-select-popup-background)",
+)
+
+export const comboboxGroupVariants = cva("grid gap-(--lsys-select-group-gap)")
+
+export const comboboxGroupLabelVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-group-label-padding-y) text-(length:--lsys-select-group-label-font-size) font-(--lsys-select-group-label-font-weight) leading-(--lsys-select-group-label-font-line-height) text-(--lsys-select-group-label-foreground)",
+)
+
+export const comboboxEmptyVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
+)
+
+export const comboboxStatusVariants = cva(
+  "px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y) text-(length:--lsys-select-item-font-size) text-(--lsys-select-placeholder-color)",
+)
+
+export const comboboxChipsVariants = cva(
+  "flex min-w-0 flex-1 flex-wrap items-center gap-(--lsys-select-item-gap)",
+)
+
+export const comboboxChipVariants = cva(
+  [
+    "inline-flex max-w-full items-center gap-(--lsys-select-item-gap) rounded-(--lsys-select-item-radius) border border-(--lsys-select-border-color)",
+    "bg-(--lsys-select-item-selected-background) px-(--lsys-select-item-padding-x) py-(--lsys-select-item-padding-y)",
+    "text-(length:--lsys-select-item-font-size) font-(--lsys-select-item-font-weight) text-(--lsys-select-item-selected-foreground)",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-(--lsys-opacity-disabled)",
+  ].join(" "),
+)
+
+export const comboboxChipRemoveVariants = cva(
+  [
+    "inline-flex size-(--lsys-select-item-indicator-size) shrink-0 items-center justify-center rounded-(--lsys-select-item-radius) text-current",
+    "hover:bg-(--lsys-select-item-highlight-background) hover:text-(--lsys-select-item-highlight-foreground)",
+  ].join(" "),
+)
+
+export const comboboxRowVariants = cva("flex min-w-0 items-center")
+
+export const comboboxCollectionVariants = cva("contents")
+
+export const comboboxSeparatorVariants = cva(
+  "mx-(--lsys-select-item-padding-x) my-(--lsys-select-group-label-padding-y) h-(--lsys-separator-thickness) bg-(--lsys-separator-color)",
+)

package/templates/primitives/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,375 @@
+/**
+ * ContextMenu.tsx
+ *
+ * Reference ContextMenu component implementation.
+ */
+
+import { Check, ChevronRight } from "lucide-react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import type {
+  ContextMenuArrowProps,
+  ContextMenuBackdropProps,
+  ContextMenuCheckboxItemIndicatorProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuGroupLabelProps,
+  ContextMenuGroupProps,
+  ContextMenuItemProps,
+  ContextMenuLinkItemProps,
+  ContextMenuPopupProps,
+  ContextMenuPortalProps,
+  ContextMenuPositionerProps,
+  ContextMenuProps,
+  ContextMenuRadioGroupProps,
+  ContextMenuRadioItemIndicatorProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuSubmenuRootProps,
+  ContextMenuSubmenuTriggerProps,
+  ContextMenuTriggerProps,
+} from "./ContextMenu.types"
+import {
+  contextMenuArrowVariants,
+  contextMenuBackdropVariants,
+  contextMenuGroupLabelVariants,
+  contextMenuGroupVariants,
+  contextMenuItemIndicatorVariants,
+  contextMenuItemTextVariants,
+  contextMenuItemVariants,
+  contextMenuPopupVariants,
+  contextMenuPositionerVariants,
+  contextMenuSeparatorVariants,
+  contextMenuSubmenuTriggerIconVariants,
+  contextMenuSubmenuTriggerVariants,
+  contextMenuTriggerVariants,
+} from "./ContextMenu.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const horizontalContextMenuSides = new Set<
+  NonNullable<ContextMenuPositionerProps["side"]>
+>(["left", "right", "inline-start", "inline-end"])
+
+const popupCollisionAvoidance = {
+  fallbackAxisSide: "end",
+} as const
+
+const ContextMenu = (props: ContextMenuProps) => {
+  return <BaseContextMenu.Root {...props} />
+}
+
+ContextMenu.displayName = "ContextMenu"
+
+const ContextMenuTrigger = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuTriggerProps) => {
+  return (
+    <BaseContextMenu.Trigger
+      ref={ref}
+      className={mergeClassName(contextMenuTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuTrigger.displayName = "ContextMenuTrigger"
+
+const ContextMenuPortal = (props: ContextMenuPortalProps) => {
+  return <BaseContextMenu.Portal {...props} />
+}
+
+ContextMenuPortal.displayName = "ContextMenuPortal"
+
+const ContextMenuBackdrop = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuBackdropProps) => {
+  return (
+    <BaseContextMenu.Backdrop
+      ref={ref}
+      className={mergeClassName(contextMenuBackdropVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuBackdrop.displayName = "ContextMenuBackdrop"
+
+const ContextMenuPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  side,
+  collisionAvoidance,
+  ...props
+}: ContextMenuPositionerProps) => {
+  const resolvedCollisionAvoidance =
+    collisionAvoidance ??
+    (side && horizontalContextMenuSides.has(side)
+      ? popupCollisionAvoidance
+      : undefined)
+
+  return (
+    <BaseContextMenu.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      side={side}
+      collisionAvoidance={resolvedCollisionAvoidance}
+      className={mergeClassName(contextMenuPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuPositioner.displayName = "ContextMenuPositioner"
+
+const ContextMenuPopup = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuPopupProps) => {
+  return (
+    <BaseContextMenu.Popup
+      ref={ref}
+      className={mergeClassName(contextMenuPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuPopup.displayName = "ContextMenuPopup"
+
+const ContextMenuArrow = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuArrowProps) => {
+  return (
+    <BaseContextMenu.Arrow
+      ref={ref}
+      className={mergeClassName(contextMenuArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuArrow.displayName = "ContextMenuArrow"
+
+const ContextMenuItem = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuItemProps) => {
+  return (
+    <BaseContextMenu.Item
+      ref={ref}
+      className={mergeClassName(contextMenuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuItem.displayName = "ContextMenuItem"
+
+const ContextMenuLinkItem = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuLinkItemProps) => {
+  return (
+    <BaseContextMenu.LinkItem
+      ref={ref}
+      className={mergeClassName(contextMenuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuLinkItem.displayName = "ContextMenuLinkItem"
+
+const ContextMenuCheckboxItem = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuCheckboxItemProps) => {
+  return (
+    <BaseContextMenu.CheckboxItem
+      ref={ref}
+      className={mergeClassName(contextMenuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem"
+
+const ContextMenuCheckboxItemIndicator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ContextMenuCheckboxItemIndicatorProps) => {
+  return (
+    <BaseContextMenu.CheckboxItemIndicator
+      ref={ref}
+      className={mergeClassName(contextMenuItemIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <Check aria-hidden="true" size={14} />}
+    </BaseContextMenu.CheckboxItemIndicator>
+  )
+}
+
+ContextMenuCheckboxItemIndicator.displayName =
+  "ContextMenuCheckboxItemIndicator"
+
+const ContextMenuRadioGroup = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuRadioGroupProps) => {
+  return (
+    <BaseContextMenu.RadioGroup
+      ref={ref}
+      className={mergeClassName(contextMenuGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup"
+
+const ContextMenuRadioItem = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuRadioItemProps) => {
+  return (
+    <BaseContextMenu.RadioItem
+      ref={ref}
+      className={mergeClassName(contextMenuItemVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem"
+
+const ContextMenuRadioItemIndicator = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ContextMenuRadioItemIndicatorProps) => {
+  return (
+    <BaseContextMenu.RadioItemIndicator
+      ref={ref}
+      className={mergeClassName(contextMenuItemIndicatorVariants(), className)}
+      {...props}
+    >
+      {children ?? <Check aria-hidden="true" size={14} />}
+    </BaseContextMenu.RadioItemIndicator>
+  )
+}
+
+ContextMenuRadioItemIndicator.displayName = "ContextMenuRadioItemIndicator"
+
+const ContextMenuGroup = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuGroupProps) => {
+  return (
+    <BaseContextMenu.Group
+      ref={ref}
+      className={mergeClassName(contextMenuGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuGroup.displayName = "ContextMenuGroup"
+
+const ContextMenuGroupLabel = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuGroupLabelProps) => {
+  return (
+    <BaseContextMenu.GroupLabel
+      ref={ref}
+      className={mergeClassName(contextMenuGroupLabelVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuGroupLabel.displayName = "ContextMenuGroupLabel"
+
+const ContextMenuSeparator = ({
+  ref,
+  className,
+  ...props
+}: ContextMenuSeparatorProps) => {
+  return (
+    <BaseContextMenu.Separator
+      ref={ref}
+      className={mergeClassName(contextMenuSeparatorVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ContextMenuSeparator.displayName = "ContextMenuSeparator"
+
+const ContextMenuSubmenuRoot = (props: ContextMenuSubmenuRootProps) => {
+  return <BaseContextMenu.SubmenuRoot {...props} />
+}
+
+ContextMenuSubmenuRoot.displayName = "ContextMenuSubmenuRoot"
+
+const ContextMenuSubmenuTrigger = ({
+  ref,
+  className,
+  children,
+  ...props
+}: ContextMenuSubmenuTriggerProps) => {
+  return (
+    <BaseContextMenu.SubmenuTrigger
+      ref={ref}
+      className={mergeClassName(contextMenuSubmenuTriggerVariants(), className)}
+      {...props}
+    >
+      <span className={contextMenuItemTextVariants()}>{children}</span>
+      <span className={contextMenuSubmenuTriggerIconVariants()}>
+        <ChevronRight aria-hidden="true" size={14} />
+      </span>
+    </BaseContextMenu.SubmenuTrigger>
+  )
+}
+
+ContextMenuSubmenuTrigger.displayName = "ContextMenuSubmenuTrigger"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuBackdrop,
+  ContextMenuPositioner,
+  ContextMenuPopup,
+  ContextMenuArrow,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuLinkItem,
+  ContextMenuCheckboxItem,
+  ContextMenuCheckboxItemIndicator,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuRadioItemIndicator,
+  ContextMenuSeparator,
+  ContextMenuSubmenuRoot,
+  ContextMenuSubmenuTrigger,
+}

package/templates/primitives/ContextMenu/ContextMenu.types.ts

@@ -0,0 +1,57 @@
+import type { Ref } from "react"
+/**
+ * ContextMenu.types.ts
+ *
+ * Public and internal types for ContextMenu component.
+ */
+
+import type { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import type { Menu as BaseMenu } from "@base-ui/react/menu"
+
+export type ContextMenuProps = BaseContextMenu.Root.Props
+
+export type ContextMenuTriggerProps = BaseContextMenu.Trigger.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ContextMenuPortalProps = BaseContextMenu.Portal.Props
+
+export type ContextMenuBackdropProps = BaseContextMenu.Backdrop.Props
+
+export type ContextMenuPositionerProps = BaseContextMenu.Positioner.Props
+
+export type ContextMenuPopupProps = BaseContextMenu.Popup.Props
+
+export type ContextMenuArrowProps = BaseContextMenu.Arrow.Props
+
+export type ContextMenuGroupProps = BaseContextMenu.Group.Props
+
+export type ContextMenuGroupLabelProps = BaseContextMenu.GroupLabel.Props
+
+export interface ContextMenuItemProps extends Omit<
+  BaseContextMenu.Item.Props,
+  "className"
+> {
+  className?: BaseContextMenu.Item.Props["className"]
+}
+
+export type ContextMenuLinkItemProps = BaseContextMenu.LinkItem.Props
+
+export type ContextMenuCheckboxItemProps = BaseContextMenu.CheckboxItem.Props
+
+export type ContextMenuCheckboxItemIndicatorProps =
+  BaseContextMenu.CheckboxItemIndicator.Props
+
+export type ContextMenuRadioGroupProps = BaseContextMenu.RadioGroup.Props
+
+export type ContextMenuRadioItemProps = BaseContextMenu.RadioItem.Props
+
+export type ContextMenuRadioItemIndicatorProps =
+  BaseContextMenu.RadioItemIndicator.Props
+
+export type ContextMenuSubmenuRootProps = BaseContextMenu.SubmenuRoot.Props
+
+export type ContextMenuSubmenuTriggerProps =
+  BaseContextMenu.SubmenuTrigger.Props
+
+export type ContextMenuSeparatorProps = BaseMenu.Separator.Props