37:I[84082,["/_next/static/chunks/0j52qan26yqbq.js","/_next/static/chunks/1250nlp1rleuf.js","/_next/static/chunks/0b5095-guo4jx.js","/_next/static/chunks/1s2rd5uubk-qh.js","/_next/static/chunks/2ktmsr5tfz_d7.js","/_next/static/chunks/2wxx-khloqf6k.js","/_next/static/chunks/20mb_fgt1pftf.js"],"InstallCommand"] 38:I[76581,["/_next/static/chunks/0j52qan26yqbq.js","/_next/static/chunks/1250nlp1rleuf.js","/_next/static/chunks/0b5095-guo4jx.js","/_next/static/chunks/1s2rd5uubk-qh.js","/_next/static/chunks/2ktmsr5tfz_d7.js","/_next/static/chunks/2wxx-khloqf6k.js","/_next/static/chunks/20mb_fgt1pftf.js"],"Separator"] 36:T5121,

"use client";

import { composeTailwindRenderProps } from "@/registry/default/ui/oui-base";
import { cva } from "class-variance-authority";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import * as Rac from "react-aria-components";
import { twMerge } from "tailwind-merge";

/**
 * Derived from shadcn DropdownMenuContent
 */
export function Menu<T extends object>({
  className,
  ...props
}: Rac.MenuProps<T>) {
  return (
    <Rac.Menu
      data-slot="menu"
      className={composeTailwindRenderProps(
        className,
        "w-full min-w-32 overflow-x-hidden overflow-y-auto p-1",
      )}
      {...props}
    />
  );
}

/**
 * Derived from shadcn DropdownMenuItem
 */
export const menuItemVariants = cva(
  [
    "relative flex cursor-default items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none",
    '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4 [&_svg:not([class*="text-"])]:text-muted-foreground',
    "data-focused:bg-accent data-focused:text-accent-foreground",
    "data-disabled:pointer-events-none data-disabled:opacity-50",
  ],
  {
    variants: {
      variant: {
        default: "",
        destructive: [
          "text-destructive [&_svg]:text-destructive",
          "data-focused:bg-destructive/10 data-focused:text-destructive dark:data-focused:bg-destructive/20",
        ],
      },
      selectionMode: {
        none: "",
        single: "pl-8",
        multiple: "pl-8",
      },
    },
    defaultVariants: {
      variant: "default",
      selectionMode: "none",
    },
  },
);

export interface MenuItemProps<T extends object> extends Rac.MenuItemProps<T> {
  variant?: "default" | "destructive";
}

/**
 * Derived from shadcn DropdownMenuCheckboxItem and DropdownMenuRadioGroup
 */
export function MenuItem<T extends object>({
  variant,
  className,
  children,
  ...props
}: MenuItemProps<T>) {
  return (
    <Rac.MenuItem
      data-slot="menu-item"
      className={Rac.composeRenderProps(className, (className, renderProps) =>
        twMerge(
          menuItemVariants({
            variant,
            ...renderProps,
            className,
          }),
        ),
      )}
      {...props}
    >
      {({ isSelected, selectionMode, hasSubmenu, ...renderProps }) => {
        const isCheckboxItem = isSelected && selectionMode === "multiple";
        const isRadioItem = isSelected && selectionMode === "single";

        return (
          <>
            {isCheckboxItem && (
              <span className="absolute left-2 flex size-3.5 items-center justify-center">
                <CheckIcon className="size-4" />
              </span>
            )}
            {isRadioItem && (
              <span className="absolute left-2 flex size-3.5 items-center justify-center">
                <CircleIcon className="size-2 fill-current" />
              </span>
            )}
            {typeof children === "function"
              ? children({
                  isSelected,
                  selectionMode,
                  hasSubmenu,
                  ...renderProps,
                })
              : children}
            {hasSubmenu && <ChevronRightIcon className="ml-auto size-4" />}
          </>
        );
      }}
    </Rac.MenuItem>
  );
}

/**
 * Derived from shadcn DropdownMenuLabel
 */
export function MenuHeader({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof Rac.Header> & {
  inset?: boolean;
}) {
  return (
    <Rac.Header
      data-slot="menu-header"
      data-inset={inset}
      className={twMerge(
        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
        className,
      )}
      {...props}
    />
  );
}

/**
 * Derived from shadcn DropdownMenuSeparator
 */
export function MenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Rac.Separator>) {
  return (
    <Rac.Separator
      data-slot="menu-separator"
      orientation="horizontal"
      className={twMerge("-mx-1 my-1 h-px bg-border", className)}
      {...props}
    />
  );
}

32:["$","div",null,{"className":"code-block max-h-[36rem] overflow-auto px-4 py-3 font-mono text-xs leading-relaxed [&_pre]:m-0 [&_pre]:w-max [&_pre]:min-w-full [&_pre]:bg-transparent [&_pre]:whitespace-pre","dangerouslySetInnerHTML":{"__html":"$36"}}] 33:["$","aside",null,{"className":"space-y-6 lg:sticky lg:top-24 lg:self-start","children":[["$","div",null,{"className":"space-y-2","children":[["$","h2",null,{"className":"text-xs font-medium uppercase tracking-wider text-muted-foreground","children":"Install"}],["$","$L37",null,{"namespace":"oui","name":"oui-menu","sourceUrl":"https://oui.mw10013.workers.dev/r/oui-menu.json"}]]}],["$","$L38",null,{}],["$","dl",null,{"className":"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm","children":[["$","dt",null,{"className":"text-muted-foreground","children":"Registry"}],["$","dd",null,{"className":"truncate","children":["$","a",null,{"ref":"$undefined","href":"/browse?registry=oui","className":"hover:underline","children":"@oui"}]}],["$","dt",null,{"className":"text-muted-foreground","children":"Kind"}],["$","dd",null,{"children":"Component"}],["$","dt",null,{"className":"text-muted-foreground","children":"Framework"}],["$","dd",null,{"children":"React"}],[["$","dt",null,{"className":"text-muted-foreground","children":"Files"}],["$","dd",null,{"children":[1," · ","4.0 KB"]}]],["$","dt",null,{"className":"text-muted-foreground","children":"Preview"}],["$","dd",null,{"children":"Live"}],["$","dt",null,{"className":"text-muted-foreground","children":"License"}],["$","dd",null,{"children":["$","a",null,{"className":"inline-flex items-center gap-0.5 hover:underline","href":"https://github.com/mw10013/oui/blob/main/LICENSE","target":"_blank","rel":"noreferrer","title":"Read the license file in the registry's repository","children":["MIT",["$","$L9",null,{"ref":"$undefined","iconNode":"$25:props:children:0:props:children:1:props:iconNode","className":"lucide-arrow-up-right size-3 text-muted-foreground"}]]}]}]]}],[["$","$L38",null,{}],["$","div",null,{"className":"space-y-2","children":[["$","h2",null,{"className":"text-xs font-medium uppercase tracking-wider text-muted-foreground","children":"npm dependencies"}],["$","div",null,{"className":"flex flex-wrap gap-1.5","children":[["$","a","react-aria-components",{"href":"https://www.npmjs.com/package/react-aria-components","target":"_blank","rel":"noreferrer","children":"react-aria-components","data-slot":"badge","data-variant":"outline","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! border-border [a]:hover:bg-muted [a]:hover:text-muted-foreground font-normal font-mono text-caption","ref":null}],["$","a","class-variance-authority",{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noreferrer","children":"class-variance-authority","data-slot":"badge","data-variant":"outline","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! border-border [a]:hover:bg-muted [a]:hover:text-muted-foreground font-normal font-mono text-caption","ref":null}],["$","a","lucide-react",{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noreferrer","children":"lucide-react","data-slot":"badge","data-variant":"outline","className":"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border px-2 py-0.5 text-xs whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3! border-border [a]:hover:bg-muted [a]:hover:text-muted-foreground font-normal font-mono text-caption","ref":null}],"$L39"]}]]}]],"$L3a"]}] 35:["$","$L34","oui/oui-input-demo-password",{"item":{"id":"oui/oui-input-demo-password","registryId":"oui","itemId":"oui-input-demo-password","name":"oui-input-demo-password","title":null,"kind":"component","framework":"react","namespace":"oui","liveKey":"oui__oui-input-demo-password","liveHeight":36,"isDemo":false,"description":null,"previewWidth":1265,"previewHeight":360}}]

Search the catalog

Menu

Built on Menu

More from @oui