@openpkg-ts/ui 0.5.0 → 0.5.1

package/dist/docskit/index.d.ts

@@ -288,8 +288,9 @@ interface NestedParameterContainerProps {
 	className?: string;
 }
 /**
-* Bordered container for nested child parameters (Stripe-style).
-* Connects to NestedParameterToggle above (no top border).
+* 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";
@@ -298,16 +299,15 @@ interface NestedParameterToggleProps {
 	expanded: boolean;
 	/** Toggle callback */
 	onToggle: () => void;
-	/** Optional child count to display */
-	count?: number;
 	/** Custom className */
 	className?: string;
 }
 /**
-* "Show/Hide child parameters" toggle button (Stripe-style).
-* Plus icon rotates 45deg when expanded.
+* "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, count, className }: NestedParameterToggleProps): ReactNode11;
+declare function NestedParameterToggle({ expanded, onToggle, className }: NestedParameterToggleProps): ReactNode11;
 import { ReactNode as ReactNode12 } from "react";
 interface APIParameterSchema {
 	/** Type name */
@@ -346,10 +346,10 @@ interface APIParameterItemProps {
 	className?: string;
 }
 /**
-* Single parameter row in Stripe-style documentation.
-* Displays name, type, badges, description, and optional nested content.
+* Single parameter row (Scalar/Clerk-style).
+* Displays name, type, required badge (orange text), description, and optional nested content.
 */
-declare function APIParameterItem({ name, parentPath, type, required, optional, expandable, description, children, anchorId, showAnchor, className }: APIParameterItemProps): ReactNode12;
+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") */

package/dist/docskit/index.js

@@ -1814,7 +1814,6 @@ import { formatSchema } from "@openpkg-ts/sdk/browser";
 import { useState as useState10 } from "react";
 
 // src/docskit/api/parameter-item.tsx
-import { Link } from "lucide-react";
 import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
 
 function APIParameterItem({
@@ -1823,35 +1822,18 @@ function APIParameterItem({
   type,
   required,
   optional,
-  expandable: expandable2,
   description,
   children,
   anchorId,
-  showAnchor = false,
   className
 }) {
-  const handleAnchorClick = () => {
-    if (anchorId && typeof window !== "undefined") {
-      window.location.hash = anchorId;
-      navigator.clipboard?.writeText(window.location.href);
-    }
-  };
   return /* @__PURE__ */ jsxs19("div", {
     id: anchorId,
     className: cn("openpkg-param", "py-5 border-b border-[var(--openpkg-border-subtle)]", "last:border-b-0", className),
     children: [
       /* @__PURE__ */ jsxs19("div", {
-        className: "openpkg-param-header flex items-center gap-2.5 mb-2 flex-wrap",
+        className: "openpkg-param-header flex items-baseline gap-2 mb-1 flex-wrap",
         children: [
-          showAnchor && /* @__PURE__ */ jsx36("button", {
-            type: "button",
-            onClick: handleAnchorClick,
-            className: cn("openpkg-anchor-link", "flex items-center justify-center w-4 h-4", "opacity-0 group-hover:opacity-100 hover:opacity-100", "text-[var(--openpkg-text-muted)]", "hover:text-[var(--openpkg-accent-blue)]", "cursor-pointer transition-opacity"),
-            "aria-label": "Copy link",
-            children: /* @__PURE__ */ jsx36(Link, {
-              size: 14
-            })
-          }),
           /* @__PURE__ */ jsxs19("span", {
             className: "openpkg-param-name font-mono text-sm font-semibold",
             children: [
@@ -1865,21 +1847,17 @@ function APIParameterItem({
               })
             ]
           }),
-          required && /* @__PURE__ */ jsx36("span", {
-            className: cn("openpkg-param-badge", "text-[11px] font-medium uppercase tracking-wide", "px-2 py-0.5 rounded", "bg-[var(--openpkg-bg-badge)]", "text-[var(--openpkg-text-muted)]"),
-            children: "Required"
-          }),
-          optional && /* @__PURE__ */ jsx36("span", {
-            className: cn("openpkg-param-badge", "text-[11px] font-medium uppercase tracking-wide", "px-2 py-0.5 rounded", "bg-[var(--openpkg-bg-badge)]", "text-[var(--openpkg-text-muted)]"),
-            children: "Optional"
-          }),
-          expandable2 && /* @__PURE__ */ jsx36("span", {
-            className: cn("openpkg-badge-expandable", "text-[10px] font-medium", "px-2 py-0.5 rounded", "text-[var(--openpkg-accent-purple)]", "bg-[color-mix(in_srgb,var(--openpkg-accent-purple)_12%,transparent)]"),
-            children: "Expandable"
-          }),
           /* @__PURE__ */ jsx36("span", {
             className: "openpkg-param-type text-[13px] text-[var(--openpkg-text-muted)]",
             children: type
+          }),
+          required && /* @__PURE__ */ jsx36("span", {
+            className: "openpkg-param-badge text-[13px] font-medium text-[var(--openpkg-accent-orange,#d4a553)]",
+            children: "required"
+          }),
+          optional && /* @__PURE__ */ jsx36("span", {
+            className: "openpkg-param-badge text-[13px] text-[var(--openpkg-text-muted)]",
+            children: "optional"
           })
         ]
       }),
@@ -1901,37 +1879,34 @@ function NestedParameterContainer({
   className
 }) {
   return /* @__PURE__ */ jsx37("div", {
-    className: cn("openpkg-nested-container", "border border-t-0", level === 0 ? "border-[var(--openpkg-border-medium)]" : "border-[var(--openpkg-border-subtle)]", "rounded-b-lg", "px-5", "mb-2", "[&>.openpkg-param]:py-5", "[&>.openpkg-param]:border-b", "[&>.openpkg-param]:border-[var(--openpkg-border-subtle)]", "[&>.openpkg-param:last-child]:border-b-0", className),
+    className: cn("openpkg-nested-container", "border border-t-0 border-[var(--openpkg-border-medium)]", "rounded-b-lg", "px-5", "[&>.openpkg-expandable-param]:py-4", "[&>.openpkg-expandable-param]:border-b", "[&>.openpkg-expandable-param]:border-[var(--openpkg-border-subtle)]", "[&>.openpkg-expandable-param:last-child]:border-b-0", "[&>.openpkg-expandable-param:last-child]:pb-4", "[&>.openpkg-expandable-param_.openpkg-param]:py-0", "[&>.openpkg-expandable-param_.openpkg-param]:border-b-0", className),
     "data-level": level,
     children
   });
 }
 
 // src/docskit/api/nested-parameter-toggle.tsx
-import { Plus } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 
 function NestedParameterToggle({
   expanded,
   onToggle,
-  count,
   className
 }) {
   return /* @__PURE__ */ jsxs20("button", {
     type: "button",
     onClick: onToggle,
-    className: cn("openpkg-nested-toggle", "inline-flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "rounded-lg", "px-4 py-2.5", "mt-3", "cursor-pointer", "transition-all duration-150", "hover:border-[var(--openpkg-text-muted)]", "hover:text-[var(--openpkg-text-primary)]", expanded && "rounded-b-none border-b-transparent mb-0", className),
+    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),
     "aria-expanded": expanded,
     children: [
-      /* @__PURE__ */ jsx38(Plus, {
-        size: 12,
-        className: cn("transition-transform duration-200", expanded && "rotate-45")
+      /* @__PURE__ */ jsx38("span", {
+        className: "text-[13px]",
+        children: expanded ? "×" : "+"
       }),
       /* @__PURE__ */ jsxs20("span", {
         children: [
           expanded ? "Hide" : "Show",
-          " child parameters",
-          count !== undefined && ` (${count})`
+          " Child Attributes"
         ]
       })
     ]
@@ -1939,7 +1914,7 @@ function NestedParameterToggle({
 }
 
 // src/docskit/api/expandable-parameter.tsx
-import { jsx as jsx39, jsxs as jsxs21, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
 
 function ExpandableParameter({
   parameter,
@@ -1971,20 +1946,18 @@ function ExpandableParameter({
       parentPath,
       type: hasChildren ? "object" : type,
       required: isRequired,
-      expandable: hasChildren,
       description: parameter.description,
       anchorId: parentPath ? `${parentPath}${parameter.name}` : parameter.name,
-      showAnchor: level > 0,
       children: [
         enumValues.length > 0 && !nestedParams.length && /* @__PURE__ */ jsx39(EnumValuesSection, {
           values: enumValues
         }),
-        nestedParams.length > 0 && /* @__PURE__ */ jsxs21(Fragment3, {
+        nestedParams.length > 0 && /* @__PURE__ */ jsxs21("div", {
+          className: "mt-3 mb-1",
           children: [
             /* @__PURE__ */ jsx39(NestedParameterToggle, {
               expanded,
-              onToggle: handleToggle,
-              count: nestedParams.length
+              onToggle: handleToggle
             }),
             expanded && /* @__PURE__ */ jsx39(NestedParameterContainer, {
               level,

package/package.json

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