50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1982,"use client" import * as React from "react" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { cn } from "cn" type LabelIndicator = "required" | "optional" type ControlState = { disabled: boolean required: boolean invalid: boolean readOnly: boolean } const idleState: ControlState = { disabled: false, required: false, invalid: false, readOnly: false, } const controlSelector = 'input:not([type="hidden"]), textarea, select, button, meter, output, progress, [role="checkbox"], [role="switch"], [role="radio"], [role="combobox"], [role="slider"]' function findControl(label: HTMLLabelElement) { if (label.htmlFor) { return document.getElementById(label.htmlFor) } return label.querySelector(controlSelector) } function readState(control: HTMLElement | null): ControlState { if (!control) { return idleState } return { disabled: control.matches(":disabled") || control.hasAttribute("data-disabled") || control.getAttribute("aria-disabled") === "true", required: control.matches(":required") || control.getAttribute("aria-required") === "true" || control.hasAttribute("data-required"), invalid: control.getAttribute("aria-invalid") === "true" || control.hasAttribute("data-invalid") || control.matches(":user-invalid"), readOnly: control.matches(":read-only:is(input, textarea)") || control.getAttribute("aria-readonly") === "true" || control.hasAttribute("data-readonly"), } } function sameState(a: ControlState, b: ControlState) { return ( a.disabled === b.disabled && a.required === b.required && a.invalid === b.invalid && a.readOnly === b.readOnly ) } function useControlState( labelRef: React.RefObject, htmlFor: string | undefined ) { const [state, setState] = React.useState(idleState) React.useEffect(() => { const label = labelRef.current if (!label) { return } let control: HTMLElement | null = null let frame = 0 const attributes = new MutationObserver(() => sync()) const children = new MutationObserver(() => connect()) const sync = () => { const next = readState(control) setState((previous) => (sameState(previous, next) ? previous : next)) } const connect = () => { const found = findControl(label) if (found === control) { return } control = found attributes.disconnect() if (control) { attributes.observe(control, { attributes: true, attributeFilter: [ "disabled", "required", "readonly", "aria-disabled", "aria-required", "aria-invalid", "aria-readonly", "data-disabled", "data-required", "data-invalid", "data-readonly", ], }) } sync() } const onFieldEvent = (event: Event) => { if (control && event.target === control) { sync() } } connect() if (!control) { frame = requestAnimationFrame(connect) } if (!htmlFor) { children.observe(label, { childList: true, subtree: true }) } window.addEventListener("input", onFieldEvent) window.addEventListener("change", onFieldEvent) window.addEventListener("focusout", onFieldEvent) window.addEventListener("invalid", onFieldEvent, true) return () => { cancelAnimationFrame(frame) attributes.disconnect() children.disconnect() window.removeEventListener("input", onFieldEvent) window.removeEventListener("change", onFieldEvent) window.removeEventListener("focusout", onFieldEvent) window.removeEventListener("invalid", onFieldEvent, true) } }, [labelRef, htmlFor]) return state } type LabelProps = useRender.ComponentProps<"label"> & { indicator?: LabelIndicator optionalText?: React.ReactNode } function Label({ className, indicator, optionalText = "Optional", render, children, htmlFor, onMouseDown, ref, ...props }: LabelProps) { const labelRef = React.useRef(null) const state = useControlState(labelRef, htmlFor) const setRef = React.useCallback( (node: HTMLLabelElement | null) => { labelRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) const mark = indicator === "required" && state.required ? ( ) : indicator === "optional" && !state.required ? ( ) : null return useRender({ defaultTagName: "label", render, ref: setRef, props: mergeProps<"label">( { htmlFor, className: cn( "inline-flex w-fit max-w-full min-w-0 items-center gap-2 text-sm leading-snug font-medium text-pretty wrap-anywhere text-foreground select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground", className ), onMouseDown: (event) => { onMouseDown?.(event) const target = event.target as Element if ( !event.defaultPrevented && event.detail > 1 && !target.closest(controlSelector) ) { event.preventDefault() } }, children: ( <> {children} {mark} ), }, props, { "data-slot": "label", ...(state.disabled ? { "data-disabled": "" } : {}), ...(state.required ? { "data-required": "" } : {}), ...(state.invalid ? { "data-invalid": "" } : {}), ...(state.readOnly ? { "data-readonly": "" } : {}), } as React.ComponentProps<"label"> ), }) } export { Label } export type { LabelIndicator, LabelProps } 4f:["$","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","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/label.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]