@openpkg-ts/react 0.2.0

package/dist/shared/chunk-0h2j0jvb.js

@@ -0,0 +1,670 @@
+"use client";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+
+// src/components/headless/CollapsibleMethod.tsx
+import { useEffect, useState } from "react";
+import { getMemberBadges, formatReturnType, formatSchema } from "@openpkg-ts/sdk";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+function formatParamPreview(params) {
+  if (!params || params.length === 0)
+    return "";
+  if (params.length === 1)
+    return params[0].name || "arg";
+  return `${params[0].name || "arg"}, ...`;
+}
+function CollapsibleMethod({
+  member,
+  defaultExpanded = false,
+  className,
+  renderHeader,
+  renderContent
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const sig = member.signatures?.[0];
+  const hasParams = sig?.parameters && sig.parameters.length > 0;
+  const returnType = formatReturnType(sig);
+  const paramPreview = formatParamPreview(sig?.parameters);
+  const badges = getMemberBadges(member);
+  const toggle = () => setExpanded(!expanded);
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.location.hash === `#${member.name}`) {
+      setExpanded(true);
+    }
+  }, [member.name]);
+  return /* @__PURE__ */ jsxs("div", {
+    id: member.name,
+    className,
+    "data-expanded": expanded,
+    children: [
+      renderHeader ? renderHeader(member, expanded, toggle) : /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        onClick: toggle,
+        "data-header": true,
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            "data-name": true,
+            children: [
+              member.name,
+              /* @__PURE__ */ jsxs("span", {
+                "data-params": true,
+                children: [
+                  "(",
+                  paramPreview,
+                  ")"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("span", {
+            "data-return": true,
+            children: returnType
+          }),
+          badges.length > 0 && /* @__PURE__ */ jsx("span", {
+            "data-badges": true,
+            children: badges.map((badge) => /* @__PURE__ */ jsx("span", {
+              "data-badge": badge,
+              children: badge
+            }, badge))
+          })
+        ]
+      }),
+      expanded && (renderContent ? renderContent(member) : /* @__PURE__ */ jsxs("div", {
+        "data-content": true,
+        children: [
+          member.description && /* @__PURE__ */ jsx("p", {
+            children: member.description
+          }),
+          hasParams && /* @__PURE__ */ jsxs("div", {
+            "data-params-section": true,
+            children: [
+              /* @__PURE__ */ jsx("h4", {
+                children: "Parameters"
+              }),
+              /* @__PURE__ */ jsx("ul", {
+                children: sig.parameters.map((param, index) => /* @__PURE__ */ jsxs("li", {
+                  children: [
+                    /* @__PURE__ */ jsxs("code", {
+                      children: [
+                        param.name,
+                        param.required === false && "?",
+                        ": ",
+                        formatSchema(param.schema)
+                      ]
+                    }),
+                    param.description && /* @__PURE__ */ jsx("span", {
+                      children: param.description
+                    })
+                  ]
+                }, param.name ?? index))
+              })
+            ]
+          }),
+          sig?.returns && returnType !== "void" && /* @__PURE__ */ jsxs("div", {
+            "data-returns-section": true,
+            children: [
+              /* @__PURE__ */ jsx("h4", {
+                children: "Returns"
+              }),
+              /* @__PURE__ */ jsx("code", {
+                children: returnType
+              }),
+              sig.returns.description && /* @__PURE__ */ jsx("p", {
+                children: sig.returns.description
+              })
+            ]
+          })
+        ]
+      }))
+    ]
+  });
+}
+
+// src/components/headless/ExampleBlock.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+function getExampleCode(example) {
+  if (typeof example === "string")
+    return example;
+  return example.code;
+}
+function getExampleTitle(example) {
+  if (typeof example === "string")
+    return;
+  return example.title;
+}
+function getExampleLanguage(example) {
+  if (typeof example === "string")
+    return "typescript";
+  return example.language ?? "typescript";
+}
+function cleanCode(code) {
+  let cleaned = code.trim();
+  if (cleaned.startsWith("```")) {
+    const lines = cleaned.split(`
+`);
+    lines.shift();
+    if (lines[lines.length - 1] === "```") {
+      lines.pop();
+    }
+    cleaned = lines.join(`
+`);
+  }
+  return cleaned;
+}
+function ExampleBlock({
+  examples,
+  className,
+  renderExample
+}) {
+  const [activeIndex, setActiveIndex] = useState2(0);
+  if (!examples?.length)
+    return null;
+  const showTabs = examples.length > 1;
+  const currentExample = examples[activeIndex];
+  const code = cleanCode(getExampleCode(currentExample));
+  if (renderExample) {
+    return /* @__PURE__ */ jsxs2("div", {
+      className,
+      children: [
+        showTabs && /* @__PURE__ */ jsx2("div", {
+          "data-tabs": true,
+          children: examples.map((example, index) => /* @__PURE__ */ jsx2("button", {
+            type: "button",
+            onClick: () => setActiveIndex(index),
+            "data-active": activeIndex === index,
+            children: getExampleTitle(example) ?? `Example ${index + 1}`
+          }, index))
+        }),
+        renderExample(currentExample, activeIndex)
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    className,
+    children: [
+      showTabs && /* @__PURE__ */ jsx2("div", {
+        "data-tabs": true,
+        children: examples.map((example, index) => /* @__PURE__ */ jsx2("button", {
+          type: "button",
+          onClick: () => setActiveIndex(index),
+          "data-active": activeIndex === index,
+          children: getExampleTitle(example) ?? `Example ${index + 1}`
+        }, index))
+      }),
+      /* @__PURE__ */ jsx2("pre", {
+        children: /* @__PURE__ */ jsx2("code", {
+          "data-language": getExampleLanguage(currentExample),
+          children: code
+        })
+      })
+    ]
+  });
+}
+
+// src/components/headless/ExpandableProperty.tsx
+import { useState as useState3 } from "react";
+import { formatSchema as formatSchema2 } from "@openpkg-ts/sdk";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+function getNestedProperties(schema) {
+  if (!schema || typeof schema !== "object")
+    return null;
+  const s = schema;
+  if (s.type === "object" && s.properties && typeof s.properties === "object") {
+    return s.properties;
+  }
+  return null;
+}
+function getRequiredFields(schema) {
+  if (!schema || typeof schema !== "object")
+    return [];
+  const s = schema;
+  if (Array.isArray(s.required)) {
+    return s.required;
+  }
+  return [];
+}
+function countProperties(schema) {
+  const props = getNestedProperties(schema);
+  return props ? Object.keys(props).length : 0;
+}
+function NestedProperty({
+  name,
+  schema,
+  required = false,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState3(false);
+  const type = formatSchema2(schema);
+  const nestedProps = getNestedProperties(schema);
+  const nestedCount = countProperties(schema);
+  const hasNested = nestedCount > 0;
+  const schemaObj = schema;
+  const description = schemaObj?.description;
+  return /* @__PURE__ */ jsxs3("div", {
+    "data-property": name,
+    "data-depth": depth,
+    children: [
+      /* @__PURE__ */ jsxs3("div", {
+        "data-row": true,
+        children: [
+          /* @__PURE__ */ jsxs3("span", {
+            "data-name": true,
+            children: [
+              name,
+              !required && "?",
+              ":"
+            ]
+          }),
+          /* @__PURE__ */ jsx3("span", {
+            "data-type": true,
+            children: hasNested ? "object" : type
+          }),
+          description && /* @__PURE__ */ jsx3("span", {
+            "data-description": true,
+            children: description
+          }),
+          hasNested && /* @__PURE__ */ jsxs3("button", {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            "data-expand": true,
+            children: [
+              nestedCount,
+              " properties"
+            ]
+          })
+        ]
+      }),
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx3("div", {
+        "data-nested": true,
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx3(NestedProperty, {
+          name: propName,
+          schema: propSchema,
+          required: getRequiredFields(schema).includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
+function ExpandableProperty({
+  param,
+  depth = 0,
+  className
+}) {
+  const [expanded, setExpanded] = useState3(false);
+  const type = formatSchema2(param.schema);
+  const isOptional = param.required === false;
+  const nestedProps = getNestedProperties(param.schema);
+  const nestedCount = countProperties(param.schema);
+  const hasNested = nestedCount > 0;
+  return /* @__PURE__ */ jsxs3("div", {
+    className,
+    "data-param": param.name,
+    "data-depth": depth,
+    children: [
+      /* @__PURE__ */ jsxs3("div", {
+        "data-row": true,
+        children: [
+          /* @__PURE__ */ jsxs3("span", {
+            "data-name": true,
+            children: [
+              param.name,
+              isOptional && "?",
+              ":"
+            ]
+          }),
+          /* @__PURE__ */ jsx3("span", {
+            "data-type": true,
+            children: hasNested ? "object" : type
+          }),
+          param.description && /* @__PURE__ */ jsx3("span", {
+            "data-description": true,
+            children: param.description
+          }),
+          hasNested && /* @__PURE__ */ jsxs3("button", {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            "data-expand": true,
+            children: [
+              nestedCount,
+              " properties"
+            ]
+          })
+        ]
+      }),
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx3("div", {
+        "data-nested": true,
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx3(NestedProperty, {
+          name: propName,
+          schema: propSchema,
+          required: getRequiredFields(param.schema).includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
+
+// src/components/headless/MembersTable.tsx
+import { getMemberBadges as getMemberBadges2, formatSchema as formatSchema3 } from "@openpkg-ts/sdk";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+
+function groupMembersByKind(members) {
+  const groups = {
+    constructors: [],
+    properties: [],
+    methods: [],
+    accessors: [],
+    other: []
+  };
+  for (const member of members) {
+    const kind = member.kind?.toLowerCase() ?? "other";
+    if (kind === "constructor") {
+      groups.constructors.push(member);
+    } else if (kind === "property" || kind === "field") {
+      groups.properties.push(member);
+    } else if (kind === "method" || kind === "function") {
+      groups.methods.push(member);
+    } else if (kind === "getter" || kind === "setter" || kind === "accessor") {
+      groups.accessors.push(member);
+    } else {
+      groups.other.push(member);
+    }
+  }
+  return groups;
+}
+function MemberRow({ member }) {
+  const type = formatSchema3(member.schema);
+  const sig = member.signatures?.[0];
+  let signature = "";
+  if (sig) {
+    const params = sig.parameters?.map((p) => {
+      const optional = p.required === false ? "?" : "";
+      return `${p.name}${optional}: ${formatSchema3(p.schema)}`;
+    }) ?? [];
+    const returnType = formatSchema3(sig.returns?.schema) ?? "void";
+    signature = `(${params.join(", ")}): ${returnType}`;
+  }
+  const badges = getMemberBadges2(member);
+  return /* @__PURE__ */ jsxs4("div", {
+    "data-member": member.name,
+    children: [
+      /* @__PURE__ */ jsxs4("div", {
+        children: [
+          /* @__PURE__ */ jsxs4("code", {
+            children: [
+              member.name,
+              signature
+            ]
+          }),
+          badges.length > 0 && /* @__PURE__ */ jsx4("span", {
+            children: badges.map((badge) => /* @__PURE__ */ jsx4("span", {
+              "data-badge": badge,
+              children: badge
+            }, badge))
+          })
+        ]
+      }),
+      !signature && type !== "unknown" && /* @__PURE__ */ jsx4("code", {
+        children: type
+      }),
+      member.description && /* @__PURE__ */ jsx4("p", {
+        children: member.description
+      })
+    ]
+  });
+}
+function MembersTable({
+  members,
+  className,
+  groupByKind = false,
+  renderMember
+}) {
+  if (!members?.length)
+    return null;
+  if (!groupByKind) {
+    return /* @__PURE__ */ jsx4("div", {
+      className,
+      children: members.map((member, index) => renderMember ? renderMember(member, index) : /* @__PURE__ */ jsx4(MemberRow, {
+        member
+      }, member.name ?? index))
+    });
+  }
+  const groups = groupMembersByKind(members);
+  return /* @__PURE__ */ jsxs4("div", {
+    className,
+    children: [
+      groups.constructors.length > 0 && /* @__PURE__ */ jsxs4("section", {
+        "data-group": "constructors",
+        children: [
+          /* @__PURE__ */ jsx4("h4", {
+            children: "Constructor"
+          }),
+          groups.constructors.map((member, index) => renderMember ? renderMember(member, index) : /* @__PURE__ */ jsx4(MemberRow, {
+            member
+          }, member.name ?? index))
+        ]
+      }),
+      groups.properties.length > 0 && /* @__PURE__ */ jsxs4("section", {
+        "data-group": "properties",
+        children: [
+          /* @__PURE__ */ jsx4("h4", {
+            children: "Properties"
+          }),
+          groups.properties.map((member, index) => renderMember ? renderMember(member, index) : /* @__PURE__ */ jsx4(MemberRow, {
+            member
+          }, member.name ?? index))
+        ]
+      }),
+      groups.methods.length > 0 && /* @__PURE__ */ jsxs4("section", {
+        "data-group": "methods",
+        children: [
+          /* @__PURE__ */ jsx4("h4", {
+            children: "Methods"
+          }),
+          groups.methods.map((member, index) => renderMember ? renderMember(member, index) : /* @__PURE__ */ jsx4(MemberRow, {
+            member
+          }, member.name ?? index))
+        ]
+      }),
+      groups.accessors.length > 0 && /* @__PURE__ */ jsxs4("section", {
+        "data-group": "accessors",
+        children: [
+          /* @__PURE__ */ jsx4("h4", {
+            children: "Accessors"
+          }),
+          groups.accessors.map((member, index) => renderMember ? renderMember(member, index) : /* @__PURE__ */ jsx4(MemberRow, {
+            member
+          }, member.name ?? index))
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/headless/ParamTable.tsx
+import { formatSchema as formatSchema4 } from "@openpkg-ts/sdk";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+
+function isParameter(item) {
+  return "required" in item;
+}
+function ParamRow({ item, showRequired = true }) {
+  const name = item.name ?? "arg";
+  const type = formatSchema4(item.schema);
+  const description = item.description ?? "";
+  const required = isParameter(item) ? item.required : true;
+  return /* @__PURE__ */ jsxs5("tr", {
+    children: [
+      /* @__PURE__ */ jsxs5("td", {
+        children: [
+          /* @__PURE__ */ jsx5("code", {
+            children: name
+          }),
+          showRequired && required && /* @__PURE__ */ jsx5("span", {
+            children: "*"
+          }),
+          showRequired && !required && /* @__PURE__ */ jsx5("span", {
+            children: "?"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx5("td", {
+        children: /* @__PURE__ */ jsx5("code", {
+          children: type
+        })
+      }),
+      /* @__PURE__ */ jsx5("td", {
+        children: description
+      })
+    ]
+  });
+}
+function ParamTable({
+  items,
+  showRequired = true,
+  className,
+  renderRow
+}) {
+  if (!items?.length)
+    return null;
+  return /* @__PURE__ */ jsxs5("table", {
+    className,
+    children: [
+      /* @__PURE__ */ jsx5("thead", {
+        children: /* @__PURE__ */ jsxs5("tr", {
+          children: [
+            /* @__PURE__ */ jsx5("th", {
+              children: "Name"
+            }),
+            /* @__PURE__ */ jsx5("th", {
+              children: "Type"
+            }),
+            /* @__PURE__ */ jsx5("th", {
+              children: "Description"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx5("tbody", {
+        children: items.map((item, index) => renderRow ? renderRow(item, index) : /* @__PURE__ */ jsx5(ParamRow, {
+          item,
+          showRequired
+        }, item.name ?? index))
+      })
+    ]
+  });
+}
+
+// src/components/headless/Signature.tsx
+import { buildSignatureString } from "@openpkg-ts/sdk";
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+function Signature({
+  export: exp,
+  signatureIndex = 0,
+  className,
+  children
+}) {
+  const signature = buildSignatureString(exp, signatureIndex);
+  if (children) {
+    return children(signature);
+  }
+  return /* @__PURE__ */ jsx6("code", {
+    className,
+    children: signature
+  });
+}
+
+// src/components/headless/TypeTable.tsx
+import { formatSchema as formatSchema5 } from "@openpkg-ts/sdk";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+
+function isParameter2(item) {
+  return "required" in item;
+}
+function TypeTable({
+  items,
+  showRequired = true,
+  className,
+  renderRow
+}) {
+  if (!items?.length)
+    return null;
+  return /* @__PURE__ */ jsxs6("table", {
+    className,
+    children: [
+      /* @__PURE__ */ jsx7("thead", {
+        children: /* @__PURE__ */ jsxs6("tr", {
+          children: [
+            /* @__PURE__ */ jsx7("th", {
+              children: "Name"
+            }),
+            /* @__PURE__ */ jsx7("th", {
+              children: "Type"
+            }),
+            /* @__PURE__ */ jsx7("th", {
+              children: "Description"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx7("tbody", {
+        children: items.map((item, index) => {
+          if (renderRow) {
+            return renderRow(item, index);
+          }
+          const name = item.name ?? `arg${index}`;
+          const type = formatSchema5(item.schema);
+          const description = item.description ?? "";
+          const required = isParameter2(item) ? item.required : true;
+          return /* @__PURE__ */ jsxs6("tr", {
+            children: [
+              /* @__PURE__ */ jsxs6("td", {
+                children: [
+                  /* @__PURE__ */ jsx7("code", {
+                    children: name
+                  }),
+                  showRequired && required && /* @__PURE__ */ jsx7("span", {
+                    children: "*"
+                  }),
+                  showRequired && !required && /* @__PURE__ */ jsx7("span", {
+                    children: "?"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx7("td", {
+                children: /* @__PURE__ */ jsx7("code", {
+                  children: type
+                })
+              }),
+              /* @__PURE__ */ jsx7("td", {
+                children: description
+              })
+            ]
+          }, name);
+        })
+      })
+    ]
+  });
+}
+export { __toESM, __commonJS, CollapsibleMethod, getExampleCode, getExampleTitle, getExampleLanguage, cleanCode, ExampleBlock, NestedProperty, ExpandableProperty, groupMembersByKind, MemberRow, MembersTable, ParamRow, ParamTable, Signature, TypeTable };