shadcnui-hono-jsx 0.1.0

package/generated/templates/base-mira/menu-inverted/context-menu.tsx

@@ -0,0 +1,834 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate context-menu`.
+// upstream: shadcn/ui base-mira/context-menu (https://ui.shadcn.com/r/styles/base-mira/context-menu.json)
+// upstream-revision: sha256:96c6ba7db97a47f4495b317a9483b9a5376cfc4bd69b649688eaee95a9b6a7f0; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// variant: menu-inverted
+// client: <script type="module" src="/shadcn/menu.js"> (public/shadcn/)
+// Derived from shadcn/ui. Copyright (c) 2023 shadcn.
+// Original additions and modifications: Copyright (c) 2026 supermomonga.
+// SPDX-License-Identifier: MIT
+// Full license: LICENSE-shadcnui-hono-jsx.txt at the project root.
+// Icons: lucide@1.48.0 (check, chevron-right). Copyright (c) 2026 Lucide Icons and Contributors. ISC License (see LICENSE-shadcnui-hono-jsx.txt).
+
+import { cn } from "cn"
+import type { Child, Context, JSX, JSXNode } from "hono/jsx"
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useContext,
+  useId,
+} from "hono/jsx"
+
+/** Props of the intrinsic element `T`, following Hono JSX conventions (`class`, no `render`/`asChild`). */
+type ComponentProps<
+  T extends keyof JSX.IntrinsicElements | "svg",
+  Render = never,
+> = (T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : JSX.HTMLAttributes) & {
+  class?: string | undefined
+  className?: never
+  render?: Render
+  asChild?: never
+}
+
+/** An element (or a function returning one) that replaces the default element, as in Base UI. */
+type RenderProp = Child | ((props: Record<string, unknown>) => Child)
+
+/**
+ * Renders `render` in place of `element`, merging props like Base UI's
+ * mergeProps: the render element's props win, classes are combined (the render
+ * element's first) and styles are merged. `type` only applies to button and
+ * input targets.
+ */
+function renderElement<Element>(
+  element: Element,
+  render: RenderProp | undefined
+): Element {
+  if (render === undefined) return element
+  const own: Record<string, unknown> = {
+    ...(element as unknown as JSXNode).props,
+  }
+  if (typeof render === "function") return render(own) as Element
+  if (!isValidElement(render)) {
+    throw new Error("render must be a JSX element or a function returning one")
+  }
+  const target = render as JSXNode
+  const merged: Record<string, unknown> = { ...own }
+  for (const [key, value] of Object.entries(target.props)) {
+    if (key === "class" || key === "className") {
+      merged.class = [value, own.class].filter(Boolean).join(" ")
+    } else if (key === "style" && isObject(value) && isObject(own.style)) {
+      merged.style = { ...own.style, ...value }
+    } else {
+      merged[key] = value
+    }
+  }
+  if (
+    typeof target.tag === "string" &&
+    !["button", "input"].includes(target.tag)
+  ) {
+    if (!("type" in target.props)) delete merged.type
+  }
+  const { children, ...props } = merged
+  return cloneElement(
+    target,
+    props,
+    ...(children === undefined ? [] : [children as Child].flat())
+  ) as Element
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null
+}
+
+type MenuRootProps = {
+  id?: string | undefined
+  /** Wrap focus from the last item to the first with the arrow keys. */
+  loopFocus?: boolean | undefined
+  children?: Child
+}
+
+type MenuItemProps = ComponentProps<"div", RenderProp> & {
+  disabled?: boolean | undefined
+  /** Close the menu when the item is chosen. */
+  closeOnClick?: boolean | undefined
+}
+
+type MenuCheckboxItemProps = MenuItemProps & {
+  checked?: boolean | undefined
+  defaultChecked?: boolean | undefined
+}
+
+type MenuRadioGroupProps = ComponentProps<"div"> & {
+  value?: string | undefined
+  defaultValue?: string | undefined
+}
+
+type MenuRadioItemProps = MenuItemProps & { value: string }
+
+interface MenuContextValue {
+  id: string
+  anchor: string
+  triggerId: string
+  /** Whether a trigger element labels the popup (not for context menus). */
+  labelled: boolean
+  loopFocus: boolean
+}
+
+/**
+ * A context shared by every generated file (the same key gives the same
+ * context), so parts rendered by sibling files connect: a menubar in
+ * menubar.tsx and the menus of dropdown-menu.tsx inside it.
+ */
+function sharedContext<T>(key: string, fallback: T): Context<T> {
+  const registry = globalThis as unknown as Record<
+    symbol,
+    Context<T> | undefined
+  >
+  const symbol = Symbol.for(`shadcnui-hono-jsx:${key}`)
+  registry[symbol] ??= createContext(fallback)
+  return registry[symbol]
+}
+
+const MenuContext = sharedContext<MenuContextValue | null>("menu", null)
+
+function useMenuContext(): MenuContextValue {
+  const context = useContext(MenuContext)
+  if (!context) throw new Error("Menu parts must be rendered inside a menu")
+  return context
+}
+
+function menuContextValue(
+  id: string,
+  loopFocus: boolean,
+  labelled = true
+): MenuContextValue {
+  return {
+    id,
+    anchor: `--${id}`,
+    triggerId: `${id}-trigger`,
+    labelled,
+    loopFocus,
+  }
+}
+
+/** Labels groups (and radio groups) by their label element. */
+const MenuGroupContext = sharedContext<{
+  labelId: string
+  value?: string | undefined
+} | null>("menu-group", null)
+
+/** Attributes every item renders, like Base UI's. */
+function menuItemAttributes(
+  role: string,
+  disabled: boolean | undefined,
+  closeOnClick: boolean | undefined
+) {
+  return {
+    role,
+    // Focusable without the script too, so the keyboard can reach the items.
+    tabindex: 0,
+    "aria-disabled": disabled ? "true" : undefined,
+    "data-disabled": disabled ? "" : undefined,
+    "data-close-on-click":
+      closeOnClick === undefined ? undefined : String(closeOnClick),
+  }
+}
+
+/** Checked state attributes of checkbox and radio items. */
+function menuCheckedAttributes(checked: boolean) {
+  return {
+    "aria-checked": checked ? "true" : "false",
+    "data-checked": checked ? "" : undefined,
+    "data-unchecked": checked ? undefined : "",
+  }
+}
+
+/** Whether the root's trigger labels its popup (a button, not a context menu area). */
+const LABELLED_BY_TRIGGER = false
+
+/** Connects the trigger (the anchor) and the native popover of a menu. */
+function MenuRootElement({ id, loopFocus = true, children }: MenuRootProps) {
+  const generated = useId().replaceAll(":", "-")
+  return (
+    <MenuContext.Provider
+      value={menuContextValue(
+        id ?? `menu${generated}`,
+        loopFocus,
+        LABELLED_BY_TRIGGER
+      )}
+    >
+      {children}
+    </MenuContext.Provider>
+  )
+}
+
+/** A nested menu, opened from its submenu trigger by the script. */
+function MenuSubmenuRootElement({ loopFocus, children }: MenuRootProps) {
+  const parent = useMenuContext()
+  const generated = useId().replaceAll(":", "-")
+  return (
+    <MenuContext.Provider
+      value={menuContextValue(
+        `${parent.id}-sub${generated}`,
+        loopFocus ?? parent.loopFocus
+      )}
+    >
+      {children}
+    </MenuContext.Provider>
+  )
+}
+
+/** The area that opens the menu on a right click, with the anchor the script moves to the pointer. */
+function MenuTriggerElement({ children, ...props }: ComponentProps<"div">) {
+  const menu = useMenuContext()
+  return (
+    <div data-context-menu={menu.id} {...props}>
+      {children}
+      <span
+        aria-hidden="true"
+        data-context-menu-anchor=""
+        style={`position:fixed;inset:0 auto auto 0;width:0;height:0;anchor-name:${menu.anchor}`}
+      />
+    </div>
+  )
+}
+
+function MenuSubmenuTriggerElement({
+  disabled,
+  style,
+  ...props
+}: MenuItemProps) {
+  const menu = useMenuContext()
+  return (
+    <div
+      role="menuitem"
+      tabindex={0}
+      aria-disabled={disabled ? "true" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      id={menu.triggerId}
+      aria-haspopup="menu"
+      aria-expanded="false"
+      aria-controls={menu.id}
+      style={withStyle(style, { "anchor-name": menu.anchor })}
+      {...props}
+    />
+  )
+}
+
+/** The native popover renders in the top layer, so no portal is needed. */
+function MenuPortalElement({ children }: { children?: Child }) {
+  return <>{children}</>
+}
+
+function MenuPopupElement({ style, ...props }: ComponentProps<"div">) {
+  const menu = useMenuContext()
+  const placement = useContext(AnchorPlacementContext)
+  return (
+    <div
+      id={menu.id}
+      popover="auto"
+      role="menu"
+      tabindex={-1}
+      aria-labelledby={menu.labelled ? menu.triggerId : undefined}
+      data-side={placement.side}
+      data-align={placement.align}
+      data-loop-focus={menu.loopFocus ? undefined : "false"}
+      style={withStyle(style, anchorPlacementStyle(menu.anchor, placement))}
+      {...props}
+    />
+  )
+}
+
+function MenuGroupElement(props: ComponentProps<"div">) {
+  const labelId = `menu-group${useId().replaceAll(":", "-")}`
+  return (
+    <MenuGroupContext.Provider value={{ labelId }}>
+      <div role="group" aria-labelledby={labelId} {...props} />
+    </MenuGroupContext.Provider>
+  )
+}
+
+function MenuGroupLabelElement(props: ComponentProps<"div">) {
+  return (
+    <div
+      id={useContext(MenuGroupContext)?.labelId}
+      aria-hidden="true"
+      {...props}
+    />
+  )
+}
+
+function MenuItemElement({
+  disabled,
+  closeOnClick,
+  render,
+  ...props
+}: MenuItemProps) {
+  return renderElement(
+    <div
+      {...menuItemAttributes("menuitem", disabled, closeOnClick)}
+      {...props}
+    />,
+    render
+  )
+}
+
+function MenuCheckboxItemElement({
+  checked,
+  defaultChecked = false,
+  disabled,
+  closeOnClick,
+  render,
+  ...props
+}: MenuCheckboxItemProps) {
+  return renderElement(
+    <div
+      {...menuItemAttributes("menuitemcheckbox", disabled, closeOnClick)}
+      {...menuCheckedAttributes(checked ?? defaultChecked)}
+      {...props}
+    />,
+    render
+  )
+}
+
+function MenuRadioGroupElement({
+  value,
+  defaultValue,
+  ...props
+}: MenuRadioGroupProps) {
+  const labelId = `menu-group${useId().replaceAll(":", "-")}`
+  return (
+    <MenuGroupContext.Provider
+      value={{ labelId, value: value ?? defaultValue }}
+    >
+      <div role="group" aria-labelledby={labelId} {...props} />
+    </MenuGroupContext.Provider>
+  )
+}
+
+function MenuRadioItemElement({
+  value,
+  disabled,
+  closeOnClick,
+  render,
+  ...props
+}: MenuRadioItemProps) {
+  const group = useContext(MenuGroupContext)
+  return renderElement(
+    <div
+      {...menuItemAttributes("menuitemradio", disabled, closeOnClick)}
+      {...menuCheckedAttributes(group?.value === value)}
+      data-value={value}
+      {...props}
+    />,
+    render
+  )
+}
+
+/** Shown while the item is checked (Base UI mounts it only then). */
+function MenuItemIndicatorElement(props: ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden="true"
+      class="in-[[aria-checked=false]]:hidden"
+      {...props}
+    />
+  )
+}
+
+function MenuSeparatorElement(props: ComponentProps<"div">) {
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      data-orientation="horizontal"
+      {...props}
+    />
+  )
+}
+
+type AnchorSide =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "inline-start"
+  | "inline-end"
+
+type AnchorAlign = "start" | "center" | "end"
+
+interface AnchorPlacement {
+  side: AnchorSide
+  align: AnchorAlign
+  sideOffset: number
+  alignOffset: number
+}
+
+type AnchorPositionerProps = {
+  side?: AnchorSide | undefined
+  align?: AnchorAlign | undefined
+  sideOffset?: number | undefined
+  alignOffset?: number | undefined
+  class?: string | undefined
+  children?: Child
+}
+
+const AnchorPlacementContext = createContext<AnchorPlacement>({
+  side: "bottom",
+  align: "center",
+  sideOffset: 0,
+  alignOffset: 0,
+})
+
+/** Placement for the popup inside; the popup itself is positioned with CSS. */
+function AnchorPositioner({
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  children,
+}: AnchorPositionerProps) {
+  return (
+    <AnchorPlacementContext.Provider
+      value={{ side, align, sideOffset, alignOffset }}
+    >
+      {children}
+    </AnchorPlacementContext.Provider>
+  )
+}
+
+/** Inline styles that anchor a popup to `anchor` like Base UI's positioner. */
+function anchorPlacementStyle(
+  anchor: string,
+  p: AnchorPlacement
+): Record<string, string> {
+  const block = p.side === "top" || p.side === "bottom"
+  const logical = p.side === "inline-start" || p.side === "inline-end"
+  const span = block
+    ? { start: "span-x-end", center: "", end: "span-x-start" }[p.align]
+    : logical
+      ? { start: "span-block-end", center: "", end: "span-block-start" }[
+          p.align
+        ]
+      : { start: "span-y-end", center: "", end: "span-y-start" }[p.align]
+  const toward = {
+    top: "margin-bottom",
+    bottom: "margin-top",
+    left: "margin-right",
+    right: "margin-left",
+    "inline-start": "margin-inline-end",
+    "inline-end": "margin-inline-start",
+  }[p.side]
+  const across = block
+    ? p.align === "end"
+      ? "margin-inline-end"
+      : "margin-inline-start"
+    : p.align === "end"
+      ? "margin-block-end"
+      : "margin-block-start"
+  const edge = { start: "0%", center: "50%", end: "100%" }[p.align]
+  const origin = {
+    top: `${edge} 100%`,
+    bottom: `${edge} 0%`,
+    left: `100% ${edge}`,
+    right: `0% ${edge}`,
+    "inline-start": `100% ${edge}`,
+    "inline-end": `0% ${edge}`,
+  }[p.side]
+  return {
+    "position-anchor": anchor,
+    "position-area": [p.side, span].filter(Boolean).join(" "),
+    "position-try-fallbacks": block ? "flip-block" : "flip-inline",
+    [toward]: `${p.sideOffset}px`,
+    // A centered popup is centered with its margins, so a start margin of
+    // twice the offset shifts it by the offset: toward the end of the line
+    // (mirrored in right-to-left text, like Base UI) or down.
+    ...(p.alignOffset === 0
+      ? {}
+      : p.align === "center"
+        ? {
+            [block ? "margin-inline-start" : "margin-block-start"]:
+              `${2 * p.alignOffset}px`,
+          }
+        : { [across]: `${p.alignOffset}px` }),
+    "--transform-origin": origin,
+    // Base UI's size variables for popup classes (`w-(--anchor-width)`, ...).
+    "--anchor-width": "anchor-size(width)",
+    "--anchor-height": "anchor-size(height)",
+    "--available-width": "100%",
+    "--available-height": "100%",
+  }
+}
+
+/** Adds `extra` declarations to a string or object `style` prop (the prop wins). */
+function withStyle(
+  style: string | JSX.CSSProperties | undefined,
+  extra: Record<string, string>
+): string | JSX.CSSProperties {
+  if (typeof style === "string") {
+    const css = Object.entries(extra).map(([key, value]) => `${key}:${value}`)
+    return [...css, style].join(";")
+  }
+  return { ...extra, ...style }
+}
+
+function ContextMenu({ ...props }: MenuRootProps) {
+  return <MenuRootElement data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: { children?: Child }) {
+  return <MenuPortalElement data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuTrigger({
+  class: className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <MenuTriggerElement
+      data-slot="context-menu-trigger"
+      class={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  class: className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ComponentProps<"div"> &
+  Pick<
+    AnchorPositionerProps,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPortalElement>
+      <AnchorPositioner
+        class="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPopupElement
+          data-slot="context-menu-content"
+          class={cn(
+            "m-auto supports-[position-area:bottom]:m-0",
+            "dark z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 open:animate-in open:fade-in-0 open:zoom-in-95 not-open:animate-out not-open:fade-out-0 not-open:zoom-out-95 not-open:hidden transition-[display,overlay] transition-discrete",
+            className
+          )}
+          {...props}
+        />
+      </AnchorPositioner>
+    </MenuPortalElement>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ComponentProps<"div">) {
+  return <MenuGroupElement data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuLabel({
+  class: className,
+  inset,
+  ...props
+}: ComponentProps<"div"> & {
+  inset?: boolean
+}) {
+  return (
+    <MenuGroupLabelElement
+      data-slot="context-menu-label"
+      data-inset={inset}
+      class={cn(
+        "px-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  class: className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuItemProps & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuItemElement
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      class={cn(
+        "group/context-menu-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: MenuRootProps) {
+  return <MenuSubmenuRootElement data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuSubTrigger({
+  class: className,
+  inset,
+  children,
+  ...props
+}: MenuItemProps & {
+  inset?: boolean
+}) {
+  return (
+    <MenuSubmenuTriggerElement
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      class={cn(
+        "flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon class="ml-auto" />
+    </MenuSubmenuTriggerElement>
+  )
+}
+
+function ContextMenuSubContent({
+  ...props
+}: Parameters<typeof ContextMenuContent>[0]) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      class="dark shadow-lg"
+      side="right"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  class: className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuCheckboxItemProps & {
+  inset?: boolean
+}) {
+  return (
+    <MenuCheckboxItemElement
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      class={cn(
+        "relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span class="pointer-events-none absolute right-2 flex items-center justify-center">
+        <MenuItemIndicatorElement>
+          <CheckIcon />
+        </MenuItemIndicatorElement>
+      </span>
+      {children}
+    </MenuCheckboxItemElement>
+  )
+}
+
+function ContextMenuRadioGroup({ ...props }: MenuRadioGroupProps) {
+  return (
+    <MenuRadioGroupElement data-slot="context-menu-radio-group" {...props} />
+  )
+}
+
+function ContextMenuRadioItem({
+  class: className,
+  children,
+  inset,
+  ...props
+}: MenuRadioItemProps & {
+  inset?: boolean
+}) {
+  return (
+    <MenuRadioItemElement
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      class={cn(
+        "relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    >
+      <span class="pointer-events-none absolute right-2 flex items-center justify-center">
+        <MenuItemIndicatorElement>
+          <CheckIcon />
+        </MenuItemIndicatorElement>
+      </span>
+      {children}
+    </MenuRadioItemElement>
+  )
+}
+
+function ContextMenuSeparator({
+  class: className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <MenuSeparatorElement
+      data-slot="context-menu-separator"
+      class={cn("-mx-1 my-1 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  class: className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      class={cn(
+        "ml-auto text-[0.625rem] tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+// icon-helper
+/** Like lucide-react, icons are hidden from assistive technology unless labelled. */
+function hasA11yProp(props: object): boolean {
+  return Object.keys(props).some(
+    (key) => key.startsWith("aria-") || key === "role" || key === "title"
+  )
+}
+
+// icon: {"lucide":"CheckIcon","tabler":"IconCheck","hugeicons":"Tick02Icon","phosphor":"CheckIcon","remixicon":"RiCheckLine"}
+/** Lucide `check` icon, inlined (ISC License, see LICENSE-shadcnui-hono-jsx.txt). */
+function CheckIcon({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("lucide lucide-check", className)}
+      aria-hidden={children || hasA11yProp(props) ? undefined : "true"}
+      {...props}
+    >
+      <path d="M20 6 9 17l-5-5" />
+      {children}
+    </svg>
+  )
+}
+
+// icon: {"lucide":"ChevronRightIcon","tabler":"IconChevronRight","hugeicons":"ArrowRight01Icon","phosphor":"CaretRightIcon","remixicon":"RiArrowRightSLine"}
+/** Lucide `chevron-right` icon, inlined (ISC License, see LICENSE-shadcnui-hono-jsx.txt). */
+function ChevronRightIcon({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={cn("lucide lucide-chevron-right", className)}
+      aria-hidden={children || hasA11yProp(props) ? undefined : "true"}
+      {...props}
+    >
+      <path d="m9 18 6-6-6-6" />
+      {children}
+    </svg>
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+}