@openpkg-ts/react 0.2.0

package/dist/styled.d.ts

@@ -0,0 +1,504 @@
+import { SpecMember } from "@openpkg-ts/spec";
+interface CollapsibleMethodProps {
+	/** Method member to display */
+	member: SpecMember;
+	/** Default expanded state */
+	defaultExpanded?: boolean;
+	/** Custom className */
+	className?: string;
+	/** Custom header renderer */
+	renderHeader?: (member: SpecMember, expanded: boolean, toggle: () => void) => React.ReactNode;
+	/** Custom content renderer */
+	renderContent?: (member: SpecMember) => React.ReactNode;
+}
+/**
+* Headless collapsible method component.
+*
+* @example
+* ```tsx
+* <CollapsibleMethod member={method} defaultExpanded />
+*
+* // Custom rendering
+* <CollapsibleMethod
+*   member={method}
+*   renderHeader={(m, expanded, toggle) => (
+*     <button onClick={toggle}>{m.name}</button>
+*   )}
+* />
+* ```
+*/
+declare function CollapsibleMethod({ member, defaultExpanded, className, renderHeader, renderContent }: CollapsibleMethodProps): React.ReactNode;
+import { SpecExample } from "@openpkg-ts/spec";
+interface ExampleBlockProps {
+	/** Examples to display (string or SpecExample) */
+	examples: (string | SpecExample)[];
+	/** Custom className */
+	className?: string;
+	/** Custom example renderer */
+	renderExample?: (example: string | SpecExample, index: number) => React.ReactNode;
+}
+/**
+* Normalize example to string content.
+*/
+declare function getExampleCode(example: string | SpecExample): string;
+/**
+* Get example title if available.
+*/
+declare function getExampleTitle(example: string | SpecExample): string | undefined;
+/**
+* Get example language.
+*/
+declare function getExampleLanguage(example: string | SpecExample): string;
+/**
+* Clean code by removing markdown fences.
+*/
+declare function cleanCode(code: string): string;
+/**
+* Headless example block component.
+*
+* @example
+* ```tsx
+* <ExampleBlock examples={exp.examples} />
+*
+* // Custom rendering
+* <ExampleBlock
+*   examples={exp.examples}
+*   renderExample={(ex) => <CustomCode code={getExampleCode(ex)} />}
+* />
+* ```
+*/
+declare function ExampleBlock({ examples, className, renderExample }: ExampleBlockProps): React.ReactNode;
+import { SpecSchema, SpecSignatureParameter } from "@openpkg-ts/spec";
+interface ExpandablePropertyProps {
+	/** Parameter to display */
+	param: SpecSignatureParameter;
+	/** Nesting depth */
+	depth?: number;
+	/** Custom className */
+	className?: string;
+}
+interface NestedPropertyProps {
+	/** Property name */
+	name: string;
+	/** Property schema */
+	schema: SpecSchema;
+	/** Is required */
+	required?: boolean;
+	/** Nesting depth */
+	depth?: number;
+}
+/**
+* Nested property display.
+*/
+declare function NestedProperty({ name, schema, required, depth }: NestedPropertyProps): React.ReactNode;
+/**
+* Headless expandable property for parameters with nested objects.
+*
+* @example
+* ```tsx
+* <ExpandableProperty param={param} />
+* ```
+*/
+declare function ExpandableProperty({ param, depth, className }: ExpandablePropertyProps): React.ReactNode;
+import { SpecMember as SpecMember2 } from "@openpkg-ts/spec";
+interface MembersTableProps {
+	/** Members to display */
+	members: SpecMember2[];
+	/** Custom className */
+	className?: string;
+	/** Group by kind (constructor, property, method) */
+	groupByKind?: boolean;
+	/** Custom member renderer */
+	renderMember?: (member: SpecMember2, index: number) => React.ReactNode;
+}
+interface MemberGroups {
+	constructors: SpecMember2[];
+	properties: SpecMember2[];
+	methods: SpecMember2[];
+	accessors: SpecMember2[];
+	other: SpecMember2[];
+}
+/**
+* Group members by their kind.
+*/
+declare function groupMembersByKind(members: SpecMember2[]): MemberGroups;
+interface MemberRowProps {
+	member: SpecMember2;
+}
+/**
+* Individual member row.
+*/
+declare function MemberRow({ member }: MemberRowProps): React.ReactNode;
+/**
+* Headless members table for classes/interfaces.
+*
+* @example
+* ```tsx
+* <MembersTable members={exp.members} groupByKind />
+* ```
+*/
+declare function MembersTable({ members, className, groupByKind, renderMember }: MembersTableProps): React.ReactNode;
+import { SpecMember as SpecMember3, SpecSignatureParameter as SpecSignatureParameter2 } from "@openpkg-ts/spec";
+interface ParamTableProps {
+	/** Parameters or members to display */
+	items: (SpecSignatureParameter2 | SpecMember3)[];
+	/** Show required indicator */
+	showRequired?: boolean;
+	/** Custom className */
+	className?: string;
+	/** Render custom row */
+	renderRow?: (item: SpecSignatureParameter2 | SpecMember3, index: number) => React.ReactNode;
+}
+interface ParamRowProps {
+	item: SpecSignatureParameter2 | SpecMember3;
+	showRequired?: boolean;
+}
+/**
+* Individual parameter row component.
+*/
+declare function ParamRow({ item, showRequired }: ParamRowProps): React.ReactNode;
+/**
+* Headless parameter table component.
+*
+* @example
+* ```tsx
+* <ParamTable items={sig.parameters} />
+*
+* // Custom row rendering
+* <ParamTable
+*   items={sig.parameters}
+*   renderRow={(item) => <CustomRow key={item.name} param={item} />}
+* />
+* ```
+*/
+declare function ParamTable({ items, showRequired, className, renderRow }: ParamTableProps): React.ReactNode;
+import { SpecExport } from "@openpkg-ts/spec";
+interface SignatureProps {
+	/** The to render signature for */
+	export: SpecExport;
+	/** Index of signature to render (for overloaded functions) */
+	signatureIndex?: number;
+	/** Custom className */
+	className?: string;
+	/** Render prop for custom rendering */
+	children?: (signature: string) => React.ReactNode;
+}
+/**
+* Headless signature component. Renders a type signature string.
+*
+* @example
+* ```tsx
+* // Default rendering
+* <Signature export={fn} />
+*
+* // Custom rendering
+* <Signature export={fn}>
+*   {(sig) => <pre>{sig}</pre>}
+* </Signature>
+* ```
+*/
+declare function Signature({ export: exp, signatureIndex, className, children }: SignatureProps): React.ReactNode;
+import { SpecMember as SpecMember4, SpecSignatureParameter as SpecSignatureParameter3 } from "@openpkg-ts/spec";
+interface TypeTableProps {
+	/** Members or parameters to display */
+	items: (SpecSignatureParameter3 | SpecMember4)[];
+	/** Show required indicator */
+	showRequired?: boolean;
+	/** Custom className */
+	className?: string;
+	/** Render custom row */
+	renderRow?: (item: SpecSignatureParameter3 | SpecMember4, index: number) => React.ReactNode;
+}
+/**
+* Headless type table for displaying interface/type members.
+*
+* @example
+* ```tsx
+* <TypeTable items={exp.members} />
+* ```
+*/
+declare function TypeTable({ items, showRequired, className, renderRow }: TypeTableProps): React.ReactNode;
+import { CodeTab, CodeTabs, CodeTabsProps, ImportSection, ImportSectionProps } from "@openpkg-ts/ui/api";
+import { OpenPkg } from "@openpkg-ts/spec";
+import { DocsInstance } from "@openpkg-ts/sdk";
+interface APIPageProps {
+	/** Direct spec object */
+	spec?: OpenPkg;
+	/** Or docs instance from createDocs() */
+	instance?: DocsInstance;
+	/** Export ID to render, or undefined for index page */
+	id?: string;
+	/** Base href for index page links (required when id is undefined) */
+	baseHref?: string;
+	/** Description for index page */
+	description?: string;
+	/** Custom code example renderer */
+	renderExample?: (code: string, filename: string) => React.ReactNode;
+}
+/**
+* Main styled API page component that renders documentation.
+*
+* Renders either:
+* - Index page (when id is undefined) showing all exports in a grid
+* - Detail page (when id is provided) showing specific docs
+*
+* @example
+* ```tsx
+* // Index mode - show all exports
+* <APIPage spec={spec} baseHref="/docs/api" />
+* ```
+*
+* @example
+* ```tsx
+* // Detail mode - show specific * <APIPage spec={spec} id="createClient" />
+* ```
+*/
+declare function APIPage({ spec, instance, id, baseHref, description, renderExample }: APIPageProps): React.ReactNode;
+import { OpenPkg as OpenPkg2, SpecExport as SpecExport2 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode2 } from "react";
+interface ClassPageProps {
+	export: SpecExport2;
+	spec: OpenPkg2;
+}
+/**
+* Stripe-style class page with two-column layout.
+* Left: constructor, methods, properties. Right: sticky code examples.
+*/
+declare function ClassPage({ export: exp, spec }: ClassPageProps): ReactNode2;
+import { OpenPkg as OpenPkg3, SpecExport as SpecExport3 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode3 } from "react";
+interface EnumPageProps {
+	export: SpecExport3;
+	spec: OpenPkg3;
+}
+/**
+* Stripe-style enum page with two-column layout.
+*/
+declare function EnumPage({ export: exp, spec }: EnumPageProps): ReactNode3;
+interface ExportCardProps {
+	/** Function/name */
+	name: string;
+	/** Description snippet */
+	description?: string;
+	/** Link to detail page */
+	href: string;
+	/** Export kind: function, type, variable, class, interface, enum */
+	kind?: "function" | "type" | "variable" | "class" | "interface" | "enum";
+	/** Custom className */
+	className?: string;
+}
+/**
+* Card component for displaying exports in an index grid.
+* Features function name styling, description, and hover effects.
+*/
+declare function ExportCard({ name, description, href, kind, className }: ExportCardProps): React.ReactNode;
+import { OpenPkg as OpenPkg4 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode4 } from "react";
+interface ExportIndexPageProps {
+	/** OpenPkg spec */
+	spec: OpenPkg4;
+	/** Base href for links (e.g., '/docs/api') */
+	baseHref: string;
+	/** Optional intro description */
+	description?: string;
+	/** Custom className */
+	className?: string;
+	/** Show search input (default: true) */
+	showSearch?: boolean;
+	/** Show category filter buttons (default: true) */
+	showFilters?: boolean;
+}
+/**
+* Index page showing all exports in a grid, grouped by category.
+* AI SDK-style clean layout with responsive 2-column grid.
+*/
+declare function ExportIndexPage({ spec, baseHref, description, className, showSearch, showFilters }: ExportIndexPageProps): ReactNode4;
+import { OpenPkg as OpenPkg5, SpecExportKind } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode5 } from "react";
+interface FullAPIReferencePageProps {
+	/** OpenPkg spec */
+	spec: OpenPkg5;
+	/** Filter to specific kinds (default: all) */
+	kinds?: SpecExportKind[];
+	/** Show kind filter buttons (default: true) */
+	showFilters?: boolean;
+	/** Show in-page TOC navigation (default: false) */
+	showTOC?: boolean;
+	/** Custom title (default: spec.meta.name) */
+	title?: string;
+	/** Custom description */
+	description?: ReactNode5;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Single-page API reference that renders all exports in a scrollable view.
+* Similar to Stripe's API documentation layout.
+*
+* @example
+* ```tsx
+* // Show all exports with TOC
+* <FullAPIReferencePage spec={spec} showTOC />
+* ```
+*
+* @example
+* ```tsx
+* // Show only functions
+* <FullAPIReferencePage spec={spec} kinds={['function']} title="Functions" />
+* ```
+*/
+declare function FullAPIReferencePage({ spec, kinds, showFilters, showTOC, title, description, className }: FullAPIReferencePageProps): ReactNode5;
+import { OpenPkg as OpenPkg6, SpecExport as SpecExport4 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode6 } from "react";
+interface FunctionPageProps {
+	export: SpecExport4;
+	spec: OpenPkg6;
+}
+/**
+* Stripe-style function page with two-column layout.
+* Left: parameters, returns. Right: sticky code examples.
+*/
+declare function FunctionPage({ export: exp, spec }: FunctionPageProps): ReactNode6;
+import { OpenPkg as OpenPkg7, SpecExport as SpecExport5 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode7 } from "react";
+interface InterfacePageProps {
+	export: SpecExport5;
+	spec: OpenPkg7;
+}
+/**
+* Stripe-style interface/type page with two-column layout.
+* Left: properties, methods. Right: sticky code examples.
+*/
+declare function InterfacePage({ export: exp, spec }: InterfacePageProps): ReactNode7;
+import { SpecSchema as SpecSchema2, SpecSignatureParameter as SpecSignatureParameter4 } from "@openpkg-ts/spec";
+interface ParameterItemProps {
+	/** Parameter to display */
+	param: SpecSignatureParameter4;
+	/** Nesting depth for indentation */
+	depth?: number;
+	/** Custom className */
+	className?: string;
+}
+interface NestedPropertyItemProps {
+	/** Property name */
+	name: string;
+	/** Property schema */
+	schema: SpecSchema2;
+	/** Is this property required */
+	required?: boolean;
+	/** Nesting depth */
+	depth?: number;
+}
+/**
+* Single parameter with expand capability for nested objects.
+* Features expandable nested params, type annotations, and required/optional badges.
+*
+* @deprecated Use APIParameterItem from @openpkg-ts/ui with specParamToAPIParam adapter.
+* Will be removed in next major version.
+*/
+declare function ParameterItem({ param, depth, className }: ParameterItemProps): React.ReactNode;
+import { OpenPkg as OpenPkg8, SpecExport as SpecExport6 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode8 } from "react";
+interface ClassSectionProps {
+	export: SpecExport6;
+	spec: OpenPkg8;
+}
+/**
+* Class section for use in single-page API reference.
+* Renders an APISection with constructor, methods, and properties.
+*/
+declare function ClassSection({ export: exp, spec }: ClassSectionProps): ReactNode8;
+import { OpenPkg as OpenPkg9, SpecExport as SpecExport7 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode9 } from "react";
+interface EnumSectionProps {
+	export: SpecExport7;
+	spec: OpenPkg9;
+}
+/**
+* Enum section for use in single-page API reference.
+* Renders an APISection with enum members.
+*/
+declare function EnumSection({ export: exp, spec }: EnumSectionProps): ReactNode9;
+import { OpenPkg as OpenPkg10, SpecExport as SpecExport8 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode10 } from "react";
+interface ExportSectionProps {
+	export: SpecExport8;
+	spec: OpenPkg10;
+}
+/**
+* Router component that renders the appropriate section based on kind.
+* Used by FullAPIReferencePage to render each inline.
+*/
+declare function ExportSection({ export: exp, spec }: ExportSectionProps): ReactNode10;
+import { OpenPkg as OpenPkg11, SpecExport as SpecExport9 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode11 } from "react";
+interface FunctionSectionProps {
+	export: SpecExport9;
+	spec: OpenPkg11;
+}
+/**
+* Function section for use in single-page API reference.
+* Renders an APISection with parameters and returns.
+*/
+declare function FunctionSection({ export: exp, spec }: FunctionSectionProps): ReactNode11;
+import { OpenPkg as OpenPkg12, SpecExport as SpecExport10 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode12 } from "react";
+interface InterfaceSectionProps {
+	export: SpecExport10;
+	spec: OpenPkg12;
+}
+/**
+* Interface/type section for use in single-page API reference.
+* Renders an APISection with properties and methods.
+*/
+declare function InterfaceSection({ export: exp, spec }: InterfaceSectionProps): ReactNode12;
+import { OpenPkg as OpenPkg13, SpecExport as SpecExport11 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode13 } from "react";
+interface VariableSectionProps {
+	export: SpecExport11;
+	spec: OpenPkg13;
+}
+/**
+* Variable/constant section for use in single-page API reference.
+* Renders an APISection with type information.
+*/
+declare function VariableSection({ export: exp, spec }: VariableSectionProps): ReactNode13;
+import { OpenPkg as OpenPkg14, SpecExport as SpecExport12 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode14 } from "react";
+interface VariablePageProps {
+	export: SpecExport12;
+	spec: OpenPkg14;
+}
+/**
+* Stripe-style variable/constant page with two-column layout.
+*/
+declare function VariablePage({ export: exp, spec }: VariablePageProps): ReactNode14;
+import { OpenPkg as OpenPkg15, SpecExample as SpecExample2, SpecExport as SpecExport13, SpecSchema as SpecSchema3, SpecSignatureParameter as SpecSignatureParameter5 } from "@openpkg-ts/spec";
+import { APIParameterSchema, CodeExample, Language } from "@openpkg-ts/ui/docskit";
+/**
+* Convert SpecSchema to APIParameterSchema for nested object display.
+*/
+declare function specSchemaToAPISchema(schema: SpecSchema3 | undefined): APIParameterSchema | undefined;
+/**
+* Convert a SpecSignatureParameter to APIParameterItem props.
+*/
+declare function specParamToAPIParam(param: SpecSignatureParameter5): {
+	name: string;
+	type: string;
+	required: boolean;
+	description?: string;
+	children?: APIParameterSchema;
+};
+/**
+* Convert SpecExample[] to CodeExample[] for APICodePanel.
+*/
+declare function specExamplesToCodeExamples(examples: SpecExample2[] | undefined, defaultLang?: string): CodeExample[];
+/**
+* Extract unique languages from examples for language selector.
+*/
+declare function getLanguagesFromExamples(examples: SpecExample2[] | undefined): Language[];
+/**
+* Build import statement for an export.
+*/
+declare function buildImportStatement(exp: SpecExport13, spec: OpenPkg15): string;
+export { specSchemaToAPISchema, specParamToAPIParam, specExamplesToCodeExamples, groupMembersByKind, getLanguagesFromExamples, getExampleTitle, getExampleLanguage, getExampleCode, cleanCode, buildImportStatement, VariableSectionProps, VariableSection, VariablePageProps, VariablePage, TypeTableProps, TypeTable, SignatureProps, Signature, ParameterItemProps, ParameterItem, ParamTableProps, ParamTable, ParamRowProps, ParamRow, NestedPropertyProps, NestedPropertyItemProps, NestedProperty, MembersTableProps, MembersTable, MemberRowProps, MemberRow, MemberGroups, InterfaceSectionProps, InterfaceSection, InterfacePageProps, InterfacePage, ImportSectionProps, ImportSection, FunctionSectionProps, FunctionSection, FunctionPageProps, FunctionPage, FullAPIReferencePageProps, FullAPIReferencePage, ExportSectionProps, ExportSection, ExportIndexPageProps, ExportIndexPage, ExportCardProps, ExportCard, ExpandablePropertyProps, ExpandableProperty, ExampleBlockProps, ExampleBlock, EnumSectionProps, EnumSection, EnumPageProps, EnumPage, CollapsibleMethodProps, CollapsibleMethod, CodeTabsProps, CodeTabs, CodeTab, ClassSectionProps, ClassSection, ClassPageProps, ClassPage, APIPageProps, APIPage };