@openpkg-ts/ui 0.5.1 → 0.6.0

package/dist/badge/index.d.ts

@@ -1,7 +1,12 @@
 import * as React from "react";
 type KindBadgeKind = "function" | "class" | "interface" | "type" | "enum" | "variable" | "namespace" | "module" | "reference" | "external";
 type KindBadgeSize = "sm" | "md";
-declare const kindBadgeVariants: unknown;
+declare const kindBadgeVariants: (props?: {
+	kind?: KindBadgeKind | null;
+	size?: KindBadgeSize | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface KindBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 	kind?: KindBadgeKind | null;
 	size?: KindBadgeSize | null;
@@ -10,7 +15,12 @@ interface KindBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const KindBadge: React.ForwardRefExoticComponent<KindBadgeProps & React.RefAttributes<HTMLSpanElement>>;
 type StatusBadgeStatus = "success" | "warning" | "error" | "neutral";
 type StatusBadgeSize = "sm" | "md";
-declare const statusBadgeVariants: unknown;
+declare const statusBadgeVariants: (props?: {
+	status?: StatusBadgeStatus | null;
+	size?: StatusBadgeSize | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
 	status?: StatusBadgeStatus | null;
 	size?: StatusBadgeSize | null;

package/dist/docskit/index.d.ts

@@ -145,7 +145,12 @@ declare function CollapsiblePanel({ title, children, defaultExpanded, expanded:
 import * as React6 from "react";
 type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
 type EndpointBadgeSize = "sm" | "md";
-declare const endpointBadgeVariants: unknown;
+declare const endpointBadgeVariants: (props?: {
+	method?: HttpMethod | null;
+	size?: EndpointBadgeSize | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface EndpointBadgeProps extends React6.HTMLAttributes<HTMLSpanElement> {
 	method: HttpMethod;
 	size?: EndpointBadgeSize | null;
@@ -233,7 +238,7 @@ interface ExampleSectionProps {
 * Integrates with SyncScrollProvider for synchronized scrolling.
 */
 declare function ExampleSection({ id, examples, dataSource, response, notes, className }: ExampleSectionProps): ReactNode7;
-import { SpecSignatureParameter } from "@openpkg-ts/spec";
+import { SpecSchema, SpecSignatureParameter } from "@openpkg-ts/spec";
 import { ReactNode as ReactNode8 } from "react";
 interface ExpandableParameterProps {
 	/** Parameter from spec */
@@ -250,12 +255,14 @@ interface ExpandableParameterProps {
 	level?: number;
 	/** Custom className */
 	className?: string;
+	/** Callback to resolve $ref schemas */
+	resolveRef?: (ref: string) => SpecSchema | undefined;
 }
 /**
 * 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;
+declare function ExpandableParameter({ parameter, parentPath, defaultExpanded, expanded: controlledExpanded, onExpandedChange, level, className, resolveRef }: ExpandableParameterProps): ReactNode8;
 import { ReactNode as ReactNode9 } from "react";
 interface MethodSectionProps {
 	/** Section ID for scroll sync */
@@ -664,7 +671,11 @@ type TypeColor = "string" | "number" | "boolean" | "null" | "undefined" | "objec
 * Type coloring for syntax display.
 * Follows Stripe-style: consistent colors for primitives vs complex types.
 */
-declare const typeBadgeVariants: unknown;
+declare const typeBadgeVariants: (props?: {
+	typeColor?: TypeColor | null;
+	class?: string;
+	className?: string;
+}) => string;
 interface TypeBadgeProps extends React13.HTMLAttributes<HTMLSpanElement> {
 	/** Type string to display */
 	type: string;

package/dist/docskit/index.js

@@ -1923,7 +1923,8 @@ function ExpandableParameter({
   expanded: controlledExpanded,
   onExpandedChange,
   level = 0,
-  className
+  className,
+  resolveRef
 }) {
   const [internalExpanded, setInternalExpanded] = useState10(defaultExpanded);
   const isControlled = controlledExpanded !== undefined;
@@ -1936,7 +1937,7 @@ function ExpandableParameter({
       setInternalExpanded(newValue);
     }
   };
-  const { nestedParams, enumValues, hasChildren } = extractSchemaInfo(parameter.schema);
+  const { nestedParams, enumValues, hasChildren } = extractSchemaInfo(parameter.schema, resolveRef);
   const type = formatSchema(parameter.schema);
   const isRequired = parameter.required !== false;
   return /* @__PURE__ */ jsx39("div", {
@@ -1964,7 +1965,8 @@ function ExpandableParameter({
               children: nestedParams.map((nested) => /* @__PURE__ */ jsx39(ExpandableParameter, {
                 parameter: nested,
                 parentPath: `${parameter.name}.`,
-                level: level + 1
+                level: level + 1,
+                resolveRef
               }, nested.name))
             })
           ]
@@ -1973,7 +1975,7 @@ function ExpandableParameter({
     })
   });
 }
-function extractSchemaInfo(schema) {
+function extractSchemaInfo(schema, resolveRef) {
   const result = {
     nestedParams: [],
     enumValues: [],
@@ -1981,7 +1983,13 @@ function extractSchemaInfo(schema) {
   };
   if (!schema || typeof schema !== "object")
     return result;
-  const s = schema;
+  let s = schema;
+  if (s.$ref && typeof s.$ref === "string" && resolveRef) {
+    const resolved = resolveRef(s.$ref);
+    if (resolved && typeof resolved === "object") {
+      s = resolved;
+    }
+  }
   if (s.type === "object" && s.properties && typeof s.properties === "object") {
     const props = s.properties;
     const required = Array.isArray(s.required) ? s.required : [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {

package/src/styles/docskit.css

@@ -6,8 +6,40 @@
  * Usage: @import '@openpkg-ts/ui/styles/docskit.css';
  */
 
-/* CodeHike custom theme (dark) */
+/* CodeHike custom theme (light default) */
 :root {
+  --ch-0: light;
+  --ch-1: #999999;
+  --ch-2: #c9555a;
+  --ch-3: #3a3a3a;
+  --ch-4: #3a3a3a;
+  --ch-5: #7c3aed;
+  --ch-6: #b8860b;
+  --ch-7: #c9555a;
+  --ch-8: #b8860b;
+  --ch-9: #c9555a;
+  --ch-10: #ebebeb;
+  --ch-11: #fde8e8;
+  --ch-12: #e8f5e8;
+  --ch-13: #fdf0d5;
+  --ch-14: #e8e8e8;
+  --ch-15: #999999;
+  --ch-16: #f5f5f5;
+  --ch-17: #d0d0d080;
+  --ch-18: #fdff0033;
+  --ch-19: #c9555a;
+  --ch-20: #d0d0e0;
+  --ch-21: #c9555a;
+  --ch-22: #ebebeb;
+  --ch-23: #e0e0e0;
+  --ch-24: #b0b0b0;
+  --ch-25: #b0b0b033;
+  --ch-26: #f5f5f5e6;
+}
+
+/* CodeHike custom theme (dark) — explicit class or data attribute */
+.dark,
+[data-theme="dark"] {
   --ch-0: dark;
   --ch-1: #5c5c5c;
   --ch-2: #c9555a;
@@ -37,36 +69,37 @@
   --ch-26: #1a1a1ae6;
 }
 
-/* CodeHike custom theme (light) */
-.light,
-[data-theme="light"] {
-  --ch-0: light;
-  --ch-1: #999999;
-  --ch-2: #c9555a;
-  --ch-3: #3a3a3a;
-  --ch-4: #3a3a3a;
-  --ch-5: #7c3aed;
-  --ch-6: #b8860b;
-  --ch-7: #c9555a;
-  --ch-8: #b8860b;
-  --ch-9: #c9555a;
-  --ch-10: #ebebeb;
-  --ch-11: #fde8e8;
-  --ch-12: #e8f5e8;
-  --ch-13: #fdf0d5;
-  --ch-14: #e8e8e8;
-  --ch-15: #999999;
-  --ch-16: #f5f5f5;
-  --ch-17: #d0d0d080;
-  --ch-18: #fdff0033;
-  --ch-19: #c9555a;
-  --ch-20: #d0d0e0;
-  --ch-21: #c9555a;
-  --ch-22: #ebebeb;
-  --ch-23: #e0e0e0;
-  --ch-24: #b0b0b0;
-  --ch-25: #b0b0b033;
-  --ch-26: #f5f5f5e6;
+/* CodeHike dark theme — system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme="light"]) {
+    --ch-0: dark;
+    --ch-1: #5c5c5c;
+    --ch-2: #c9555a;
+    --ch-3: #d4d4d4;
+    --ch-4: #d4d4d4;
+    --ch-5: #c4a7e7;
+    --ch-6: #d4a553;
+    --ch-7: #c9555a;
+    --ch-8: #d4a553;
+    --ch-9: #c9555a;
+    --ch-10: #2a2a2a;
+    --ch-11: #3a1515;
+    --ch-12: #1a2a1a;
+    --ch-13: #3a2a15;
+    --ch-14: #1e1e1e;
+    --ch-15: #5c5c5c;
+    --ch-16: #1a1a1a;
+    --ch-17: #3a3a3a1a;
+    --ch-18: #ffffff0b;
+    --ch-19: #c9555a;
+    --ch-20: #3a3a5a;
+    --ch-21: #c9555a;
+    --ch-22: #141414;
+    --ch-23: #2a2a2a;
+    --ch-24: #4a4a4a;
+    --ch-25: #4a4a4a66;
+    --ch-26: #1a1a1ae6;
+  }
 }
 
 /* openpkg-code-* Tailwind v4 color theme (maps to --ch-* vars) */