4e: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"] 4f: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"] 50:T18dc,"use client"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "../../../lib/utils"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../collapsible/collapsible"; import styles from "./prop-table.module.css"; const CLASS_TYPES = new Set([ "ReactNode", "ReactElement", "HTMLElement", "HTMLProps", "MouseEvent", "ChangeEvent", "KeyboardEvent", "FocusEvent", "FormEvent", ]); const SEPARATORS = new Set(["|", "&", "(", ")", "<", ">", "[", "]", ",", " "]); function isSeparator(char: string): boolean { return SEPARATORS.has(char); } function isPascalCase(text: string): boolean { if (text.length === 0) { return false; } const firstChar = text[0]; const isFirstCharUppercase = firstChar === firstChar.toUpperCase() && firstChar !== firstChar.toLowerCase(); const hasOnlyLetters = text.split("").every((char) => (char >= "a" && char <= "z") || (char >= "A" && char <= "Z")); return isFirstCharUppercase && hasOnlyLetters; } function isNumber(value: string): boolean { if (value.length === 0) { return false; } let startIndex = 0; if (value[0] === "-") { if (value.length === 1) { return false; } startIndex = 1; } let hasDecimal = false; for (let i = startIndex; i < value.length; i++) { const char = value[i]; if (char === ".") { if (hasDecimal) { return false; // Multiple decimals } hasDecimal = true; } else if (char < "0" || char > "9") { return false; } } return true; } function splitTypeString(typeString: string): string[] { const parts: string[] = []; let current = ""; for (const char of typeString) { if (isSeparator(char)) { if (current) { parts.push(current); current = ""; } parts.push(char); } else { current += char; } } if (current) { parts.push(current); } return parts; } function highlightType(typeString: string) { const parts = splitTypeString(typeString); return parts.map((part, index) => { const key = `${part}-${index}`; if (isSeparator(part)) { return ( {part} ); } if (CLASS_TYPES.has(part) || isPascalCase(part)) { return ( {part} ); } switch (part) { case "boolean": return ( {part} ); case "number": return ( {part} ); case "function": case "void": return ( {part} ); default: return {part}; } }); } function getSimpleType(typeString: string): string { const pipeIndex = typeString.indexOf("|"); const firstType = pipeIndex !== -1 ? typeString.slice(0, pipeIndex).trim() : typeString.trim(); if (firstType.startsWith('"') && firstType.endsWith('"')) { return "string"; } return firstType; } function renderDefaultValue(defaultValue?: string) { if (!defaultValue) { return -; } if (defaultValue.startsWith('"') && defaultValue.endsWith('"')) { return {defaultValue}; } if (defaultValue === "true" || defaultValue === "false") { return {defaultValue}; } if (isNumber(defaultValue)) { return {defaultValue}; } return defaultValue; } function PropTable({ className, children, ...props }: ComponentProps<"section">) { return (

Prop

Type

Default

{children}

); } type PropTableRowProps = { name: string; type: string; defaultValue?: string; className?: string; children?: ReactNode; }; function PropTableRow({ name, type, defaultValue, className, children }: PropTableRowProps) { return (

{name} {highlightType(getSimpleType(type))}

{defaultValue ? ( {renderDefaultValue(defaultValue)} ) : ( renderDefaultValue() )}

Name

{name}

Description

{children}

Type

{highlightType(type)}

Default

{defaultValue ? ( {renderDefaultValue(defaultValue)} ) : ( renderDefaultValue() )}

); } export { PropTable, PropTableRow }; 51:T114c,.container { display: flex; flex-direction: column; margin-bottom: var(--space-lg); border: 0.5px solid oklch(from var(--border) l c h / 0.7); } .header { display: grid; grid-template-columns: 1fr; gap: 16px; /* right padding = 16px + trigger chevron (16px) + gap (16px), so columns align with rows */ padding: 8px 48px 8px 16px; background-color: var(--mix-card-33-bg); border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.7); } @media (min-width: 768px) { .header { grid-template-columns: 200px 1fr 1fr; } } .headerCell { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--foreground); } .headerCell:nth-child(2), .headerCell:nth-child(3) { display: none; } @media (min-width: 768px) { .headerCell:nth-child(2), .headerCell:nth-child(3) { display: block; } } .body { display: flex; flex-direction: column; } .collapsible { border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.7); max-width: none; width: 100%; } .collapsible:last-child { border-bottom: none; } .trigger { padding: 8px 16px; background-color: var(--mix-card-33-bg); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: none; border-radius: 0; } .trigger:hover { background-color: var(--accent); } .trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .summaryGrid { display: grid; grid-template-columns: 1fr; gap: 16px; flex: 1; align-items: center; } @media (min-width: 768px) { .summaryGrid { grid-template-columns: 200px 1fr 1fr; } } .summaryGrid > * { text-align: left; } .summaryGrid > *:nth-child(2), .summaryGrid > *:nth-child(3) { display: none; } @media (min-width: 768px) { .summaryGrid > *:nth-child(2) { display: block; } /* flex, not block: keeps the inline

 from adding baseline leading to the row */
  .summaryGrid > *:nth-child(3) {
    display: flex;
  }
}

.defaultCell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Opens instantly, animates closed. */
.panel[data-slot="collapsible-panel"] {
  background-color: var(--mix-card-50-bg);
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: var(--collapsible-panel-height);
  overflow: hidden;
  animation: none;
  transition: none;

  &[data-starting-style] {
    height: var(--collapsible-panel-height);
  }

  &[data-closed] {
    height: 0;
    animation: none;
  }

  &[data-ending-style] {
    height: 0;
    transition: height 200ms var(--ease-out-expo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel[data-slot="collapsible-panel"][data-ending-style] {
    transition: none;
  }
}

.panelRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 0.5px solid oklch(from var(--border) l c h / 0.5);
}

.panelRow:first-child {
  padding-top: 16px;
}

.panelRow:last-child {
  border-bottom: none;
  padding-bottom: 16px;
}

@media (min-width: 768px) {
  .panelRow {
    grid-template-columns: 200px 1fr 1fr;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: none;
  }

  .panelRow:first-child {
    padding-top: 16px;
  }

  .panelRow:last-child {
    padding-bottom: 16px;
  }
}

.detailLabel {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--muted-foreground);
}

.detailValue,
.detailValueSpan {
  font-size: 13px;
  color: var(--foreground);
  line-height: 1.6;
  word-break: break-word;
}

@media (min-width: 768px) {
  .detailValueSpan {
    grid-column: span 2;
  }
}

.code {
  font-size: 12px;
  line-height: 20px;
  font-family: "Geist Mono", monospace;
  color: var(--prop-code-color, var(--foreground));
}

.typeCode {
  font-size: 12px;
  line-height: 20px;
  font-family: "Geist Mono", monospace;
  color: var(--prop-type-color, var(--muted-foreground));
}

.typeClass {
  color: var(--prop-type-class-color, var(--foreground));
}

.separator {
  color: var(--muted-foreground);
}

.stringValue {
  color: var(--prop-string-color, var(--foreground));
}

.booleanValue {
  color: var(--prop-boolean-color, var(--foreground));
}

.numberValue {
  color: var(--prop-number-color, var(--foreground));
}

.functionValue {
  color: var(--prop-function-color, var(--foreground));
}

.defaultEmpty {
  color: var(--muted-foreground);
}
4d:["$","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":[null,["$","$L4e",null,{"namespace":"@roiui","registryDependencies":["https://roiui.com/r/collapsible.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/brook/ui/prop-table/prop-table.tsx","content":"$50","type":"registry:file","target":"~/components/ui/prop-table/prop-table.tsx"},{"path":"registry/brook/ui/prop-table/prop-table.module.css","content":"$51","type":"registry:file","target":"~/components/ui/prop-table/prop-table.module.css"}],"className":"h-[70svh] min-h-80"}]]}]