@openpkg-ts/ui 0.1.1 → 0.1.3

package/README.md

@@ -0,0 +1,66 @@
+# @openpkg-ts/ui
+
+Low-level UI primitives for API documentation. Built with Radix UI, Tailwind CSS, and CodeHike.
+
+Use `@openpkg-ts/react` for higher-level page components.
+
+## Install
+
+```bash
+bun add @openpkg-ts/ui
+```
+
+Peer deps: `react@^18 || ^19`, `react-dom@^18 || ^19`
+
+## Entry Points
+
+### `@openpkg-ts/ui/api`
+
+Components for displaying API exports and parameters.
+
+```tsx
+import { ExportCard, ParameterItem, CodeTabs, TypeBadge, ImportSection } from '@openpkg-ts/ui/api';
+```
+
+### `@openpkg-ts/ui/badge`
+
+Status and kind indicator badges.
+
+```tsx
+import { KindBadge, StatusBadge } from '@openpkg-ts/ui/badge';
+```
+
+### `@openpkg-ts/ui/docskit`
+
+Stripe-style API reference components and CodeHike integrations.
+
+```tsx
+import {
+  // Page layout
+  APIReferencePage,
+  APISection,
+  ParameterList,
+  EndpointHeader,
+  ResponseBlock,
+
+  // Code blocks
+  DocsKitCode,
+  SingleCode,
+  Terminal,
+  PackageInstall,
+  CodeIcon,
+
+  // CodeHike handlers
+  addDocsKit,
+} from '@openpkg-ts/ui/docskit';
+```
+
+### `@openpkg-ts/ui/lib/utils`
+
+```tsx
+import { cn } from '@openpkg-ts/ui/lib/utils';
+```
+
+## License
+
+MIT

package/dist/api/index.d.ts

@@ -1,3 +1,64 @@
+import { ReactNode as ReactNode2 } from "react";
+interface CodeTab {
+	/** Tab label */
+	label: string;
+	/** Tab content (code block) */
+	content: ReactNode2;
+	/** Raw code for copy button */
+	code: string;
+}
+interface CodeTabsProps {
+	/** Array of tabs */
+	tabs: CodeTab[];
+	/** Default selected tab index */
+	defaultIndex?: number;
+	/** Enable sticky positioning for the header */
+	sticky?: boolean;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Tabbed code block wrapper with copy button per tab.
+* Uses docskit --dk-* CSS variables for consistent theming.
+*/
+declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
+import * as React2 from "react";
+type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
+/**
+* Kind badge variants for export cards.
+*/
+declare const kindBadgeVariants: (props?: {
+	kind?: ExportKind | null;
+	className?: string;
+}) => string;
+interface ExportCardProps extends React2.AnchorHTMLAttributes<HTMLAnchorElement> {
+	/** Export name */
+	name: string;
+	/** Description snippet */
+	description?: string;
+	/** Link to detail page */
+	href: string;
+	/** Export kind */
+	kind?: ExportKind | null;
+	/** Custom link component (for Next.js Link) */
+	as?: React2.ElementType;
+}
+/**
+* Card component for displaying exports in an index grid.
+* Features function name styling, description, kind badge, and hover effects.
+*/
+declare const ExportCard: React2.ForwardRefExoticComponent<ExportCardProps & React2.RefAttributes<HTMLAnchorElement>>;
+interface ImportSectionProps {
+	/** Import statement text */
+	importStatement: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Displays a copyable import statement with one-click copy.
+* Monospace styling with copy button.
+*/
+declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
 interface ParameterSchema {
 	/** Type name (e.g., "string", "number", "object") */
 	type?: string;
@@ -29,7 +90,7 @@ interface ParameterItemProps {
 * Features expandable nested params, type annotations, and required/optional badges.
 */
 declare function ParameterItem({ name, schema, required: isRequired, description, depth, className }: ParameterItemProps): React.ReactNode;
-import * as React2 from "react";
+import * as React3 from "react";
 type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "object" | "array" | "function" | "union" | "generic" | "default";
 /**
 * Type coloring for syntax display.
@@ -39,7 +100,7 @@ declare const typeBadgeVariants: (props?: {
 	typeColor?: TypeColor | null;
 	className?: string;
 }) => string;
-interface TypeBadgeProps extends React2.HTMLAttributes<HTMLSpanElement> {
+interface TypeBadgeProps extends React3.HTMLAttributes<HTMLSpanElement> {
 	/** Type string to display */
 	type: string;
 	/** Override color detection */
@@ -49,66 +110,5 @@ interface TypeBadgeProps extends React2.HTMLAttributes<HTMLSpanElement> {
 * Inline type display with syntax coloring.
 * Automatically detects type category and applies appropriate color.
 */
-declare const TypeBadge: React2.ForwardRefExoticComponent<TypeBadgeProps & React2.RefAttributes<HTMLSpanElement>>;
-interface ImportSectionProps {
-	/** Import statement text */
-	importStatement: string;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Displays a copyable import statement with one-click copy.
-* Monospace styling with copy button.
-*/
-declare function ImportSection({ importStatement, className }: ImportSectionProps): React.ReactNode;
-import { ReactNode as ReactNode2 } from "react";
-interface CodeTab {
-	/** Tab label */
-	label: string;
-	/** Tab content (code block) */
-	content: ReactNode2;
-	/** Raw code for copy button */
-	code: string;
-}
-interface CodeTabsProps {
-	/** Array of tabs */
-	tabs: CodeTab[];
-	/** Default selected tab index */
-	defaultIndex?: number;
-	/** Enable sticky positioning for the header */
-	sticky?: boolean;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Tabbed code block wrapper with copy button per tab.
-* Uses docskit --dk-* CSS variables for consistent theming.
-*/
-declare function CodeTabs({ tabs, defaultIndex, sticky, className }: CodeTabsProps): React.ReactNode2;
-import * as React3 from "react";
-type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
-/**
-* Kind badge variants for export cards.
-*/
-declare const kindBadgeVariants: (props?: {
-	kind?: ExportKind | null;
-	className?: string;
-}) => string;
-interface ExportCardProps extends React3.AnchorHTMLAttributes<HTMLAnchorElement> {
-	/** Export name */
-	name: string;
-	/** Description snippet */
-	description?: string;
-	/** Link to detail page */
-	href: string;
-	/** Export kind */
-	kind?: ExportKind | null;
-	/** Custom link component (for Next.js Link) */
-	as?: React3.ElementType;
-}
-/**
-* Card component for displaying exports in an index grid.
-* Features function name styling, description, kind badge, and hover effects.
-*/
-declare const ExportCard: React3.ForwardRefExoticComponent<ExportCardProps & React3.RefAttributes<HTMLAnchorElement>>;
+declare const TypeBadge: React3.ForwardRefExoticComponent<TypeBadgeProps & React3.RefAttributes<HTMLSpanElement>>;
 export { typeBadgeVariants, kindBadgeVariants, TypeBadgeProps, TypeBadge, ParameterSchema, ParameterItemProps, ParameterItem, ImportSectionProps, ImportSection, ExportKind, ExportCardProps, ExportCard, CodeTabsProps, CodeTabs, CodeTab };