@openrails/contentkit-ui 0.104.0-rc.1 → 0.104.0-rc.3

package/dist/components/groups/header.js

@@ -5,127 +5,135 @@ import { Button as a } from "../../ui/button.js";
 import { Skeleton as o } from "../../ui/skeleton.js";
 import { contentError as s, formatDate as c } from "../social/parts.js";
 import { GroupCover as l, GroupLink as u, labelOf as d } from "./parts.js";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { cn as m } from "cn";
+import { ScopedGroups as f } from "./scoped.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { cn as h } from "cn";
 //#region src/components/groups/header.tsx
-function h(e, t, n, r) {
+function g(e, t, n, r) {
 	return typeof n == "boolean" ? e.t(n ? "groups.yes" : "groups.no") : t?.type === "time" && typeof n == "string" ? c(e, n) : t?.type === "int" && typeof n == "number" ? new Intl.NumberFormat(e.language).format(n) : t?.type === "enum" && typeof n == "string" ? d(r, n) : String(n);
 }
-function g(c) {
-	let g = t(), { t: _ } = g, v = e(), y = r(c.group ? null : c.id, {
+function _(c) {
+	let _ = t(), { t: v } = _, y = e(), b = r(c.group ? null : c.id, {
 		language: c.language,
 		client: c.client
-	}), { kinds: b } = i({ client: c.client }), x = c.group ?? y.group, S = (e) => /* @__PURE__ */ f(n, {
+	}), { kinds: x } = i({ client: c.client }), S = c.group ?? b.group, C = (e) => /* @__PURE__ */ p(n, {
 		appearance: c.appearance,
-		className: m("grid gap-4 text-sm", c.className),
+		className: h("grid gap-4 text-sm", c.className),
 		"data-ckui": "group-header",
 		children: e
 	});
-	if (!x) return y.error ? S(/* @__PURE__ */ p("div", {
+	if (!S) return b.error ? C(/* @__PURE__ */ m("div", {
 		role: "alert",
 		className: "grid justify-items-start gap-2",
-		children: [/* @__PURE__ */ f("p", {
+		children: [/* @__PURE__ */ p("p", {
 			className: "text-destructive",
-			children: s(g, y.error)
-		}), /* @__PURE__ */ f(a, {
+			children: s(_, b.error)
+		}), /* @__PURE__ */ p(a, {
 			size: "sm",
 			variant: "outline",
-			onClick: y.reload,
-			children: _("common.retry")
+			onClick: b.reload,
+			children: v("common.retry")
 		})]
-	})) : S(/* @__PURE__ */ f(o, { className: "h-32 w-full" }));
-	let C = c.language ?? x.name_language, w = x.text.find((e) => e.language === C) ?? x.text.find((e) => e.description), T = x.names.filter((e) => e.name !== x.name), E = b?.entity_kinds?.[x.kind]?.attributes ?? {}, D = Object.entries(x.attributes).filter(([, e]) => e != null && e !== ""), O = x.counts.filter((e) => e.language === (c.language ?? "")).reduce((e, t) => e + t.count, 0);
-	return S(/* @__PURE__ */ p("div", {
+	})) : C(/* @__PURE__ */ p(o, { className: "h-32 w-full" }));
+	let w = c.language ?? S.name_language, T = S.text.find((e) => e.language === w) ?? S.text.find((e) => e.description), E = S.names.filter((e) => e.name !== S.name), D = x?.entity_kinds?.[S.kind]?.attributes ?? {}, O = Object.entries(S.attributes).filter(([, e]) => e != null && e !== ""), k = S.counts.filter((e) => e.language === (c.language ?? "")).reduce((e, t) => e + t.count, 0);
+	return C(/* @__PURE__ */ m("div", {
 		className: "grid gap-4 sm:grid-cols-[10rem_minmax(0,1fr)]",
-		"data-kind": x.kind,
-		children: [/* @__PURE__ */ f(l, {
-			group: x,
+		"data-kind": S.kind,
+		children: [/* @__PURE__ */ p(l, {
+			group: S,
 			className: "aspect-[3/4] w-32 sm:w-40"
-		}), /* @__PURE__ */ p("div", {
+		}), /* @__PURE__ */ m("div", {
 			className: "grid content-start gap-3",
 			children: [
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ m("div", {
 					className: "grid gap-1",
 					children: [
-						(x.parent || x.scope) && /* @__PURE__ */ f("p", {
+						(S.parent || S.scope) && /* @__PURE__ */ p("p", {
 							className: "text-xs text-muted-foreground",
 							"data-ckui": "group-parent",
-							children: [x.scope, x.parent].filter((e, t, n) => !!e && n.findIndex((t) => t?.id === e.id) === t).map((e, t) => /* @__PURE__ */ p("span", { children: [t > 0 && " · ", /* @__PURE__ */ f(u, {
+							children: [S.scope, S.parent].filter((e, t, n) => !!e && n.findIndex((t) => t?.id === e.id) === t).map((e, t) => /* @__PURE__ */ m("span", { children: [t > 0 && " · ", /* @__PURE__ */ p(u, {
 								group: e,
 								href: c.href,
 								className: "hover:underline",
 								children: e.name || e.slug
 							})] }, e.id))
 						}),
-						/* @__PURE__ */ f("h1", {
+						/* @__PURE__ */ p("h1", {
 							className: "text-xl font-semibold break-words",
-							children: x.name || x.slug
+							children: S.name || S.slug
 						}),
-						/* @__PURE__ */ f("p", {
+						/* @__PURE__ */ p("p", {
 							className: "text-xs text-muted-foreground tabular-nums",
-							children: g.plural("groups.items", O)
+							children: _.plural("groups.items", k)
 						})
 					]
 				}),
-				T.length > 0 && /* @__PURE__ */ p("p", {
+				E.length > 0 && /* @__PURE__ */ m("p", {
 					className: "text-muted-foreground",
 					"data-ckui": "group-names",
-					children: [/* @__PURE__ */ p("span", {
+					children: [/* @__PURE__ */ m("span", {
 						className: "sr-only",
-						children: [_("groups.alsoKnownAs"), " "]
-					}), T.map((e, t) => /* @__PURE__ */ p("span", {
+						children: [v("groups.alsoKnownAs"), " "]
+					}), E.map((e, t) => /* @__PURE__ */ m("span", {
 						lang: e.language,
 						children: [
 							t > 0 && " · ",
 							e.name,
-							e.kind === "name" && /* @__PURE__ */ p("span", {
+							e.kind === "name" && /* @__PURE__ */ m("span", {
 								className: "text-xs",
 								children: [
 									" (",
-									v(e.language),
+									y(e.language),
 									")"
 								]
 							})
 						]
 					}, `${e.language}:${e.name}`))]
 				}),
-				w?.description && /* @__PURE__ */ f("p", {
+				T?.description && /* @__PURE__ */ p("p", {
 					className: "break-words whitespace-pre-line",
-					lang: w.language,
+					lang: T.language,
 					"data-ckui": "group-description",
-					children: w.description
+					children: T.description
 				}),
-				D.length > 0 && /* @__PURE__ */ f("dl", {
+				O.length > 0 && /* @__PURE__ */ p("dl", {
 					className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1",
 					"data-ckui": "group-attributes",
-					children: D.map(([e, t]) => /* @__PURE__ */ p("div", {
+					children: O.map(([e, t]) => /* @__PURE__ */ m("div", {
 						className: "contents",
-						children: [/* @__PURE__ */ f("dt", {
+						children: [/* @__PURE__ */ p("dt", {
 							className: "text-muted-foreground",
 							children: d(c.labels, e)
-						}), /* @__PURE__ */ f("dd", {
+						}), /* @__PURE__ */ p("dd", {
 							className: "break-words",
-							children: h(g, E[e], t, c.labels)
+							children: g(_, D[e], t, c.labels)
 						})]
 					}, e))
 				}),
-				x.children.length > 0 && /* @__PURE__ */ f("nav", {
-					"aria-label": _("groups.children"),
+				S.children.length > 0 && /* @__PURE__ */ p("nav", {
+					"aria-label": v("groups.children"),
 					className: "flex flex-wrap gap-2",
 					"data-ckui": "group-children",
-					children: x.children.map((e) => /* @__PURE__ */ f(u, {
+					children: S.children.map((e) => /* @__PURE__ */ p(u, {
 						group: e,
 						href: c.href,
 						className: "rounded-md border border-border px-2 py-1 hover:bg-muted",
 						children: e.name || e.slug
 					}, e.id))
 				}),
+				/* @__PURE__ */ p(f, {
+					group: S,
+					language: c.language,
+					labels: c.labels,
+					href: c.href,
+					client: c.client
+				}),
 				c.children
 			]
 		})]
 	}));
 }
 //#endregion
-export { g as GroupHeader, h as formatAttribute };
+export { _ as GroupHeader, g as formatAttribute };
 
 //# sourceMappingURL=header.js.map

package/dist/components/groups/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","names":[],"sources":["../../../src/components/groups/header.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport type { ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { Attribute, GroupDetail } from \"../../client/generated/wire.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { Translator } from \"../../i18n/messages.js\";\nimport { useGroup, useKinds } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError, formatDate } from \"../social/parts.js\";\nimport { GroupCover, GroupLink, labelOf, type GroupLike, type Labels } from \"./parts.js\";\n\nexport interface GroupHeaderProps {\n  /** The group the host already read; or give id. */\n  group?: GroupDetail;\n  id?: string;\n  /** Text, names and counts in this language; default the provider's. */\n  language?: string;\n  labels?: Labels;\n  /** A group's link (parent, scope, children); default its canonical path. */\n  href?: (group: GroupLike) => string | undefined;\n  /** Below the description: the host's actions. */\n  children?: ReactNode;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A value as its attribute's type shows it. */\nexport function formatAttribute(m: Translator, spec: Attribute | undefined, value: unknown, labels?: Labels): string {\n  if (typeof value === \"boolean\") return m.t(value ? \"groups.yes\" : \"groups.no\");\n  if (spec?.type === \"time\" && typeof value === \"string\") return formatDate(m, value);\n  if (spec?.type === \"int\" && typeof value === \"number\") return new Intl.NumberFormat(m.language).format(value);\n  if (spec?.type === \"enum\" && typeof value === \"string\") return labelOf(labels, value);\n  return String(value);\n}\n\n/** A group page's header: cover, name, other names, description, attributes, parent, scope, sub-groups and count. */\nexport function GroupHeader(p: GroupHeaderProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const read = useGroup(p.group ? null : p.id, { language: p.language, client: p.client });\n  const { kinds } = useKinds({ client: p.client });\n  const g = p.group ?? read.group;\n  const root = (children: ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"group-header\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (!g) {\n    if (read.error)\n      return root(\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, read.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={read.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>,\n      );\n    return root(<Skeleton className=\"h-32 w-full\" />);\n  }\n  const lang = p.language ?? g.name_language;\n  const text = g.text.find((x) => x.language === lang) ?? g.text.find((x) => x.description);\n  const others = g.names.filter((n) => n.name !== g.name);\n  const declared = kinds?.entity_kinds?.[g.kind]?.attributes ?? {};\n  const attributes = Object.entries(g.attributes).filter(([, v]) => v !== null && v !== undefined && v !== \"\");\n  const count = g.counts.filter((c) => c.language === (p.language ?? \"\")).reduce((n, c) => n + c.count, 0);\n  return root(\n    <div className=\"grid gap-4 sm:grid-cols-[10rem_minmax(0,1fr)]\" data-kind={g.kind}>\n      <GroupCover group={g} className=\"aspect-[3/4] w-32 sm:w-40\" />\n      <div className=\"grid content-start gap-3\">\n        <div className=\"grid gap-1\">\n          {(g.parent || g.scope) && (\n            <p className=\"text-xs text-muted-foreground\" data-ckui=\"group-parent\">\n              {[g.scope, g.parent]\n                .filter((x, i, all): x is NonNullable<typeof x> => !!x && all.findIndex((y) => y?.id === x.id) === i)\n                .map((x, i) => (\n                  <span key={x.id}>\n                    {i > 0 && \" · \"}\n                    <GroupLink group={x} href={p.href} className=\"hover:underline\">\n                      {x.name || x.slug}\n                    </GroupLink>\n                  </span>\n                ))}\n            </p>\n          )}\n          <h1 className=\"text-xl font-semibold break-words\">{g.name || g.slug}</h1>\n          <p className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", count)}</p>\n        </div>\n        {others.length > 0 && (\n          <p className=\"text-muted-foreground\" data-ckui=\"group-names\">\n            <span className=\"sr-only\">{t(\"groups.alsoKnownAs\")} </span>\n            {others.map((n, i) => (\n              <span key={`${n.language}:${n.name}`} lang={n.language}>\n                {i > 0 && \" · \"}\n                {n.name}\n                {n.kind === \"name\" && <span className=\"text-xs\"> ({languageName(n.language)})</span>}\n              </span>\n            ))}\n          </p>\n        )}\n        {text?.description && (\n          <p className=\"break-words whitespace-pre-line\" lang={text.language} data-ckui=\"group-description\">\n            {text.description}\n          </p>\n        )}\n        {attributes.length > 0 && (\n          <dl className=\"grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1\" data-ckui=\"group-attributes\">\n            {attributes.map(([name, v]) => (\n              <div key={name} className=\"contents\">\n                <dt className=\"text-muted-foreground\">{labelOf(p.labels, name)}</dt>\n                <dd className=\"break-words\">{formatAttribute(m, declared[name], v, p.labels)}</dd>\n              </div>\n            ))}\n          </dl>\n        )}\n        {g.children.length > 0 && (\n          <nav aria-label={t(\"groups.children\")} className=\"flex flex-wrap gap-2\" data-ckui=\"group-children\">\n            {g.children.map((c) => (\n              <GroupLink key={c.id} group={c} href={p.href} className=\"rounded-md border border-border px-2 py-1 hover:bg-muted\">\n                {c.name || c.slug}\n              </GroupLink>\n            ))}\n          </nav>\n        )}\n        {p.children}\n      </div>\n    </div>,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"header.js","names":[],"sources":["../../../src/components/groups/header.tsx"],"sourcesContent":["import { cn } from \"cn\";\nimport type { ReactNode } from \"react\";\nimport type { ContentKitUiAppearance } from \"../../appearance.js\";\nimport type { ContentKitClient } from \"../../client/client.js\";\nimport type { Attribute, GroupDetail } from \"../../client/generated/wire.js\";\nimport { useLanguageName, useMessages } from \"../../i18n/context.js\";\nimport type { Translator } from \"../../i18n/messages.js\";\nimport { useGroup, useKinds } from \"../../react/groups.js\";\nimport { ContentKitUiRoot } from \"../../scope.js\";\nimport { Button } from \"#ckui/ui/button\";\nimport { Skeleton } from \"#ckui/ui/skeleton\";\nimport { contentError, formatDate } from \"../social/parts.js\";\nimport { GroupCover, GroupLink, labelOf, type GroupLike, type Labels } from \"./parts.js\";\nimport { ScopedGroups } from \"./scoped.js\";\n\nexport interface GroupHeaderProps {\n  /** The group the host already read; or give id. */\n  group?: GroupDetail;\n  id?: string;\n  /** Text, names and counts in this language; default the provider's. */\n  language?: string;\n  labels?: Labels;\n  /** A group's link (parent, scope, children); default its canonical path. */\n  href?: (group: GroupLike) => string | undefined;\n  /** Below the description: the host's actions. */\n  children?: ReactNode;\n  client?: ContentKitClient;\n  className?: string;\n  appearance?: ContentKitUiAppearance;\n}\n\n/** A value as its attribute's type shows it. */\nexport function formatAttribute(m: Translator, spec: Attribute | undefined, value: unknown, labels?: Labels): string {\n  if (typeof value === \"boolean\") return m.t(value ? \"groups.yes\" : \"groups.no\");\n  if (spec?.type === \"time\" && typeof value === \"string\") return formatDate(m, value);\n  if (spec?.type === \"int\" && typeof value === \"number\") return new Intl.NumberFormat(m.language).format(value);\n  if (spec?.type === \"enum\" && typeof value === \"string\") return labelOf(labels, value);\n  return String(value);\n}\n\n/** A group page's header: cover, name, other names, description, attributes, parent, scope, sub-groups and count. */\nexport function GroupHeader(p: GroupHeaderProps) {\n  const m = useMessages();\n  const { t } = m;\n  const languageName = useLanguageName();\n  const read = useGroup(p.group ? null : p.id, { language: p.language, client: p.client });\n  const { kinds } = useKinds({ client: p.client });\n  const g = p.group ?? read.group;\n  const root = (children: ReactNode) => (\n    <ContentKitUiRoot appearance={p.appearance} className={cn(\"grid gap-4 text-sm\", p.className)} data-ckui=\"group-header\">\n      {children}\n    </ContentKitUiRoot>\n  );\n  if (!g) {\n    if (read.error)\n      return root(\n        <div role=\"alert\" className=\"grid justify-items-start gap-2\">\n          <p className=\"text-destructive\">{contentError(m, read.error)}</p>\n          <Button size=\"sm\" variant=\"outline\" onClick={read.reload}>\n            {t(\"common.retry\")}\n          </Button>\n        </div>,\n      );\n    return root(<Skeleton className=\"h-32 w-full\" />);\n  }\n  const lang = p.language ?? g.name_language;\n  const text = g.text.find((x) => x.language === lang) ?? g.text.find((x) => x.description);\n  const others = g.names.filter((n) => n.name !== g.name);\n  const declared = kinds?.entity_kinds?.[g.kind]?.attributes ?? {};\n  const attributes = Object.entries(g.attributes).filter(([, v]) => v !== null && v !== undefined && v !== \"\");\n  const count = g.counts.filter((c) => c.language === (p.language ?? \"\")).reduce((n, c) => n + c.count, 0);\n  return root(\n    <div className=\"grid gap-4 sm:grid-cols-[10rem_minmax(0,1fr)]\" data-kind={g.kind}>\n      <GroupCover group={g} className=\"aspect-[3/4] w-32 sm:w-40\" />\n      <div className=\"grid content-start gap-3\">\n        <div className=\"grid gap-1\">\n          {(g.parent || g.scope) && (\n            <p className=\"text-xs text-muted-foreground\" data-ckui=\"group-parent\">\n              {[g.scope, g.parent]\n                .filter((x, i, all): x is NonNullable<typeof x> => !!x && all.findIndex((y) => y?.id === x.id) === i)\n                .map((x, i) => (\n                  <span key={x.id}>\n                    {i > 0 && \" · \"}\n                    <GroupLink group={x} href={p.href} className=\"hover:underline\">\n                      {x.name || x.slug}\n                    </GroupLink>\n                  </span>\n                ))}\n            </p>\n          )}\n          <h1 className=\"text-xl font-semibold break-words\">{g.name || g.slug}</h1>\n          <p className=\"text-xs text-muted-foreground tabular-nums\">{m.plural(\"groups.items\", count)}</p>\n        </div>\n        {others.length > 0 && (\n          <p className=\"text-muted-foreground\" data-ckui=\"group-names\">\n            <span className=\"sr-only\">{t(\"groups.alsoKnownAs\")} </span>\n            {others.map((n, i) => (\n              <span key={`${n.language}:${n.name}`} lang={n.language}>\n                {i > 0 && \" · \"}\n                {n.name}\n                {n.kind === \"name\" && <span className=\"text-xs\"> ({languageName(n.language)})</span>}\n              </span>\n            ))}\n          </p>\n        )}\n        {text?.description && (\n          <p className=\"break-words whitespace-pre-line\" lang={text.language} data-ckui=\"group-description\">\n            {text.description}\n          </p>\n        )}\n        {attributes.length > 0 && (\n          <dl className=\"grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1\" data-ckui=\"group-attributes\">\n            {attributes.map(([name, v]) => (\n              <div key={name} className=\"contents\">\n                <dt className=\"text-muted-foreground\">{labelOf(p.labels, name)}</dt>\n                <dd className=\"break-words\">{formatAttribute(m, declared[name], v, p.labels)}</dd>\n              </div>\n            ))}\n          </dl>\n        )}\n        {g.children.length > 0 && (\n          <nav aria-label={t(\"groups.children\")} className=\"flex flex-wrap gap-2\" data-ckui=\"group-children\">\n            {g.children.map((c) => (\n              <GroupLink key={c.id} group={c} href={p.href} className=\"rounded-md border border-border px-2 py-1 hover:bg-muted\">\n                {c.name || c.slug}\n              </GroupLink>\n            ))}\n          </nav>\n        )}\n        <ScopedGroups group={g} language={p.language} labels={p.labels} href={p.href} client={p.client} />\n        {p.children}\n      </div>\n    </div>,\n  );\n}\n"],"mappings":"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"}

package/dist/components/groups/index.d.ts

@@ -1,6 +1,8 @@
 export { GroupDirectory, type GroupDirectoryProps } from './directory.js';
 export { GroupHeader, formatAttribute, type GroupHeaderProps } from './header.js';
 export { GroupEditor, GroupMergeDialog, type GroupEditorProps, type GroupMergeDialogProps } from './editor.js';
-export { GroupMembers, MembershipEditor, type GroupMembersProps, type MembershipEditorProps, type VersionChoice } from './memberships.js';
+export { GroupMembers, type GroupMembersProps } from './group-members.js';
+export { MembershipEditor, type MembershipEditorProps, type VersionChoice } from './memberships.js';
 export { GroupBanner, GroupImageEditor, MembershipBox, type GroupBannerProps, type GroupImageEditorProps, type MembershipBoxProps } from './banner.js';
+export { ScopedGroups, type ScopedGroupsProps } from './scoped.js';
 export { GroupAvatar, GroupCover, GroupLink, GroupPicker, labelOf, type GroupCoverProps, type GroupLike, type GroupPickerProps, type Labels } from './parts.js';

package/dist/components/groups/memberships.d.ts

@@ -1,14 +1,10 @@
-import { ReactNode } from 'react';
 import { ContentKitUiAppearance } from '../../appearance.js';
 import { ContentKitClient } from '../../client/client.js';
-import { ContentMemberships, GroupCard, GroupDetail, GroupKind, Membership } from '../../client/generated/wire.js';
+import { ContentMemberships } from '../../client/generated/wire.js';
 import { ContentKitErrorHandler } from '../../react/context.js';
+import { VersionChoice } from './entity-chips.js';
 import { Labels } from './parts.js';
-/** A version a membership may target. */
-export interface VersionChoice {
-    id: string;
-    label: string;
-}
+export type { VersionChoice } from './entity-chips.js';
 export interface MembershipEditorProps {
     /** The content whose memberships are edited, its versions' included. */
     content: string;
@@ -36,32 +32,3 @@ export interface MembershipEditorProps {
  * content for the kinds shown.
  */
 export declare function MembershipEditor(p: MembershipEditorProps): import('react').JSX.Element;
-export declare function MembershipRow({ m: x, card, spec, labels, versions, versionLabel, onChange, onRemove, }: {
-    m: Membership;
-    card?: GroupCard;
-    spec: GroupKind;
-    labels?: Labels;
-    versions?: readonly VersionChoice[];
-    versionLabel: (id: string) => string;
-    onChange: (patch: Partial<Membership>) => void;
-    onRemove: () => void;
-}): import('react').JSX.Element;
-export interface GroupMembersProps {
-    group: Pick<GroupDetail, "id" | "kind" | "name" | "slug" | "cover">;
-    labels?: Labels;
-    /** One member, e.g. a link with its title; default its content id. */
-    renderContent?: (member: Membership) => ReactNode;
-    /** Select a member's cover as the group's. */
-    onUseCover?: (contentId: string) => Promise<unknown>;
-    pageSize?: number;
-    client?: ContentKitClient;
-    onError?: ContentKitErrorHandler;
-    className?: string;
-    appearance?: ContentKitUiAppearance;
-}
-/**
- * Staff: a group's members in member order: add by content (and version),
- * remove, reorder an ordered group, edit windows, accept proposed members,
- * and use a member's cover as the group's.
- */
-export declare function GroupMembers(p: GroupMembersProps): import('react').JSX.Element;