@openpkg-ts/ui 0.1.6 → 0.1.7

package/dist/docskit/index.d.ts

@@ -408,4 +408,60 @@ declare function TooltipLink(props: {
 }): React.JSX.Element;
 import { AnnotationHandler as AnnotationHandler14 } from "codehike/code";
 declare const wordWrap2: AnnotationHandler14;
-export { wordWrap2 as wordWrap, tooltip, toCodeGroup, theme, mark, link, lineNumbers2 as lineNumbers, hover, flagsToOptions, expandable, endpointBadgeVariants, diff, collapse, callout, addDocsKit, WithNotes, WithHover, TooltipLink, TerminalSkeleton, Terminal, TabsTrigger, TabsList, TabsContent, Tabs, SingleCode, ResponseBlockProps, ResponseBlock, ParameterListProps, ParameterList, PackageInstall, MultiCode, LanguageSelectorProps, LanguageSelector, Language, InlineCodeSkeleton, 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 };
+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;
+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 * as React14 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: (props?: {
+	typeColor?: TypeColor | null;
+	className?: string;
+}) => string;
+interface TypeBadgeProps extends React14.HTMLAttributes<HTMLSpanElement> {
+	/** Type string to display */
+	type: string;
+	/** Override color detection */
+	typeColor?: TypeColor | null;
+}
+/**
+* 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, CodeTabsProps, CodeTabs, CodeTab, CodeInfo, CodeIcon, CodeGroup, CodeExample, CodeBlockSkeleton, Code, ClientTerminal, ClientInlineCode, ClientDocsKitCode, ClientDiffCodeProps, ClientDiffCode, ClientCode, APISectionProps, APISection, APIReferencePageProps, APIReferencePage, APIParameterSchema, APIParameterItemProps, APIParameterItem, APICodePanelProps, APICodePanel };

package/dist/docskit/index.js

@@ -2,7 +2,7 @@
 // src/docskit/api/api-code-panel.tsx
 import { highlight, Pre } from "codehike/code";
 import { Check, Copy, ExternalLink } from "lucide-react";
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -11,6 +11,22 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/hooks/use-copy-to-clipboard.ts
+import { useCallback, useRef, useState } from "react";
+var COPY_FEEDBACK_MS = 1200;
+function useCopyToClipboard(timeout = COPY_FEEDBACK_MS) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef();
+  const copy = useCallback((text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), timeout);
+    });
+  }, [timeout]);
+  return [copied, copy];
+}
+
 // src/docskit/code.config.ts
 var theme = "github-from-css";
 function flagsToOptions(flags = "") {
@@ -294,7 +310,7 @@ var expandable = {
 import {
   InnerLine as InnerLine5
 } from "codehike/code";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState as useState2 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 
 var HoverContext = createContext({
@@ -303,7 +319,7 @@ var HoverContext = createContext({
   removeHoveredName: () => {}
 });
 function HoverProvider({ children }) {
-  const [hoveredNames, setHoveredNames] = useState([]);
+  const [hoveredNames, setHoveredNames] = useState2([]);
   const addHoveredName = (name) => {
     setHoveredNames((prev) => [...prev, name]);
   };
@@ -814,9 +830,9 @@ function APICodePanel({
   title,
   className
 }) {
-  const [selectedLang, setSelectedLang] = useState3(examples[0]?.languageId ?? languages[0]?.id);
-  const [copied, setCopied] = useState3(false);
-  const [highlighted, setHighlighted] = useState3(null);
+  const [selectedLang, setSelectedLang] = useState4(examples[0]?.languageId ?? languages[0]?.id);
+  const [copied, copy] = useCopyToClipboard();
+  const [highlighted, setHighlighted] = useState4(null);
   const currentExample = examples.find((e) => e.languageId === selectedLang);
   const code = currentExample?.code ?? "";
   const lang = currentExample?.highlightLang ?? currentExample?.languageId ?? "txt";
@@ -836,9 +852,7 @@ function APICodePanel({
     };
   }, [code, lang]);
   const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
+    copy(code);
   };
   const handlers = getHandlers({ copyButton: false });
   return /* @__PURE__ */ jsxs10("div", {
@@ -1023,15 +1037,12 @@ EndpointBadge.displayName = "EndpointBadge";
 // src/docskit/api/endpoint-header.tsx
 import { Check as Check2, Copy as Copy2 } from "lucide-react";
 import * as React4 from "react";
-import { useState as useState4 } from "react";
 import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 
 var EndpointHeader = React4.forwardRef(({ className, method, path, copyable = true, ...props }, ref) => {
-  const [copied, setCopied] = useState4(false);
+  const [copied, copy] = useCopyToClipboard();
   const handleCopy = () => {
-    navigator.clipboard.writeText(path);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
+    copy(path);
   };
   return /* @__PURE__ */ jsxs13("div", {
     ref,
@@ -1072,15 +1083,10 @@ function NestedProperty({
   depth = 0
 }) {
   const [expanded, setExpanded] = useState5(false);
-  const [copied, setCopied] = useState5(false);
+  const [copied, copy] = useCopyToClipboard();
   const type = schema.typeString ?? schema.type ?? "unknown";
   const hasNested = schema.properties && Object.keys(schema.properties).length > 0;
   const _nestedCount = hasNested && schema.properties ? Object.keys(schema.properties).length : 0;
-  const handleCopy = () => {
-    navigator.clipboard.writeText(name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
   return /* @__PURE__ */ jsxs14("div", {
     className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
     children: [
@@ -1129,7 +1135,7 @@ function NestedProperty({
                     }),
                     /* @__PURE__ */ jsx25("button", {
                       type: "button",
-                      onClick: handleCopy,
+                      onClick: () => copy(name),
                       className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
                       "aria-label": "Copy name",
                       children: copied ? /* @__PURE__ */ jsx25(Check3, {
@@ -1171,14 +1177,9 @@ function APIParameterItem({
   className
 }) {
   const [expanded, setExpanded] = useState5(false);
-  const [copied, setCopied] = useState5(false);
+  const [copied, copy] = useCopyToClipboard();
   const hasNested = children?.properties && Object.keys(children.properties).length > 0;
   const _nestedCount = hasNested && children?.properties ? Object.keys(children.properties).length : 0;
-  const handleCopy = () => {
-    navigator.clipboard.writeText(name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
   return /* @__PURE__ */ jsxs14("div", {
     className: cn("border-b border-border last:border-b-0", className),
     children: [
@@ -1225,7 +1226,7 @@ function APIParameterItem({
                     }),
                     /* @__PURE__ */ jsx25("button", {
                       type: "button",
-                      onClick: handleCopy,
+                      onClick: () => copy(name),
                       className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
                       "aria-label": "Copy name",
                       children: copied ? /* @__PURE__ */ jsx25(Check3, {
@@ -1305,16 +1306,13 @@ function ParameterList({
 // src/docskit/api/response-block.tsx
 import { Check as Check4, Copy as Copy4 } from "lucide-react";
 import * as React6 from "react";
-import { useState as useState7 } from "react";
 import { jsx as jsx27, jsxs as jsxs16, Fragment as Fragment4 } from "react/jsx-runtime";
 
 function ResponseBlock({ data, title, className }) {
-  const [copied, setCopied] = useState7(false);
+  const [copied, copy] = useCopyToClipboard();
   const jsonString = JSON.stringify(data, null, 2);
   const handleCopy = () => {
-    navigator.clipboard.writeText(jsonString);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
+    copy(jsonString);
   };
   return /* @__PURE__ */ jsxs16("div", {
     className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", className),
@@ -1496,7 +1494,6 @@ import { highlight as highlight2, Pre as Pre2 } from "codehike/code";
 
 // src/docskit/code.copy.tsx
 import { Check as Check5, Copy as Copy5 } from "lucide-react";
-import { useState as useState8 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 
 function CopyButton({
@@ -1504,7 +1501,7 @@ function CopyButton({
   className,
   variant = "floating"
 }) {
-  const [copied, setCopied] = useState8(false);
+  const [copied, copy] = useCopyToClipboard();
   return /* @__PURE__ */ jsx28("button", {
     type: "button",
     className: cn("cursor-pointer transition-opacity duration-200", variant === "floating" && [
@@ -1512,11 +1509,7 @@ function CopyButton({
       "rounded border border-dk-border bg-dk-background",
       "opacity-0 group-hover:opacity-100"
     ], variant === "inline" && "rounded", className),
-    onClick: () => {
-      navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1200);
-    },
+    onClick: () => copy(text),
     "aria-label": "Copy to clipboard",
     children: copied ? /* @__PURE__ */ jsx28(Check5, {
       size: 16,
@@ -1786,12 +1779,12 @@ import {
   Inline,
   Pre as Pre3
 } from "codehike/code";
-import { useEffect as useEffect3, useState as useState9 } from "react";
+import { useEffect as useEffect3, useState as useState7 } from "react";
 import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 
 function ClientDocsKitCode(props) {
   const { codeblock, handlers: extraHandlers, className: wrapperClassName } = props;
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   const { title, flags } = extractFlags2(codeblock);
   const options = flagsToOptions(flags);
   useEffect3(() => {
@@ -1860,7 +1853,7 @@ function ClientDocsKitCode(props) {
 }
 function ClientTerminal(props) {
   const { codeblock, handlers: extraHandlers } = props;
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   const { flags } = extractFlagsSimple(codeblock);
   const options = flagsToOptions(flags);
   useEffect3(() => {
@@ -1930,7 +1923,7 @@ function ClientTerminal(props) {
   });
 }
 function ClientInlineCode({ codeblock }) {
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   useEffect3(() => {
     let cancelled = false;
     highlight3(codeblock, theme).then((result) => {
@@ -1965,7 +1958,7 @@ function extractFlagsSimple(codeblock) {
 }
 function ClientCode(props) {
   const { codeblocks, flags: groupFlags, storage } = props;
-  const [highlighted, setHighlighted] = useState9(null);
+  const [highlighted, setHighlighted] = useState7(null);
   const groupOptions = flagsToOptions(groupFlags?.startsWith("-") ? groupFlags.slice(1) : groupFlags);
   const _codeBlocksKey = codeblocks.map((b) => `${b.value}|${b.lang}|${b.meta}`).join("::");
   useEffect3(() => {
@@ -2109,7 +2102,7 @@ import {
   Pre as Pre4
 } from "codehike/code";
 import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { useEffect as useEffect4, useState as useState10 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 
 function StackedChevrons({ isOpen, className }) {
@@ -2135,8 +2128,8 @@ function ClientDiffCode(props) {
     className: wrapperClassName,
     defaultOpen = true
   } = props;
-  const [highlighted, setHighlighted] = useState10(null);
-  const [isOpen, setIsOpen] = useState10(defaultOpen);
+  const [highlighted, setHighlighted] = useState8(null);
+  const [isOpen, setIsOpen] = useState8(defaultOpen);
   const { title, flags } = extractFlags3(codeblock);
   const options = flagsToOptions(flags);
   const filename = filenameProp || title || "file";
@@ -2266,7 +2259,7 @@ async function DocsKitInlineCode({
   });
 }
 // src/docskit/code.package-install.tsx
-import { useState as useState11 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 
 var managerLabels = {
@@ -2319,7 +2312,7 @@ function PackageInstall({
   managers = ["npm", "bun", "pnpm", "yarn"],
   copyButton = true
 }) {
-  const [activeManager, setActiveManager] = useState11(managers[0]);
+  const [activeManager, setActiveManager] = useState9(managers[0]);
   const command = getInstallCommand(activeManager, pkg, { dev, global: isGlobal });
   return /* @__PURE__ */ jsxs21("div", {
     className: "group rounded overflow-hidden border border-dk-border flex flex-col my-4 not-prose",
@@ -2539,8 +2532,163 @@ function WithNotes({ children, ...rest }) {
     children
   });
 }
+// src/docskit/code.tabs-legacy.tsx
+import { Check as Check6, Copy as Copy6 } from "lucide-react";
+import { useState as useState10 } from "react";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+
+function CodeTabs({
+  tabs,
+  defaultIndex = 0,
+  sticky = false,
+  className
+}) {
+  const [activeIndex, setActiveIndex] = useState10(defaultIndex);
+  const [copied, copy] = useCopyToClipboard();
+  const activeTab = tabs[activeIndex];
+  const handleCopy = () => {
+    if (!activeTab)
+      return;
+    copy(activeTab.code);
+  };
+  if (!tabs.length)
+    return null;
+  return /* @__PURE__ */ jsxs23("div", {
+    className: cn("group rounded-lg border border-dk-border bg-dk-background overflow-hidden", "selection:bg-dk-selection selection:text-current", className),
+    children: [
+      /* @__PURE__ */ jsxs23("div", {
+        className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
+        children: [
+          /* @__PURE__ */ jsx40("div", {
+            className: "flex-1 flex items-stretch",
+            children: tabs.map((tab, index) => /* @__PURE__ */ jsx40("button", {
+              type: "button",
+              onClick: () => setActiveIndex(index),
+              className: cn("px-4 py-2 text-sm font-mono transition-colors duration-200", "border-r border-dk-border last:border-r-0", index === activeIndex ? "text-dk-tab-active-foreground bg-dk-background/50" : "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
+              children: tab.label
+            }, tab.label))
+          }),
+          /* @__PURE__ */ jsx40("button", {
+            type: "button",
+            onClick: handleCopy,
+            className: cn("p-2 mx-2", "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground", "opacity-0 group-hover:opacity-100 transition-opacity", "cursor-pointer"),
+            "aria-label": "Copy code",
+            children: copied ? /* @__PURE__ */ jsx40(Check6, {
+              size: 16
+            }) : /* @__PURE__ */ jsx40(Copy6, {
+              size: 16
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx40("div", {
+        className: "bg-dk-background",
+        children: activeTab?.content
+      })
+    ]
+  });
+}
+// src/docskit/import-section.tsx
+import { Check as Check7, Copy as Copy7 } from "lucide-react";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+
+function ImportSection({ importStatement, className }) {
+  const [copied, copy] = useCopyToClipboard();
+  const handleCopy = () => {
+    copy(importStatement);
+  };
+  return /* @__PURE__ */ jsxs24("div", {
+    className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-border bg-muted/30 px-4 py-3", className),
+    children: [
+      /* @__PURE__ */ jsx41("code", {
+        className: "font-mono text-sm text-foreground overflow-x-auto",
+        children: importStatement
+      }),
+      /* @__PURE__ */ jsx41("button", {
+        type: "button",
+        onClick: handleCopy,
+        className: cn("shrink-0 p-1.5 rounded", "text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
+        "aria-label": "Copy import statement",
+        children: copied ? /* @__PURE__ */ jsx41(Check7, {
+          size: 16
+        }) : /* @__PURE__ */ jsx41(Copy7, {
+          size: 16
+        })
+      })
+    ]
+  });
+}
+// src/docskit/type-badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import * as React9 from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var typeBadgeVariants = cva2("font-mono text-sm", {
+  variants: {
+    typeColor: {
+      string: "text-emerald-600 dark:text-emerald-400",
+      number: "text-blue-600 dark:text-blue-400",
+      boolean: "text-amber-600 dark:text-amber-400",
+      null: "text-gray-500 dark:text-gray-400",
+      undefined: "text-gray-500 dark:text-gray-400",
+      object: "text-purple-600 dark:text-purple-400",
+      array: "text-cyan-600 dark:text-cyan-400",
+      function: "text-fuchsia-600 dark:text-fuchsia-400",
+      union: "text-orange-600 dark:text-orange-400",
+      generic: "text-rose-600 dark:text-rose-400",
+      default: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    typeColor: "default"
+  }
+});
+function detectTypeColor(type) {
+  const normalized = type.toLowerCase().trim();
+  if (normalized === "string" || normalized.startsWith('"') || normalized.startsWith("'")) {
+    return "string";
+  }
+  if (normalized === "number" || /^\d+$/.test(normalized)) {
+    return "number";
+  }
+  if (normalized === "boolean" || normalized === "true" || normalized === "false") {
+    return "boolean";
+  }
+  if (normalized === "null") {
+    return "null";
+  }
+  if (normalized === "undefined" || normalized === "void") {
+    return "undefined";
+  }
+  if (normalized === "object" || normalized.startsWith("{")) {
+    return "object";
+  }
+  if (normalized.endsWith("[]") || normalized.startsWith("array")) {
+    return "array";
+  }
+  if (normalized.startsWith("(") || normalized.includes("=>") || normalized.startsWith("function")) {
+    return "function";
+  }
+  if (normalized.includes("|")) {
+    return "union";
+  }
+  if (normalized.includes("<") && normalized.includes(">")) {
+    return "generic";
+  }
+  return "default";
+}
+var TypeBadge = React9.forwardRef(({ className, type, typeColor, ...props }, ref) => {
+  const color2 = typeColor ?? detectTypeColor(type);
+  return /* @__PURE__ */ jsx42("span", {
+    ref,
+    className: cn(typeBadgeVariants({ typeColor: color2 }), className),
+    ...props,
+    children: type
+  });
+});
+TypeBadge.displayName = "TypeBadge";
 export {
   wordWrap,
+  typeBadgeVariants,
   tooltip,
   toCodeGroup,
   theme,
@@ -2557,6 +2705,7 @@ export {
   addDocsKit,
   WithNotes,
   WithHover,
+  TypeBadge,
   TooltipLink,
   TerminalSkeleton,
   Terminal,
@@ -2571,6 +2720,7 @@ export {
   MultiCode,
   LanguageSelector,
   InlineCodeSkeleton,
+  ImportSection,
   HoverLink,
   EndpointHeader,
   EndpointBadge,
@@ -2578,6 +2728,7 @@ export {
   DocsKitCode,
   CopyButton,
   CodeTabsSkeleton,
+  CodeTabs,
   CodeIcon,
   CodeGroup,
   CodeBlockSkeleton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {
@@ -11,13 +11,10 @@
   "type": "module",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "exports": {
-    "./api": {
-      "types": "./dist/api/index.d.ts",
-      "import": "./dist/api/index.js"
-    },
     "./badge": {
       "types": "./dist/badge/index.d.ts",
       "import": "./dist/badge/index.js"
@@ -30,7 +27,8 @@
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
     },
-    "./styles/tokens.css": "./src/styles/tokens.css"
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/docskit.css": "./src/styles/docskit.css"
   },
   "scripts": {
     "build": "bunup",

package/src/styles/docskit.css

@@ -0,0 +1,89 @@
+/**
+ * Docskit code block styling for Tailwind v4 consumers.
+ * Includes CodeHike theme variables, dk-* Tailwind color mappings,
+ * and selection utility.
+ *
+ * Usage: @import '@openpkg-ts/ui/styles/docskit.css';
+ */
+
+/* CodeHike github-from-css theme (dark) */
+:root {
+  --ch-0: dark;
+  --ch-1: #8b949e;
+  --ch-2: #79c0ff;
+  --ch-3: #ffa657;
+  --ch-4: #c9d1d9;
+  --ch-5: #d2a8ff;
+  --ch-6: #7ee787;
+  --ch-7: #ff7b72;
+  --ch-8: #a5d6ff;
+  --ch-9: #ffa198;
+  --ch-10: #f0f6fc;
+  --ch-11: #490202;
+  --ch-12: #04260f;
+  --ch-13: #5a1e02;
+  --ch-14: #161b22;
+  --ch-15: #8b949e;
+  --ch-16: #0d1117;
+  --ch-17: #6e76811a;
+  --ch-18: #ffffff0b;
+  --ch-19: #3794ff;
+  --ch-20: #264f78;
+  --ch-21: #1f6feb;
+  --ch-22: #010409;
+  --ch-23: #30363d;
+  --ch-24: #6e7681;
+  --ch-25: #6e768166;
+  --ch-26: #0d1117e6;
+}
+
+/* CodeHike github-from-css theme (light) */
+[data-theme="light"] {
+  --ch-0: light;
+  --ch-1: #6e7781;
+  --ch-2: #0550ae;
+  --ch-3: #953800;
+  --ch-4: #24292f;
+  --ch-5: #8250df;
+  --ch-6: #116329;
+  --ch-7: #cf222e;
+  --ch-8: #0a3069;
+  --ch-9: #82071e;
+  --ch-10: #f6f8fa;
+  --ch-11: #ffebe9;
+  --ch-12: #dafbe1;
+  --ch-13: #ffd8b5;
+  --ch-14: #eaeef2;
+  --ch-15: #57606a;
+  --ch-16: #ffffff;
+  --ch-17: #eaeef280;
+  --ch-18: #fdff0033;
+  --ch-19: #1a85ff;
+  --ch-20: #add6ff;
+  --ch-21: #0969da;
+  --ch-22: #f6f8fa;
+  --ch-23: #d0d7de;
+  --ch-24: #8c959f;
+  --ch-25: #afb8c133;
+  --ch-26: #ffffffe6;
+}
+
+/* dk-* Tailwind v4 color theme (maps to --ch-* vars) */
+@theme {
+  --color-dk-background: var(--ch-16);
+  --color-dk-border: var(--ch-23);
+  --color-dk-tabs-background: var(--ch-22);
+  --color-dk-tab-inactive-foreground: var(--ch-15);
+  --color-dk-tab-active-foreground: var(--ch-4);
+  --color-dk-selection: var(--ch-20);
+  --color-dk-line-number: var(--ch-24);
+  --color-dk-active-border: var(--ch-3);
+}
+
+/* Selection utility — Tailwind can't auto-generate this */
+@layer utilities {
+  .selection\:bg-dk-selection::selection,
+  .selection\:bg-dk-selection *::selection {
+    background-color: var(--ch-20);
+  }
+}

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+// Export styles path for consumers
+export const tokensPath = '@openpkg-ts/ui/styles/tokens.css';