@openpkg-ts/ui 0.5.2 → 0.6.1

package/dist/docskit/index.d.ts

@@ -238,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 */
@@ -255,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 */
@@ -308,9 +310,9 @@ interface NestedParameterToggleProps {
 	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).
+* "Show/Hide Child Attributes" toggle button (Stripe-style).
+* When collapsed: inline-block rounded pill button.
+* When expanded: full-width top of unified bordered container.
 */
 declare function NestedParameterToggle({ expanded, onToggle, className }: NestedParameterToggleProps): ReactNode11;
 import { ReactNode as ReactNode12 } from "react";

package/dist/docskit/index.js

@@ -1309,7 +1309,7 @@ function APIReferenceLayout({
   rightWidth = "42%"
 }) {
   return /* @__PURE__ */ jsxs12("div", {
-    className: cn("openpkg-api-layout", "max-w-[1600px] mx-auto", "flex flex-col", "lg:grid", className),
+    className: cn("openpkg-api-layout", "max-w-[1600px] mx-auto", "flex flex-col", "lg:grid lg:items-start", className),
     style: {
       "--openpkg-left-width": leftWidth,
       "--openpkg-right-width": rightWidth
@@ -1896,7 +1896,7 @@ function NestedParameterToggle({
   return /* @__PURE__ */ jsxs20("button", {
     type: "button",
     onClick: onToggle,
-    className: cn("openpkg-nested-toggle", "flex items-center gap-2 w-full", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "px-4 py-3", "cursor-pointer", "transition-all duration-150", "hover:text-[var(--openpkg-text-primary)]", expanded ? "rounded-t-lg rounded-b-none border-b-[var(--openpkg-border-subtle)]" : "rounded-lg", className),
+    className: cn("openpkg-nested-toggle", "flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "px-2 py-1.5", "cursor-pointer", "transition-[width,border-radius,border-color,color] duration-200 ease-out", "hover:text-[var(--openpkg-text-primary)]", expanded ? "w-full rounded-t-md rounded-b-none border-b-[var(--openpkg-border-subtle)]" : "w-fit rounded-md", className),
     "aria-expanded": expanded,
     children: [
       /* @__PURE__ */ jsx38("span", {
@@ -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.2",
+  "version": "0.6.1",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {