4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T22a2,"use client"; import { scrollAreaListChildren } from "@/components/ui/scroll-area"; import * as React from "react"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import * as Primitive from "@radix-ui/react-dropdown-menu"; import { useFlowAppearance, useFlowGroup, } from "@/lib/cojeev-motion/use-flow"; import { adornItem, adornMenuItem, itemText, type ItemAdornmentItemProps } from "@/components/ui/item-adornment"; import { StateChevron, AnimatedIcon } from "@/components/ui/animated-icon"; export type DropdownMenuProps = React.ComponentProps; export function DropdownMenu(props: DropdownMenuProps) { return ; } export type DropdownMenuPortalProps = React.ComponentProps< typeof Primitive.Portal >; export function DropdownMenuPortal(props: DropdownMenuPortalProps) { return ; } export type DropdownMenuGroupProps = React.ComponentProps< typeof Primitive.Group >; export function DropdownMenuGroup(props: DropdownMenuGroupProps) { return ; } export type DropdownMenuRadioGroupProps = React.ComponentProps< typeof Primitive.RadioGroup >; export function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) { return ( ); } export type DropdownMenuSubProps = React.ComponentProps; export function DropdownMenuSub(props: DropdownMenuSubProps) { return ; } export type DropdownMenuTriggerProps = React.ComponentProps< typeof Primitive.Trigger > & { chevron?: boolean }; export function DropdownMenuTrigger({ className, children, chevron = false, ref, ...props }: DropdownMenuTriggerProps) { return ( {adornItem(children, false, "", props.asChild, chevron ? : null)} ); } export const dropdownmenuContentVariants = cva( "v-menu [background:var(--popover)] [border-radius:var(--r-card-sm)] [padding:var(--s-2)] [min-width:200px] [box-shadow:var(--shadow-float)] [border:1px_solid_var(--v-border)] [display:grid] [gap:2px]", ); export type DropdownMenuContentProps = React.ComponentProps< typeof Primitive.Content >; export function DropdownMenuContent({ className, ref, children, sideOffset = 6, ...props }: DropdownMenuContentProps) { const morphRef = useMorph("surfaces", ref); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[data-highlighted]", }); const flowRef = useFlowAppearance(true, groupRef, "grow"); return ( {scrollAreaListChildren(children, props.asChild)} ); } export type DropdownMenuSubContentProps = React.ComponentProps< typeof Primitive.SubContent >; export function DropdownMenuSubContent({ className, children, ref, ...props }: DropdownMenuSubContentProps) { const morphRef = useMorph("surfaces", ref); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[data-highlighted]", }); const flowRef = useFlowAppearance(true, groupRef, "grow"); return ( {scrollAreaListChildren(children, props.asChild)} ); } export type DropdownMenuItemProps = React.ComponentProps< typeof Primitive.Item > & { variant?: "default" | "danger"; inset?: boolean } & ItemAdornmentItemProps; export function DropdownMenuItem({ className, children, adornment, adornmentId, variant, inset, ref, ...props }: DropdownMenuItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild)} ); } export type DropdownMenuSubTriggerProps = React.ComponentProps< typeof Primitive.SubTrigger > & { inset?: boolean } & ItemAdornmentItemProps; export function DropdownMenuSubTrigger({ className, adornment, adornmentId, inset, children, ref, ...props }: DropdownMenuSubTriggerProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type DropdownMenuCheckboxItemProps = React.ComponentProps< typeof Primitive.CheckboxItem > & ItemAdornmentItemProps; export function DropdownMenuCheckboxItem({ className, adornment, adornmentId, children, ref, ...props }: DropdownMenuCheckboxItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type DropdownMenuRadioItemProps = React.ComponentProps< typeof Primitive.RadioItem > & ItemAdornmentItemProps; export function DropdownMenuRadioItem({ className, adornment, adornmentId, children, ref, ...props }: DropdownMenuRadioItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type DropdownMenuLabelProps = React.ComponentProps< typeof Primitive.Label >; export function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps) { return ( ); } export type DropdownMenuSeparatorProps = React.ComponentProps< typeof Primitive.Separator >; export function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps) { return ( ); } export type DropdownMenuShortcutProps = React.ComponentProps<"span">; export function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps) { return ( ); } 52:T14ef,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-menu__item:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] ) { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md); font-size: var(--fs-control); width: 100%; text-align: left; white-space: nowrap; } .v-menu__item:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] ):hover, .v-menu__item:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] )[data-highlighted] { background: var(--v-beige); } .v-menu__item:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] ).-danger { color: var(--v-danger-ink); } .v-menu__sep:where([data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"]) { height: 1px; background: var(--v-border); margin: 4px 0; } .v-menu__group:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] ) { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); padding: 8px 12px 4px; } .v-menu:where([data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"]) { scrollbar-gutter: stable; } .v-menu:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] )::-webkit-scrollbar { width: 12px; height: 12px; } .v-menu:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] )::-webkit-scrollbar-track { background: transparent; border-radius: 999px; } .v-menu:where( [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"] )::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--v-ink) 34%, transparent); border-radius: 999px; border: 4px solid transparent; background-clip: content-box; min-height: 36px; } .v-menu:where([data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"]) { scrollbar-gutter: stable; } .v-menu:where([data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"]) { scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { [data-slot="dropdown-menu"], [data-slot^="dropdown-menu-"], [data-slot="dropdown-menu"]::before, [data-slot="dropdown-menu"]::after, [data-slot^="dropdown-menu-"]::before, [data-slot^="dropdown-menu-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot^="dropdown-menu-"][data-inset] { padding-left: 32px; } [data-slot^="dropdown-menu-"][data-disabled] { color: var(--v-disabled-ink); cursor: not-allowed; } [data-slot^="dropdown-menu-"][data-highlighted] { outline: none; background: var(--v-beige); } [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"] { min-width:min(200px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:min(480px,var(--radix-dropdown-menu-content-available-height,calc(100dvh - 32px))); overflow:visible; overscroll-behavior:contain; overflow-wrap:anywhere; } [data-slot="dropdown-menu-item"] { min-width:0; height:auto; min-height:36px; white-space:normal; } [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"] { z-index:var(--z-popover); } [data-slot^="dropdown-menu-"][data-part="item"] { min-width:0; white-space:normal; overflow-wrap:anywhere; padding-block:8px; } /* Compact by default; --menu-width or inline width can deliberately match a large trigger. */ [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"] { width:var(--menu-width,260px); min-width:min(200px,calc(100vw - 24px)); max-width:calc(100vw - 24px); color:var(--popover-foreground); } [data-slot^="dropdown-menu-"][data-part="item"] { min-width:0; min-height:44px; padding-block:7px; gap:10px; white-space:normal; overflow-wrap:anywhere; text-align:start; } [data-slot^="dropdown-menu-"][data-part="item"]:is(:hover,[data-highlighted],[data-state="checked"]) { background:var(--v-beige); color:var(--v-text); } [data-slot^="dropdown-menu-"][data-part="item"][data-state="checked"] { background:var(--v-pink-soft); } [data-slot^="dropdown-menu-"][data-part="item"]:active { background:var(--v-pink-soft); color:var(--v-text); } [data-slot^="dropdown-menu-"][data-part="item"].-danger { color:var(--v-danger-ink); } [data-slot^="dropdown-menu-"][data-part="item"][data-disabled] { background:transparent; color:var(--v-disabled-ink); } [data-slot^="dropdown-menu-"] .v-menu__check { display:inline-grid; place-items:center; width:18px; min-width:18px; margin-inline-start:auto; color:inherit; } [data-slot^="dropdown-menu-"] .v-menu__check .v-icon { width:16px; height:16px; } /* A native flyout may share a narrow viewport with its parent. Use Popper's measured free width so its labels wrap instead of leaving the screen. */ [data-slot="dropdown-menu-sub-content"] { min-width:min(200px,var(--radix-dropdown-menu-content-available-width,200px)); max-width:min(calc(100vw - 24px),var(--radix-dropdown-menu-content-available-width,260px)); } /* The shared ScrollArea owns menu overflow and its custom thumb. */ :is([data-slot="dropdown-menu-content"],[data-slot="dropdown-menu-sub-content"]) .v-list-scroll { --list-scroll-max-height:min(320px, calc(var(--radix-popper-available-height, 60dvh) - 20px)); } } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","@radix-ui/react-dropdown-menu",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dropdown-menu","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dropdown-menu"}]]}]}]]}],["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/scroll-area.json","https://000h.cojeev.com/r/item-adornment.json","https://000h.cojeev.com/r/animated-icon.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/dropdown-menu.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/dropdown-menu.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/dropdown-menu.css","content":"$52","type":"registry:file","target":"styles/cojeev/dropdown-menu.css"}],"className":"h-[70svh] min-h-80"}]]}]