zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-14 18:04:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): new home page, docs, and design system (#566)

Browse Source 
Co-authored-by: Darius Cepulis <dcepulis@mux.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronald Urbina
2026-03-06 16:19:27 -06:00
committed by GitHub
co-authored by Darius Cepulis Claude Opus 4.6
parent f2f9e6ddc3
commit 351a3e8bda
255 changed files with 3574 additions and 1532 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/docs/api-reference/ApiCSSVarsTable.astro
+17 -17
View File
@@ -21,21 +21,21 @@ const vars = Object.entries(cssCustomProperties);
---
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Variable</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
vars.map(([name, def]) => (
<CSSVarRow
name={name}
description={def.description}
componentName={componentName}
/>
))
}
</Tbody>
<Thead>
<Tr>
<Th>Variable</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
vars.map(([name, def]) => (
<CSSVarRow
name={name}
description={def.description}
componentName={componentName}
/>
))
}
</Tbody>
</Table>
site/src/components/docs/api-reference/ApiDataAttrsTable.astro
+20 -20
View File
@@ -21,24 +21,24 @@ const attrs = Object.entries(dataAttributes);
---
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Attribute</Th>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
attrs.map(([name, def]) => (
<DataAttrRow
name={name}
type={def.type}
detailedType={def.detailedType}
description={def.description}
componentName={componentName}
/>
))
}
</Tbody>
<Thead>
<Tr>
<Th>Attribute</Th>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
attrs.map(([name, def]) => (
<DataAttrRow
name={name}
type={def.type}
detailedType={def.detailedType}
description={def.description}
componentName={componentName}
/>
))
}
</Tbody>
</Table>
site/src/components/docs/api-reference/ApiPropsTable.astro
+23 -23
View File
@@ -21,27 +21,27 @@ const { props, componentName } = Astro.props;
---
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Prop</Th>
<Th>Type</Th>
<Th>Default</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
Object.entries(props).map(([name, prop]) => (
<PropRow
name={name}
type={prop.type}
detailedType={prop.detailedType}
description={prop.description}
defaultValue={prop.default}
required={prop.required}
componentName={componentName}
/>
))
}
</Tbody>
<Thead>
<Tr>
<Th>Prop</Th>
<Th>Type</Th>
<Th>Default</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
Object.entries(props).map(([name, prop]) => (
<PropRow
name={name}
type={prop.type}
detailedType={prop.detailedType}
description={prop.description}
defaultValue={prop.default}
required={prop.required}
componentName={componentName}
/>
))
}
</Tbody>
</Table>
site/src/components/docs/api-reference/ApiStateTable.astro
+20 -20
View File
@@ -21,24 +21,24 @@ const stateEntries = Object.entries(state);
---
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Property</Th>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
stateEntries.map(([name, def]) => (
<StateRow
name={name}
type={def.type}
detailedType={def.detailedType}
description={def.description}
componentName={componentName}
/>
))
}
</Tbody>
<Thead>
<Tr>
<Th>Property</Th>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
stateEntries.map(([name, def]) => (
<StateRow
name={name}
type={def.type}
detailedType={def.detailedType}
description={def.description}
componentName={componentName}
/>
))
}
</Tbody>
</Table>
site/src/components/docs/api-reference/CSSVarRow.astro
+3 -3
View File
@@ -15,7 +15,7 @@ const id = `${componentName}-css-var-${name.replace(/^--/, '')}`;
---
<DetailRow id={id} name={name} type="" description={description} colspan={2}>
<Td class="align-top">
<MarkdownCode>{name}</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>{name}</MarkdownCode>
</Td>
</DetailRow>
site/src/components/docs/api-reference/ComponentReference.astro
+139 -92
View File
@@ -51,105 +51,152 @@ const singleCssCustomPropertiesSection = !apiReferenceModel.hasParts
<ContentWidth>
<H2 id={apiReferenceModel.heading.id}>{apiReferenceModel.heading.text}</H2>
{apiReferenceModel.hasParts ? (
apiReferenceModel.parts.map((part) => {
const partPropsSection = part.sections.find((section) => section.key === 'props');
const partStateSection = part.sections.find((section) => section.key === 'state');
const partDataAttributesSection = part.sections.find((section) => section.key === 'dataAttributes');
const partCssCustomPropertiesSection = part.sections.find((section) => section.key === 'cssCustomProperties');
{
apiReferenceModel.hasParts ? (
apiReferenceModel.parts.map((part) => {
const partPropsSection = part.sections.find(
(section) => section.key === "props",
);
const partStateSection = part.sections.find(
(section) => section.key === "state",
);
const partDataAttributesSection = part.sections.find(
(section) => section.key === "dataAttributes",
);
const partCssCustomPropertiesSection = part.sections.find(
(section) => section.key === "cssCustomProperties",
);
return (
<FrameworkCase frameworks={part.frameworks}>
<H3 id={part.id}>
<FrameworkCase frameworks={["react"]}>{part.labelByFramework.react}</FrameworkCase>
<FrameworkCase frameworks={["html"]}>{part.labelByFramework.html}</FrameworkCase>
</H3>
return (
<FrameworkCase frameworks={part.frameworks}>
<H3 id={part.id}>
<FrameworkCase frameworks={["react"]}>
{part.labelByFramework.react}
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
{part.labelByFramework.html}
</FrameworkCase>
</H3>
{part.description && (
<P><InlineMarkdown content={part.description} /></P>
)}
{partPropsSection && (
<>
<H4 id={partPropsSection.id}>{partPropsSection.title}</H4>
<ApiPropsTable props={part.data.props} componentName={part.componentName} />
</>
)}
{partStateSection && (
<>
<H4 id={partStateSection.id}>{partStateSection.title}</H4>
{part.description && (
<P>
<FrameworkCase frameworks={["react"]}>
State is accessible via the{" "}
<MarkdownCode>render</MarkdownCode>,{" "}
<MarkdownCode>className</MarkdownCode>, and{" "}
<MarkdownCode>style</MarkdownCode> props.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
State is reflected as data attributes for CSS styling.
</FrameworkCase>
<InlineMarkdown content={part.description} />
</P>
<ApiStateTable state={part.data.state} componentName={part.componentName} />
</>
)}
)}
{partDataAttributesSection && (
<>
<H4 id={partDataAttributesSection.id}>{partDataAttributesSection.title}</H4>
<ApiDataAttrsTable dataAttributes={part.data.dataAttributes} componentName={part.componentName} />
</>
)}
{partPropsSection && (
<>
<H4 id={partPropsSection.id}>{partPropsSection.title}</H4>
<ApiPropsTable
props={part.data.props}
componentName={part.componentName}
/>
</>
)}
{partCssCustomPropertiesSection && (
<>
<H4 id={partCssCustomPropertiesSection.id}>{partCssCustomPropertiesSection.title}</H4>
<ApiCSSVarsTable cssCustomProperties={part.data.cssCustomProperties} componentName={part.componentName} />
</>
)}
</FrameworkCase>
);
})
) : (
<>
{singlePropsSection && (
<>
<H3 id={singlePropsSection.id}>{singlePropsSection.title}</H3>
<ApiPropsTable props={apiReferenceModel.data.props} componentName={component} />
</>
)}
{partStateSection && (
<>
<H4 id={partStateSection.id}>{partStateSection.title}</H4>
<P>
<FrameworkCase frameworks={["react"]}>
State is accessible via the{" "}
<MarkdownCode>render</MarkdownCode>,{" "}
<MarkdownCode>className</MarkdownCode>, and{" "}
<MarkdownCode>style</MarkdownCode> props.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
State is reflected as data attributes for CSS styling.
</FrameworkCase>
</P>
<ApiStateTable
state={part.data.state}
componentName={part.componentName}
/>
</>
)}
{singleStateSection && (
<>
<H3 id={singleStateSection.id}>{singleStateSection.title}</H3>
<P>
<FrameworkCase frameworks={["react"]}>
State is accessible via the{" "}
<MarkdownCode>render</MarkdownCode>,{" "}
<MarkdownCode>className</MarkdownCode>, and{" "}
<MarkdownCode>style</MarkdownCode> props.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
State is reflected as data attributes for CSS styling.
</FrameworkCase>
</P>
<ApiStateTable state={apiReferenceModel.data.state} componentName={component} />
</>
)}
{partDataAttributesSection && (
<>
<H4 id={partDataAttributesSection.id}>
{partDataAttributesSection.title}
</H4>
<ApiDataAttrsTable
dataAttributes={part.data.dataAttributes}
componentName={part.componentName}
/>
</>
)}
{singleDataAttributesSection && (
<>
<H3 id={singleDataAttributesSection.id}>{singleDataAttributesSection.title}</H3>
<ApiDataAttrsTable dataAttributes={apiReferenceModel.data.dataAttributes} componentName={component} />
</>
)}
{partCssCustomPropertiesSection && (
<>
<H4 id={partCssCustomPropertiesSection.id}>
{partCssCustomPropertiesSection.title}
</H4>
<ApiCSSVarsTable
cssCustomProperties={part.data.cssCustomProperties}
componentName={part.componentName}
/>
</>
)}
</FrameworkCase>
);
})
) : (
<>
{singlePropsSection && (
<>
<H3 id={singlePropsSection.id}>{singlePropsSection.title}</H3>
<ApiPropsTable
props={apiReferenceModel.data.props}
componentName={component}
/>
</>
)}
{singleCssCustomPropertiesSection && (
<>
<H3 id={singleCssCustomPropertiesSection.id}>{singleCssCustomPropertiesSection.title}</H3>
<ApiCSSVarsTable cssCustomProperties={apiReferenceModel.data.cssCustomProperties} componentName={component} />
</>
)}
</>
)}
{singleStateSection && (
<>
<H3 id={singleStateSection.id}>{singleStateSection.title}</H3>
<P>
<FrameworkCase frameworks={["react"]}>
State is accessible via the <MarkdownCode>render</MarkdownCode>,{" "}
<MarkdownCode>className</MarkdownCode>, and{" "}
<MarkdownCode>style</MarkdownCode> props.
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
State is reflected as data attributes for CSS styling.
</FrameworkCase>
</P>
<ApiStateTable
state={apiReferenceModel.data.state}
componentName={component}
/>
</>
)}
{singleDataAttributesSection && (
<>
<H3 id={singleDataAttributesSection.id}>
{singleDataAttributesSection.title}
</H3>
<ApiDataAttrsTable
dataAttributes={apiReferenceModel.data.dataAttributes}
componentName={component}
/>
</>
)}
{singleCssCustomPropertiesSection && (
<>
<H3 id={singleCssCustomPropertiesSection.id}>
{singleCssCustomPropertiesSection.title}
</H3>
<ApiCSSVarsTable
cssCustomProperties={apiReferenceModel.data.cssCustomProperties}
componentName={component}
/>
</>
)}
</>
)
}
</ContentWidth>
site/src/components/docs/api-reference/DataAttrRow.astro
+14 -7
View File
@@ -16,11 +16,18 @@ const { name, type, detailedType, description, componentName } = Astro.props;
const id = `${componentName}-attr-${name}`;
---
<DetailRow id={id} name={name} type={type ?? ""} detailedType={detailedType} description={description} colspan={3}>
<Td class="align-top">
<MarkdownCode>{name}</MarkdownCode>
</Td>
<Td class="align-top">
{type ? <MarkdownCode>{type}</MarkdownCode> : null}
</Td>
<DetailRow
id={id}
name={name}
type={type ?? ""}
detailedType={detailedType}
description={description}
colspan={3}
>
<Td class="align-top">
<MarkdownCode>{name}</MarkdownCode>
</Td>
<Td class="align-top">
{type ? <MarkdownCode>{type}</MarkdownCode> : null}
</Td>
</DetailRow>
site/src/components/docs/api-reference/DetailRow.astro
+77 -79
View File
@@ -30,94 +30,92 @@ const hasDetail = Boolean(detailedType || description);
---
<Tr
id={id}
data-detail-row
class={clsx(
hasDetail &&
"group cursor-pointer intent:bg-light-60 dark:intent:bg-dark-110 data-expanded:border-transparent dark:data-expanded:border-transparent",
)}
id={id}
data-detail-row
class={clsx(
hasDetail &&
"group cursor-pointer data-expanded:border-transparent dark:data-expanded:border-transparent intent:bg-manila-75 dark:intent:bg-soot",
)}
>
<slot />
<Td class="align-top">
{
hasDetail && (<button
aria-expanded="false"
aria-controls={`${id}-detail`}
aria-label={`Details for ${name}`}
data-detail-toggle
>
<span
aria-hidden="true"
class="inline-block group-data-expanded:rotate-90"
>
▸
</span>
</button>)}
</Td>
<slot />
<Td class="align-top">
{
hasDetail && (
<button
aria-expanded="false"
aria-controls={`${id}-detail`}
aria-label={`Details for ${name}`}
data-detail-toggle
>
<span
aria-hidden="true"
class="inline-block group-data-expanded:rotate-90"
>
▸
</span>
</button>
)
}
</Td>
</Tr>
{
hasDetail && (
<Tr id={`${id}-detail`} hidden>
<Td colspan={String(colspan)} class="p-0">
<div class="px-6 py-4">
<dl class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-3">
{description && (
<>
<dt class="text-dark-40 dark:text-light-40">
Description
</dt>
<dd><InlineMarkdown content={description} /></dd>
</>
)}
hasDetail && (
<Tr id={`${id}-detail`} hidden>
<Td colspan={String(colspan)} class="p-0">
<div class="px-6 py-4">
<dl
class="grid grid-cols-(--cols) gap-x-6 gap-y-3"
style="--cols: auto 1fr"
>
{description && (
<>
<dt class="font-bold">Description</dt>
<dd>
<InlineMarkdown content={description} />
</dd>
</>
)}
{detailedType && (
<>
<dt class="text-dark-40 dark:text-light-40">
Type
</dt>
<dd>
<MarkdownCode>
{detailedType}
</MarkdownCode>
</dd>
</>
)}
</dl>
</div>
</Td>
</Tr>
)
{detailedType && (
<>
<dt class="font-bold">Type</dt>
<dd>
<MarkdownCode>{detailedType}</MarkdownCode>
</dd>
</>
)}
</dl>
</div>
</Td>
</Tr>
)
}
<script>
document
.querySelectorAll<HTMLButtonElement>("[data-detail-toggle]")
.forEach((button) => {
button.addEventListener("click", () => {
const expanded =
button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!expanded));
document
.querySelectorAll<HTMLButtonElement>("[data-detail-toggle]")
.forEach((button) => {
button.addEventListener("click", () => {
const expanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!expanded));
const row =
button.closest<HTMLTableRowElement>("[data-detail-row]");
if (row) row.toggleAttribute("data-expanded", !expanded);
const row = button.closest<HTMLTableRowElement>("[data-detail-row]");
if (row) row.toggleAttribute("data-expanded", !expanded);
const detail = document.getElementById(
button.getAttribute("aria-controls")!,
);
if (detail) detail.hidden = expanded;
});
});
const detail = document.getElementById(
button.getAttribute("aria-controls")!,
);
if (detail) detail.hidden = expanded;
});
});
document
.querySelectorAll<HTMLTableRowElement>("[data-detail-row]")
.forEach((row) => {
row.addEventListener("click", (e) => {
if ((e.target as Element).closest("a, button")) return;
row.querySelector<HTMLButtonElement>(
"[data-detail-toggle]",
)?.click();
});
});
document
.querySelectorAll<HTMLTableRowElement>("[data-detail-row]")
.forEach((row) => {
row.addEventListener("click", (e) => {
if ((e.target as Element).closest("a, button")) return;
row.querySelector<HTMLButtonElement>("[data-detail-toggle]")?.click();
});
});
</script>
site/src/components/docs/api-reference/PropRow.astro
+22 -15
View File
@@ -18,19 +18,26 @@ const { name, type, detailedType, description, defaultValue, required, component
const id = `${componentName}-${name}`;
---
<DetailRow id={id} name={name} type={type} detailedType={detailedType} description={description} colspan={4}>
<Td class="align-top">
<MarkdownCode>
{name}
{required && <span class="text-orange">*</span>}
</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>{type}</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>
{defaultValue ?? "—"}
</MarkdownCode>
</Td>
<DetailRow
id={id}
name={name}
type={type}
detailedType={detailedType}
description={description}
colspan={4}
>
<Td class="align-top">
<MarkdownCode>
{name}
{required && <span class="text-orange">*</span>}
</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>{type}</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>
{defaultValue ?? "—"}
</MarkdownCode>
</Td>
</DetailRow>
site/src/components/docs/api-reference/StateRow.astro
+14 -7
View File
@@ -16,11 +16,18 @@ const { name, type, detailedType, description, componentName } = Astro.props;
const id = `${componentName}-state-${name}`;
---
<DetailRow id={id} name={name} type={type} detailedType={detailedType} description={description} colspan={3}>
<Td class="align-top">
<MarkdownCode>{name}</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>{type}</MarkdownCode>
</Td>
<DetailRow
id={id}
name={name}
type={type}
detailedType={detailedType}
description={description}
colspan={3}
>
<Td class="align-top">
<MarkdownCode>{name}</MarkdownCode>
</Td>
<Td class="align-top">
<MarkdownCode>{type}</MarkdownCode>
</Td>
</DetailRow>
site/src/components/docs/api-reference/UtilParamsTable.astro
+23 -23
View File
@@ -20,27 +20,27 @@ const { params, utilName } = Astro.props;
---
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Parameter</Th>
<Th>Type</Th>
<Th>Default</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
Object.entries(params).map(([name, param]) => (
<PropRow
name={name}
type={param.type}
detailedType={param.detailedType}
description={param.description}
defaultValue={param.default}
required={param.required}
componentName={utilName}
/>
))
}
</Tbody>
<Thead>
<Tr>
<Th>Parameter</Th>
<Th>Type</Th>
<Th>Default</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
Object.entries(params).map(([name, param]) => (
<PropRow
name={name}
type={param.type}
detailedType={param.detailedType}
description={param.description}
defaultValue={param.default}
required={param.required}
componentName={utilName}
/>
))
}
</Tbody>
</Table>
site/src/components/docs/api-reference/UtilReference.astro
+64 -42
View File
@@ -30,51 +30,73 @@ if (!model) return;
<ContentWidth>
<H2 id={model.heading.id}>{model.heading.text}</H2>
{model.isMultiOverload ? (
model.overloads.map((overload) => {
const paramsSection = overload.sections.find((s) => s.key === 'parameters');
const returnSection = overload.sections.find((s) => s.key === 'returnValue');
const hasParams = Object.keys(overload.data.parameters).length > 0;
{
model.isMultiOverload ? (
model.overloads.map((overload) => {
const paramsSection = overload.sections.find(
(s) => s.key === "parameters",
);
const returnSection = overload.sections.find(
(s) => s.key === "returnValue",
);
const hasParams = Object.keys(overload.data.parameters).length > 0;
return (
<>
<H3 id={overload.id}>{overload.label ?? `Overload ${overload.index}`}</H3>
return (
<>
<H3 id={overload.id}>
{overload.label ?? `Overload ${overload.index}`}
</H3>
{overload.description && (
<P><InlineMarkdown content={overload.description} /></P>
)}
{overload.description && (
<P>
<InlineMarkdown content={overload.description} />
</P>
)}
{paramsSection && hasParams && (
<>
<H4 id={paramsSection.id}>{paramsSection.title}</H4>
<UtilParamsTable params={overload.data.parameters} utilName={`${util}-${overload.id}`} />
</>
)}
{paramsSection && hasParams && (
<>
<H4 id={paramsSection.id}>{paramsSection.title}</H4>
<UtilParamsTable
params={overload.data.parameters}
utilName={`${util}-${overload.id}`}
/>
</>
)}
{returnSection && (
<>
<H4 id={returnSection.id}>{returnSection.title}</H4>
<UtilReturnTable returnValue={overload.data.returnValue} utilName={`${util}-${overload.id}`} />
</>
)}
</>
);
})
) : (
<>
{model.sections.find((s) => s.key === 'parameters') && (
<>
<H3 id="parameters">Parameters</H3>
<UtilParamsTable params={model.overload.parameters} utilName={util} />
</>
)}
{returnSection && (
<>
<H4 id={returnSection.id}>{returnSection.title}</H4>
<UtilReturnTable
returnValue={overload.data.returnValue}
utilName={`${util}-${overload.id}`}
/>
</>
)}
</>
);
})
) : (
<>
{model.sections.find((s) => s.key === "parameters") && (
<>
<H3 id="parameters">Parameters</H3>
<UtilParamsTable
params={model.overload.parameters}
utilName={util}
/>
</>
)}
{model.sections.find((s) => s.key === 'returnValue') && (
<>
<H3 id="return-value">Return Value</H3>
<UtilReturnTable returnValue={model.overload.returnValue} utilName={util} />
</>
)}
</>
)}
{model.sections.find((s) => s.key === "returnValue") && (
<>
<H3 id="return-value">Return Value</H3>
<UtilReturnTable
returnValue={model.overload.returnValue}
utilName={util}
/>
</>
)}
</>
)
}
</ContentWidth>
site/src/components/docs/api-reference/UtilReturnTable.astro
+51 -49
View File
@@ -31,58 +31,60 @@ const hasFields = returnValue.fields && Object.keys(returnValue.fields).length >
const hasDetail = !hasFields && Boolean(returnValue.detailedType || returnValue.description);
---
{hasFields ? (
{
hasFields ? (
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Property</Th>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{
Object.entries(returnValue.fields!).map(([name, field]) => (
<StateRow
name={name}
type={field.type}
detailedType={field.detailedType}
description={field.description}
componentName={`${utilName}-return`}
/>
))
}
</Tbody>
<Thead>
<Tr>
<Th>Property</Th>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
{Object.entries(returnValue.fields!).map(([name, field]) => (
<StateRow
name={name}
type={field.type}
detailedType={field.detailedType}
description={field.description}
componentName={`${utilName}-return`}
/>
))}
</Tbody>
</Table>
) : hasDetail ? (
) : hasDetail ? (
<Table maxWidth={false} outerClass="my-6">
<Thead>
<Tr>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
<DetailRow
id={`${utilName}-return-type`}
name="return type"
type={returnValue.type}
detailedType={returnValue.detailedType}
description={returnValue.description}
colspan={2}
>
<Td><MarkdownCode>{returnValue.type}</MarkdownCode></Td>
</DetailRow>
</Tbody>
<Thead>
<Tr>
<Th>Type</Th>
<Th />
</Tr>
</Thead>
<Tbody>
<DetailRow
id={`${utilName}-return-type`}
name="return type"
type={returnValue.type}
detailedType={returnValue.detailedType}
description={returnValue.description}
colspan={2}
>
<Td>
<MarkdownCode>{returnValue.type}</MarkdownCode>
</Td>
</DetailRow>
</Tbody>
</Table>
) : (
) : (
<P>
<MarkdownCode>{returnValue.type}</MarkdownCode>
{returnValue.description && (
<>
{" — "}
<InlineMarkdown content={returnValue.description} />
</>
)}
<MarkdownCode>{returnValue.type}</MarkdownCode>
{returnValue.description && (
<>
{" — "}
<InlineMarkdown content={returnValue.description} />
</>
)}
</P>
)}
)
}