shadcnui-hono-jsx 0.1.0

package/generated/templates/base-vega/rtl/navigation-menu.tsx

@@ -0,0 +1,599 @@
+// Generated by shadcnui-hono-jsx. DO NOT EDIT; run `bun run generate navigation-menu`.
+// upstream: shadcn/ui base-vega/navigation-menu (https://ui.shadcn.com/r/styles/base-vega/navigation-menu.json)
+// upstream-revision: sha256:bf1a4942de8c53ef3c82f1566b251ec4f8330386c6d6ebe7801031cdcc5678c9; shadcn-ui/ui@98a1fe67b439324ddc857f47fbdce056600a4329
+// mode: generated
+// variant: rtl
+// client: <script type="module" src="/shadcn/navigation-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 (chevron-down). Copyright (c) 2026 Lucide Icons and Contributors. ISC License (see LICENSE-shadcnui-hono-jsx.txt).
+
+import { cva } from "class-variance-authority"
+import { cn } from "cn"
+import type { Child, 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 NavigationMenuRootProps = ComponentProps<"nav"> & {
+  /** Milliseconds before a hovered trigger opens its content. */
+  delay?: number | undefined
+  /** Milliseconds before the content closes after the pointer leaves. */
+  closeDelay?: number | undefined
+  orientation?: "horizontal" | "vertical" | undefined
+}
+
+interface NavigationMenuState {
+  id: string
+  orientation: "horizontal" | "vertical"
+  /** Items claim their index in render order. */
+  items: number
+}
+
+const NavigationMenuContext = createContext<NavigationMenuState | null>(null)
+
+function useNavigationMenuContext(): NavigationMenuState {
+  const context = useContext(NavigationMenuContext)
+  if (!context)
+    throw new Error(
+      "NavigationMenu parts must be rendered inside <NavigationMenu>"
+    )
+  return context
+}
+
+/** The index of the enclosing item: its trigger is the anchor while it is open. */
+const NavigationMenuItemContext = createContext<number | null>(null)
+
+/**
+ * The root of a navigation menu; the client script `/shadcn/navigation-menu.js`
+ * finds the parts by `data-navigation-menu` and moves the open item's content
+ * into the shared viewport, like Base UI.
+ */
+function NavigationMenuRootElement({
+  id,
+  delay = 50,
+  closeDelay = 50,
+  orientation = "horizontal",
+  ...props
+}: NavigationMenuRootProps) {
+  const generated = useId().replaceAll(":", "-")
+  const menuId = id ?? `navigation-menu${generated}`
+  return (
+    <NavigationMenuContext.Provider
+      value={{ id: menuId, orientation, items: 0 }}
+    >
+      <nav
+        id={menuId}
+        data-navigation-menu={menuId}
+        data-orientation={orientation}
+        data-delay={delay}
+        data-close-delay={closeDelay}
+        {...props}
+      />
+    </NavigationMenuContext.Provider>
+  )
+}
+
+function NavigationMenuListElement(props: ComponentProps<"ul">) {
+  return <ul {...props} />
+}
+
+type NavigationMenuItemProps = ComponentProps<"li"> & {
+  /** Identifies the item (Base UI's `value`); unused on the server. */
+  value?: string | undefined
+}
+
+function NavigationMenuItemElement({
+  value,
+  ...props
+}: NavigationMenuItemProps) {
+  const state = useNavigationMenuContext()
+  const index = state.items++
+  return (
+    <NavigationMenuItemContext.Provider value={index}>
+      <li data-navigation-menu-item={value ?? String(index)} {...props} />
+    </NavigationMenuItemContext.Provider>
+  )
+}
+
+function navigationMenuAnchor(
+  state: NavigationMenuState,
+  index: number | null
+): string {
+  return `--${state.id}-${index ?? "root"}`
+}
+
+function NavigationMenuTriggerElement({
+  type = "button",
+  render,
+  style,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  const state = useNavigationMenuContext()
+  const index = useContext(NavigationMenuItemContext)
+  return renderElement(
+    <button
+      type={type}
+      aria-expanded="false"
+      data-navigation-menu-trigger=""
+      style={withStyle(style, {
+        "anchor-name": navigationMenuAnchor(state, index),
+      })}
+      {...props}
+    />,
+    render
+  )
+}
+
+/** Hidden in its item; the script shows it inside the viewport while its item is open. */
+function NavigationMenuContentElement(props: ComponentProps<"div">) {
+  return <div hidden data-navigation-menu-content="" {...props} />
+}
+
+function NavigationMenuPortalElement({ children }: { children?: Child }) {
+  return <>{children}</>
+}
+
+type NavigationMenuPositionerProps = ComponentProps<"div"> & {
+  side?: AnchorSide | undefined
+  align?: AnchorAlign | undefined
+  sideOffset?: number | undefined
+  alignOffset?: number | undefined
+}
+
+/** A manual native popover anchored (CSS anchor positioning) to the open item's trigger. */
+function NavigationMenuPositionerElement({
+  side = "bottom",
+  align = "center",
+  sideOffset = 0,
+  alignOffset = 0,
+  style,
+  children,
+  ...props
+}: NavigationMenuPositionerProps) {
+  const state = useNavigationMenuContext()
+  const placement = { side, align, sideOffset, alignOffset }
+  return (
+    <AnchorPlacementContext.Provider value={placement}>
+      <div
+        id={`${state.id}-positioner`}
+        popover="manual"
+        role="presentation"
+        data-side={side}
+        data-align={align}
+        data-navigation-menu-positioner=""
+        style={withStyle(style, {
+          ...anchorPlacementStyle(navigationMenuAnchor(state, null), placement),
+          inset: "auto",
+          overflow: "visible",
+          background: "transparent",
+          color: "inherit",
+        })}
+        {...props}
+      >
+        {children}
+      </div>
+    </AnchorPlacementContext.Provider>
+  )
+}
+
+function NavigationMenuPopupElement({
+  style,
+  ...props
+}: ComponentProps<"nav">) {
+  const state = useNavigationMenuContext()
+  const placement = useContext(AnchorPlacementContext)
+  return (
+    <nav
+      id={`${state.id}-popup`}
+      tabindex={-1}
+      data-side={placement.side}
+      data-align={placement.align}
+      style={withStyle(style, {
+        "--popup-width": "auto",
+        "--popup-height": "auto",
+      })}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewportElement(props: ComponentProps<"div">) {
+  return <div data-navigation-menu-viewport="" {...props} />
+}
+
+type NavigationMenuLinkProps = ComponentProps<"a", RenderProp> & {
+  /** The link to the current page. */
+  active?: boolean | undefined
+  /** Close the menu when the link is clicked. */
+  closeOnClick?: boolean | undefined
+}
+
+function NavigationMenuLinkElement({
+  active,
+  closeOnClick,
+  render,
+  ...props
+}: NavigationMenuLinkProps) {
+  return renderElement(
+    <a
+      aria-current={active ? "page" : undefined}
+      data-active={active ? "" : undefined}
+      data-close-on-click={closeOnClick ? "" : undefined}
+      {...props}
+    />,
+    render
+  )
+}
+
+function NavigationMenuIconElement(props: ComponentProps<"span">) {
+  return <span aria-hidden="true" {...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
+}
+
+const AnchorPlacementContext = createContext<AnchorPlacement>({
+  side: "bottom",
+  align: "center",
+  sideOffset: 0,
+  alignOffset: 0,
+})
+
+/** 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 NavigationMenu({
+  align = "start",
+  class: className,
+  children,
+  ...props
+}: NavigationMenuRootProps & Pick<NavigationMenuPositionerProps, "align">) {
+  return (
+    <NavigationMenuRootElement
+      data-slot="navigation-menu"
+      class={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuRootElement>
+  )
+}
+
+function NavigationMenuList({
+  class: className,
+  ...props
+}: ComponentProps<"ul">) {
+  return (
+    <NavigationMenuListElement
+      data-slot="navigation-menu-list"
+      class={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  class: className,
+  ...props
+}: NavigationMenuItemProps) {
+  return (
+    <NavigationMenuItemElement
+      data-slot="navigation-menu-item"
+      class={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  class: className,
+  children,
+  ...props
+}: ComponentProps<"button", RenderProp>) {
+  return (
+    <NavigationMenuTriggerElement
+      data-slot="navigation-menu-trigger"
+      class={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        class="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuTriggerElement>
+  )
+}
+
+function NavigationMenuContent({
+  class: className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <NavigationMenuContentElement
+      data-slot="navigation-menu-content"
+      class={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] rtl:data-ending-style:data-activation-direction=left:-translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] rtl:data-ending-style:data-activation-direction=right:-translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] rtl:data-starting-style:data-activation-direction=left:-translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] rtl:data-starting-style:data-activation-direction=right:-translate-x-[50%] h-full w-auto p-2 pe-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  class: className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPositionerProps) {
+  return (
+    <NavigationMenuPortalElement>
+      <NavigationMenuPositionerElement
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        class={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:end-0 data-[side=bottom]:before:start-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPopupElement class="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuViewportElement class="relative size-full overflow-hidden" />
+        </NavigationMenuPopupElement>
+      </NavigationMenuPositionerElement>
+    </NavigationMenuPortalElement>
+  )
+}
+
+function NavigationMenuLink({
+  class: className,
+  ...props
+}: NavigationMenuLinkProps) {
+  return (
+    <NavigationMenuLinkElement
+      data-slot="navigation-menu-link"
+      class={cn(
+        "flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-sm data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  class: className,
+  ...props
+}: ComponentProps<"span">) {
+  return (
+    <NavigationMenuIconElement
+      data-slot="navigation-menu-indicator"
+      class={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" />
+    </NavigationMenuIconElement>
+  )
+}
+// 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":"ChevronDownIcon","tabler":"IconChevronDown","hugeicons":"ArrowDown01Icon","phosphor":"CaretDownIcon","remixicon":"RiArrowDownSLine"}
+/** Lucide `chevron-down` icon, inlined (ISC License, see LICENSE-shadcnui-hono-jsx.txt). */
+function ChevronDownIcon({
+  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-down", className)}
+      aria-hidden={children || hasA11yProp(props) ? undefined : "true"}
+      {...props}
+    >
+      <path d="m6 9 6 6 6-6" />
+      {children}
+    </svg>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuPositioner,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+}