Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import { Box } from '@luke-ui/react/box';import { Cluster } from '@luke-ui/react/cluster';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import { cx } from '@luke-ui/react/utils';import type { TypeNode } from 'fumadocs-ui/components/type-table';import { TypeTable } from 'fumadocs-ui/components/type-table';import { Collapsible, CollapsibleContent, CollapsibleTrigger,} from 'fumadocs-ui/components/ui/collapsible';import type { ComponentProps } from 'react';import { groupPropNames, NATIVE_PROPS_FORWARDING_KEY } from '../lib/component-prop-groups.js';
/** Grouped prop tables for a component guide's `## API` section. */export function ComponentPropsTable({ className, id, type, ...props}: { id: string; type: Record<string, TypeNode>;} & ComponentProps<'div'>) { const groups = groupPropNames(Object.keys(type)); const nativePropsNote = type[NATIVE_PROPS_FORWARDING_KEY]?.description;
return ( <Stack className={cx('not-prose', className)} gap="sp12" id={id} marginBlock="sp24" {...props}> {nativePropsNote !== undefined ? ( <Text color="secondary" elementType="p" typography="caption"> {nativePropsNote} </Text> ) : null} {groups.map((group) => ( <PropGroup group={group} key={group.name} type={pickGroupProps(type, new Set(group.props))} /> ))} </Stack> );}
function PropGroup({ group, type,}: { group: { defaultOpen: boolean; name: string; props: ReadonlyArray<string> }; type: Record<string, TypeNode>;}) { return ( <Box backgroundColor="surface.base" borderColor="decorative" borderRadius="surface" borderStyle="solid" borderWidth="thin" renderRoot={(domProps) => <Collapsible {...domProps} defaultOpen={group.defaultOpen} />} > <Cluster className="group text-start" flexWrap="nowrap" inlineSize="100%" justifyContent="space-between" paddingBlock="sp12" paddingInline="sp16" renderRoot={(domProps) => <CollapsibleTrigger {...domProps} />} > <Text elementType="span" fontWeight="emphasis" typography="caption"> {group.name} </Text> <ChevronIcon /> </Cluster> <Box className="border-fd-border border-t" paddingBlockEnd="sp4" paddingInline="sp4" renderRoot={(domProps) => <CollapsibleContent {...domProps} />} > <TypeTable type={type} /> </Box> </Box> );}
function ChevronIcon() { return ( <svg aria-hidden className="size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" > <path d="m6 9 6 6 6-6" /> </svg> );}
function pickGroupProps( type: Record<string, TypeNode>, names: ReadonlySet<string>,): Record<string, TypeNode> { return Object.fromEntries(Object.entries(type).filter(([name]) => names.has(name)));}