@openpkg-ts/ui 0.4.0 → 0.5.1

package/dist/docskit/index.d.ts

@@ -43,9 +43,27 @@ interface APICodePanelProps {
 }
 /**
 * Right-side sticky code panel for API documentation.
-* Features language dropdown, copy button, and dark bg with syntax highlighting.
+* Features language dropdown and syntax highlighting via docskit.
 */
 declare function APICodePanel({ languages, examples, externalLink, title, className }: APICodePanelProps): React3.ReactNode;
+import { ReactNode as ReactNode2 } from "react";
+interface APIReferenceLayoutProps {
+	/** Left column content (documentation) */
+	children: ReactNode2;
+	/** Right column content (code examples) */
+	examples: ReactNode2;
+	/** Custom className */
+	className?: string;
+	/** Left column width on desktop (default: 58%) */
+	leftWidth?: string;
+	/** Right column width on desktop (default: 42%) */
+	rightWidth?: string;
+}
+/**
+* Two-column layout for API reference with sticky right panel.
+* Responsive: stacks vertically on mobile, two-column on desktop.
+*/
+declare function APIReferenceLayout({ children, examples, className, leftWidth, rightWidth }: APIReferenceLayoutProps): ReactNode2;
 import * as React4 from "react";
 interface APIReferencePageProps {
 	/** Page title */
@@ -88,6 +106,42 @@ interface APISectionProps {
 * Docs/params on left, sticky code panel on right.
 */
 declare function APISection({ title, id, description, children, languages, examples, externalLink, codePanelTitle, className }: APISectionProps): React5.ReactNode;
+import { ReactNode as ReactNode3 } from "react";
+interface CodeBlockProps {
+	/** Code content */
+	code: string;
+	/** Language for syntax highlighting */
+	language?: string;
+	/** Show line numbers */
+	showLineNumbers?: boolean;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Syntax-highlighted code block powered by CodeHike.
+* Thin wrapper around docskit's ClientDocsKitCode with a simple interface.
+*/
+declare function CodeBlock({ code, language, showLineNumbers, className }: CodeBlockProps): ReactNode3;
+import { ReactNode as ReactNode4 } from "react";
+interface CollapsiblePanelProps {
+	/** Panel title (e.g., "Response", "Data source") */
+	title: string;
+	/** Panel content */
+	children: ReactNode4;
+	/** Default expanded state */
+	defaultExpanded?: boolean;
+	/** Controlled expanded state */
+	expanded?: boolean;
+	/** Controlled onChange */
+	onExpandedChange?: (expanded: boolean) => void;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Accordion-style collapsible panel for code examples.
+* Uses CSS grid-rows transition for smooth open/close.
+*/
+declare function CollapsiblePanel({ title, children, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className }: CollapsiblePanelProps): ReactNode4;
 import * as React6 from "react";
 type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 type EndpointBadgeSize = "sm" | "md";
@@ -107,7 +161,154 @@ interface EndpointHeaderProps extends React7.HTMLAttributes<HTMLDivElement> {
 	copyable?: boolean;
 }
 declare const EndpointHeader: React7.ForwardRefExoticComponent<EndpointHeaderProps & React7.RefAttributes<HTMLDivElement>>;
-import * as React8 from "react";
+import { ReactNode as ReactNode5 } from "react";
+interface EnumValue {
+	/** Enum value */
+	value: string;
+	/** Optional description */
+	description?: string;
+}
+interface EnumValuesSectionProps {
+	/** Enum values to display */
+	values: EnumValue[];
+	/** Section header (default: "Possible values") */
+	header?: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Enum values section showing possible values with optional descriptions.
+* Used inside parameter items to show enum options.
+*/
+declare function EnumValuesSection({ values, header, className }: EnumValuesSectionProps): ReactNode5;
+import { ReactNode as ReactNode6 } from "react";
+interface ExampleChip {
+	/** Unique identifier */
+	id: string;
+	/** Display label */
+	label: string;
+}
+interface ExampleChipsProps {
+	/** Available examples */
+	examples: ExampleChip[];
+	/** Currently active example ID */
+	activeId: string;
+	/** Selection callback */
+	onSelect: (id: string) => void;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Tab-like chips for switching between code examples.
+* Used in the right column to select different example variations.
+*/
+declare function ExampleChips({ examples, activeId, onSelect, className }: ExampleChipsProps): ReactNode6;
+import { ReactNode as ReactNode7 } from "react";
+interface CodeExample2 {
+	/** Unique identifier */
+	id: string;
+	/** Display label for chip */
+	label: string;
+	/** Code content */
+	code: string;
+	/** Language for highlighting */
+	language?: string;
+}
+interface ExampleSectionProps {
+	/** Section ID for sync scroll */
+	id: string;
+	/** Code examples to display */
+	examples: CodeExample2[];
+	/** Data source code (SQL/schema) */
+	dataSource?: string;
+	/** Response JSON */
+	response?: string;
+	/** Notes text */
+	notes?: ReactNode7;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Complete right-column section combining chips, code, and collapsible panels.
+* Integrates with SyncScrollProvider for synchronized scrolling.
+*/
+declare function ExampleSection({ id, examples, dataSource, response, notes, className }: ExampleSectionProps): ReactNode7;
+import { SpecSignatureParameter } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode8 } from "react";
+interface ExpandableParameterProps {
+	/** Parameter from spec */
+	parameter: SpecSignatureParameter;
+	/** Parent path prefix */
+	parentPath?: string;
+	/** Default expanded state */
+	defaultExpanded?: boolean;
+	/** Controlled expanded state */
+	expanded?: boolean;
+	/** Controlled onChange */
+	onExpandedChange?: (expanded: boolean) => void;
+	/** Nesting depth */
+	level?: number;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Compound component combining APIParameterItem + NestedParameterToggle + NestedParameterContainer.
+* Automatically extracts nested object properties and enum values from spec schema.
+*/
+declare function ExpandableParameter({ parameter, parentPath, defaultExpanded, expanded: controlledExpanded, onExpandedChange, level, className }: ExpandableParameterProps): ReactNode8;
+import { ReactNode as ReactNode9 } from "react";
+interface MethodSectionProps {
+	/** Section ID for scroll sync */
+	id: string;
+	/** Method title (e.g., "Fetch data") */
+	title: string;
+	/** Method signature (e.g., "select(columns?, options?)") */
+	signature?: string;
+	/** Method description */
+	description?: ReactNode9;
+	/** Bullet list notes */
+	notes?: string[];
+	/** Parameter content */
+	children?: ReactNode9;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Container for a single API method in the documentation.
+* Renders title, signature, description, notes list, and parameters.
+*/
+declare function MethodSection({ id, title, signature, description, notes, children, className }: MethodSectionProps): ReactNode9;
+import { ReactNode as ReactNode10 } from "react";
+interface NestedParameterContainerProps {
+	/** Nested parameter content */
+	children: ReactNode10;
+	/** Nesting depth level (0 = first level) */
+	level?: number;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Bordered container for nested child parameters (Scalar/Clerk-style).
+* Connects to NestedParameterToggle above — shares the same border,
+* so this has no top border and only bottom-rounded corners.
+*/
+declare function NestedParameterContainer({ children, level, className }: NestedParameterContainerProps): ReactNode10;
+import { ReactNode as ReactNode11 } from "react";
+interface NestedParameterToggleProps {
+	/** Toggle state */
+	expanded: boolean;
+	/** Toggle callback */
+	onToggle: () => void;
+	/** Custom className */
+	className?: string;
+}
+/**
+* "Show/Hide Child Attributes" toggle button (Scalar/Clerk-style).
+* When collapsed: standalone rounded pill.
+* When expanded: top of a unified bordered container (rounded-t, no bottom border).
+*/
+declare function NestedParameterToggle({ expanded, onToggle, className }: NestedParameterToggleProps): ReactNode11;
+import { ReactNode as ReactNode12 } from "react";
 interface APIParameterSchema {
 	/** Type name */
 	type?: string;
@@ -123,40 +324,48 @@ interface APIParameterSchema {
 interface APIParameterItemProps {
 	/** Parameter name */
 	name: string;
-	/** Type string (e.g., "string", "object") */
+	/** Parent path prefix (e.g., "options." for nested) */
+	parentPath?: string;
+	/** Parameter type */
 	type: string;
-	/** Is required */
+	/** Required parameter */
 	required?: boolean;
+	/** Optional parameter (explicit) */
+	optional?: boolean;
+	/** Has expandable children */
+	expandable?: boolean;
 	/** Description */
-	description?: string;
-	/** Nested children (for expandable objects) */
-	children?: APIParameterSchema;
-	/** Nesting depth */
-	depth?: number;
+	description?: ReactNode12;
+	/** Nested content (params or enum) */
+	children?: ReactNode12;
+	/** Anchor ID for deep linking */
+	anchorId?: string;
+	/** Show anchor link on hover */
+	showAnchor?: boolean;
 	/** Custom className */
 	className?: string;
 }
 /**
-* Single parameter row with name, type, required badge, description, and expandable children.
-* Stripe-style API reference parameter display.
+* Single parameter row (Scalar/Clerk-style).
+* Displays name, type, required badge (orange text), description, and optional nested content.
 */
-declare function APIParameterItem({ name, type, required, description, children, depth, className }: APIParameterItemProps): React8.ReactNode;
-import * as React9 from "react";
+declare function APIParameterItem({ name, parentPath, type, required, optional, description, children, anchorId, className }: APIParameterItemProps): ReactNode12;
+import * as React8 from "react";
 interface ParameterListProps {
 	/** Title above the list (e.g., "Body parameters") */
 	title?: string;
 	/** Number of items to show before collapsing */
 	collapseAfter?: number;
 	/** Child parameter items */
-	children: React9.ReactNode;
+	children: React8.ReactNode;
 	/** Custom className */
 	className?: string;
 }
 /**
 * Container for parameter items with optional "More parameters" collapse.
 */
-declare function ParameterList({ title, collapseAfter, children, className }: ParameterListProps): React9.ReactNode;
-import * as React10 from "react";
+declare function ParameterList({ title, collapseAfter, children, className }: ParameterListProps): React8.ReactNode;
+import * as React9 from "react";
 interface ResponseBlockProps {
 	/** Response JSON data */
 	data: object;
@@ -169,7 +378,41 @@ interface ResponseBlockProps {
 * JSON response preview with syntax highlighting.
 * Displays formatted JSON with copy functionality.
 */
-declare function ResponseBlock({ data, title, className }: ResponseBlockProps): React10.ReactNode;
+declare function ResponseBlock({ data, title, className }: ResponseBlockProps): React9.ReactNode;
+import { ReactNode as ReactNode13, RefObject } from "react";
+interface SyncScrollContextValue {
+	/** Currently visible section ID */
+	activeSection: string | null;
+	/** Register a section to track */
+	registerSection: (id: string, ref: RefObject<HTMLElement | null>) => void;
+	/** Unregister a section */
+	unregisterSection: (id: string) => void;
+	/** Scroll right column to section */
+	scrollToSection: (id: string) => void;
+	/** Register the right column container */
+	registerRightColumn: (ref: RefObject<HTMLElement | null>) => void;
+}
+interface SyncScrollProviderProps {
+	children: ReactNode13;
+	/** Root margin for intersection observer (default: '-20% 0px -60% 0px') */
+	rootMargin?: string;
+	/** Scroll behavior (default: 'smooth') */
+	scrollBehavior?: ScrollBehavior;
+}
+/**
+* Provider for synchronized scrolling between left and right columns.
+* Uses IntersectionObserver to track visible sections on the left,
+* and auto-scrolls the right column to matching examples.
+*/
+declare function SyncScrollProvider({ children, rootMargin, scrollBehavior }: SyncScrollProviderProps): ReactNode13;
+/**
+* Hook to access sync scroll context.
+*/
+declare function useSyncScroll(): SyncScrollContextValue;
+/**
+* Hook to register a section for scroll tracking.
+*/
+declare function useSyncSection(id: string): RefObject<HTMLElement | null>;
 import { AnnotationHandler } from "codehike/code";
 declare const callout: AnnotationHandler;
 import { AnnotationHandler as AnnotationHandler2, RawCode } from "codehike/code";
@@ -367,19 +610,19 @@ import { AnnotationHandler as AnnotationHandler6 } from "codehike/code";
 declare const collapse: readonly AnnotationHandler6[];
 import { AnnotationHandler as AnnotationHandler7 } from "codehike/code";
 declare const diff: AnnotationHandler7;
-import React11 from "react";
-declare function addDocsKit<T extends Record<string, React11.ElementType | string>>(components: T): T;
+import React10 from "react";
+declare function addDocsKit<T extends Record<string, React10.ElementType | string>>(components: T): T;
 import { AnnotationHandler as AnnotationHandler8 } from "codehike/code";
 declare const expandable: AnnotationHandler8;
 import { AnnotationHandler as AnnotationHandler9 } from "codehike/code";
-import React12 from "react";
+import React11 from "react";
 declare function WithHover(props: {
-	children: React12.ReactNode;
-}): React12.ReactNode;
+	children: React11.ReactNode;
+}): React11.ReactNode;
 declare function HoverLink(props: {
 	href?: string;
-	children?: React12.ReactNode;
-}): React12.ReactNode;
+	children?: React11.ReactNode;
+}): React11.ReactNode;
 declare const hover: AnnotationHandler9;
 import { AnnotationHandler as AnnotationHandler10 } from "codehike/code";
 declare const lineNumbers2: AnnotationHandler10;
@@ -391,11 +634,11 @@ declare function WithNotes({ children,...rest }: {
 	children: React.ReactNode;
 }): React.ReactNode;
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React13 from "react";
-declare function Tabs({ className,...props }: React13.ComponentProps<typeof TabsPrimitive.Root>): React13.ReactNode;
-declare function TabsList({ className,...props }: React13.ComponentProps<typeof TabsPrimitive.List>): React13.ReactNode;
-declare function TabsTrigger({ className,...props }: React13.ComponentProps<typeof TabsPrimitive.Trigger>): React13.ReactNode;
-declare function TabsContent({ className,...props }: React13.ComponentProps<typeof TabsPrimitive.Content>): React13.ReactNode;
+import * as React12 from "react";
+declare function Tabs({ className,...props }: React12.ComponentProps<typeof TabsPrimitive.Root>): React12.ReactNode;
+declare function TabsList({ className,...props }: React12.ComponentProps<typeof TabsPrimitive.List>): React12.ReactNode;
+declare function TabsTrigger({ className,...props }: React12.ComponentProps<typeof TabsPrimitive.Trigger>): React12.ReactNode;
+declare function TabsContent({ className,...props }: React12.ComponentProps<typeof TabsPrimitive.Content>): React12.ReactNode;
 import { AnnotationHandler as AnnotationHandler13 } from "codehike/code";
 declare const tooltip: AnnotationHandler13;
 declare function TooltipLink(props: {
@@ -415,14 +658,14 @@ interface ImportSectionProps {
 * Monospace styling with copy button.
 */
 declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
-import * as React14 from "react";
+import * as React13 from "react";
 type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array" | "function" | "union" | "generic" | "default";
 /**
 * Type coloring for syntax display.
 * Follows Stripe-style: consistent colors for primitives vs complex types.
 */
 declare const typeBadgeVariants: unknown;
-interface TypeBadgeProps extends React14.HTMLAttributes<HTMLSpanElement> {
+interface TypeBadgeProps extends React13.HTMLAttributes<HTMLSpanElement> {
 	/** Type string to display */
 	type: string;
 	/** Override color detection */
@@ -432,5 +675,5 @@ interface TypeBadgeProps extends React14.HTMLAttributes<HTMLSpanElement> {
 * Inline type display with syntax coloring.
 * Automatically detects type category and applies appropriate color.
 */
-declare const TypeBadge: React14.ForwardRefExoticComponent<TypeBadgeProps & React14.RefAttributes<HTMLSpanElement>>;
-export { wordWrap2 as wordWrap, typeBadgeVariants, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TypeColor, TypeBadgeProps, TypeBadge, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SingleCode, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, MultiCode, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, ImportSectionProps, ImportSection, HttpMethod, HoverLink, EndpointHeaderProps, EndpointHeader, EndpointBadgeProps, EndpointBadge, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CodeTabsSkeleton, CodeInfo, CodeIcon, CodeGroup, CodeExample, CodeBlockSkeleton, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode, APISectionProps, APISection, APIReferencePageProps, APIReferencePage, APIParameterSchema, APIParameterItemProps, APIParameterItem, APICodePanelProps, APICodePanel };
+declare const TypeBadge: React13.ForwardRefExoticComponent<TypeBadgeProps & React13.RefAttributes<HTMLSpanElement>>;
+export { wordWrap2 as wordWrap, useSyncSection, useSyncScroll, typeBadgeVariants, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TypeColor, TypeBadgeProps, TypeBadge, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SyncScrollProviderProps, SyncScrollProvider, SyncScrollContextValue, SingleCode, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, NestedParameterToggleProps, NestedParameterToggle, NestedParameterContainerProps, NestedParameterContainer, MultiCode, MethodSectionProps, MethodSection, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, ImportSectionProps, ImportSection, HttpMethod, HoverLink, ExpandableParameterProps, ExpandableParameter, ExampleSectionProps, CodeExample2 as ExampleSectionCodeExample, ExampleSection, ExampleChipsProps, ExampleChips, ExampleChip, EnumValuesSectionProps, EnumValuesSection, EnumValue, EndpointHeaderProps, EndpointHeader, EndpointBadgeProps, EndpointBadge, DocsKitInlineCode, DocsKitCode, DiffStats, CopyButton, CollapsiblePanelProps, CollapsiblePanel, CodeTabsSkeleton, CodeInfo, CodeIcon, CodeGroup, CodeExample, CodeBlockSkeleton, CodeBlockProps, CodeBlock, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode, APISectionProps, APISection, APIReferencePageProps, APIReferencePage, APIReferenceLayoutProps, APIReferenceLayout, APIParameterSchema, APIParameterItemProps, APIParameterItem, APICodePanelProps, APICodePanel };