@openpkg-ts/ui 0.5.0 → 0.5.2

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;
@@ -288,8 +293,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 +304,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 +351,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") */
@@ -664,7 +669,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

@@ -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.2",
   "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) */