shadcnui-hono-jsx 0.1.0

package/generated/templates/base-vega/menu-inverted-translucent/dropdown-menu.tsx

@@ -0,0 +1,863 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate dropdown-menu`.
+// upstream: shadcn/ui base-vega/dropdown-menu (https://ui.shadcn.com/r/styles/base-vega/dropdown-menu.json)
+// upstream-revision: sha256:1cb2516210c494fffe9ec7a9bda7204b89d18c2bf7d376af534065d56d44f36e; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// variant: menu-inverted-translucent
+// 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)
+
+/** Set by a menubar: its menu triggers are menuitems, and the first one is tabbable. */
+const MenubarContext = sharedContext<{ claimed: boolean } | null>(
+  "menubar",
+  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 = true
+
+/** 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>
+  )
+}
+
+function MenuTriggerElement({
+  type = "button",
+  render,
+  style,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  const menu = useMenuContext()
+  // In a menubar the triggers are menuitems with a roving tab stop, like Base UI.
+  const menubar = useContext(MenubarContext)
+  const first = menubar !== null && !menubar.claimed
+  if (menubar) menubar.claimed = true
+  return renderElement(
+    <button
+      type={type}
+      id={menu.triggerId}
+      command="toggle-popover"
+      commandfor={menu.id}
+      role={menubar ? "menuitem" : undefined}
+      tabindex={menubar ? (first ? 0 : -1) : undefined}
+      aria-haspopup="menu"
+      aria-expanded="false"
+      style={withStyle(style, { "anchor-name": menu.anchor })}
+      {...props}
+    />,
+    render
+  )
+}
+
+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 DropdownMenu({ ...props }: MenuRootProps) {
+  return <MenuRootElement data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: { children?: Child }) {
+  return <MenuPortalElement data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  return <MenuTriggerElement data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  class: className,
+  ...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="dropdown-menu-content"
+          class={cn(
+            "m-auto supports-[position-area:bottom]:m-0",
+            "dark z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md 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:overflow-hidden not-open:fade-out-0 not-open:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground! not-open:hidden transition-[display,overlay] transition-discrete",
+            className
+          )}
+          {...props}
+        />
+      </AnchorPositioner>
+    </MenuPortalElement>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: ComponentProps<"div">) {
+  return <MenuGroupElement data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  class: className,
+  inset,
+  ...props
+}: ComponentProps<"div"> & {
+  inset?: boolean
+}) {
+  return (
+    <MenuGroupLabelElement
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      class={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  class: className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuItemProps & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuItemElement
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      class={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuRootProps) {
+  return <MenuSubmenuRootElement data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  class: className,
+  inset,
+  children,
+  ...props
+}: MenuItemProps & {
+  inset?: boolean
+}) {
+  return (
+    <MenuSubmenuTriggerElement
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      class={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon class="ml-auto" />
+    </MenuSubmenuTriggerElement>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  class: className,
+  ...props
+}: Parameters<typeof DropdownMenuContent>[0]) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      class={cn(
+        "dark w-auto min-w-[96px] rounded-md p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 animate-none! relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!",
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  class: className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuCheckboxItemProps & {
+  inset?: boolean
+}) {
+  return (
+    <MenuCheckboxItemElement
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      class={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        class="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuItemIndicatorElement>
+          <CheckIcon />
+        </MenuItemIndicatorElement>
+      </span>
+      {children}
+    </MenuCheckboxItemElement>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuRadioGroupProps) {
+  return (
+    <MenuRadioGroupElement data-slot="dropdown-menu-radio-group" {...props} />
+  )
+}
+
+function DropdownMenuRadioItem({
+  class: className,
+  children,
+  inset,
+  ...props
+}: MenuRadioItemProps & {
+  inset?: boolean
+}) {
+  return (
+    <MenuRadioItemElement
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      class={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        class="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuItemIndicatorElement>
+          <CheckIcon />
+        </MenuItemIndicatorElement>
+      </span>
+      {children}
+    </MenuRadioItemElement>
+  )
+}
+
+function DropdownMenuSeparator({
+  class: className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <MenuSeparatorElement
+      data-slot="dropdown-menu-separator"
+      class={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  class: className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      class={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-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 {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+}