@dloizides/ui-card-roster 0.1.0

package/dist/index.js

@@ -0,0 +1,654 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var uiFeedback = require('@dloizides/ui-feedback');
+var uiLayout = require('@dloizides/ui-layout');
+var jsxRuntime = require('react/jsx-runtime');
+var uiMotion = require('@dloizides/ui-motion');
+
+// src/components/CardRoster.tsx
+
+// src/constants.ts
+var MIN_TOUCH_TARGET = 44;
+var DEFAULT_CARD_WIDTH = 168;
+var SPLIT_EDITOR_WIDTH = 400;
+var SPACE_XS = 4;
+var SPACE_S = 8;
+var SPACE_M = 12;
+var SPACE_L = 16;
+var RADIUS_S = 8;
+var RADIUS_M = 12;
+var BORDER_WIDTH = 1;
+var ACTIVE_BORDER_WIDTH = 2;
+var TITLE_FONT_SIZE = 17;
+var BODY_FONT_SIZE = 15;
+var SMALL_FONT_SIZE = 13;
+var PRESSED_OPACITY = 0.7;
+var DISABLED_OPACITY = 0.4;
+var BUSY_OVERLAY_OPACITY = 0.9;
+var GROUP_TITLE_MIN_WIDTH = 120;
+var REORDER_SPRING = { stiffness: 320, damping: 32 };
+var MOVE_UP = -1;
+var MOVE_DOWN = 1;
+var GLYPH_UP = "\u25B2";
+var GLYPH_DOWN = "\u25BC";
+var DEFAULT_TEST_ID = "card-roster";
+var rosterTestIds = (base) => ({
+  root: base,
+  reorderToggle: `${base}-reorder-toggle`,
+  addGroup: `${base}-add-group`,
+  error: `${base}-error`,
+  editor: `${base}-editor`,
+  editorPlaceholder: `${base}-editor-placeholder`,
+  group: (key) => `${base}-group-${key}`,
+  card: (id) => `${base}-card-${id}`
+});
+
+// src/utils/rosterOps.ts
+function canMove(length, index, delta) {
+  const target = index + delta;
+  return delta !== 0 && index >= 0 && index < length && target >= 0 && target < length;
+}
+function moveInArray(list, index, delta) {
+  if (!canMove(list.length, index, delta)) return list;
+  const next = [...list];
+  const [moved] = next.splice(index, 1);
+  next.splice(index + delta, 0, moved);
+  return next;
+}
+function isGroupEmpty(group) {
+  return group.items.length === 0;
+}
+function mapGroup(value, key, fn) {
+  let changed = false;
+  const groups = value.groups.map((group) => {
+    if (group.key !== key) return group;
+    const next = fn(group);
+    if (next !== group) changed = true;
+    return next;
+  });
+  return changed ? { ...value, groups } : value;
+}
+function findItem(value, itemId) {
+  for (const group of value.groups) {
+    const index = group.items.findIndex((item2) => item2.id === itemId);
+    const item = group.items[index];
+    if (item !== void 0) return { group, item, index };
+  }
+  return void 0;
+}
+function addGroup(value, group) {
+  if (value.groups.some((g) => g.key === group.key)) return value;
+  return { ...value, groups: [...value.groups, group] };
+}
+function renameGroup(value, key, title) {
+  const trimmed = title.trim();
+  if (trimmed === "") return value;
+  return mapGroup(value, key, (group) => group.title === trimmed ? group : { ...group, title: trimmed });
+}
+function removeGroup(value, key) {
+  if (!value.groups.some((g) => g.key === key)) return value;
+  return { ...value, groups: value.groups.filter((g) => g.key !== key) };
+}
+function moveGroup(value, key, delta) {
+  const index = value.groups.findIndex((g) => g.key === key);
+  const groups = moveInArray(value.groups, index, delta);
+  return groups === value.groups ? value : { ...value, groups };
+}
+function addItem(value, groupKey, item) {
+  if (findItem(value, item.id) !== void 0) return value;
+  return mapGroup(value, groupKey, (group) => ({ ...group, items: [...group.items, item] }));
+}
+function updateItem(value, groupKey, item) {
+  return mapGroup(value, groupKey, (group) => {
+    const index = group.items.findIndex((i) => i.id === item.id);
+    if (index === -1) return group;
+    const items = [...group.items];
+    items[index] = item;
+    return { ...group, items };
+  });
+}
+function removeItem(value, groupKey, itemId) {
+  return mapGroup(
+    value,
+    groupKey,
+    (group) => group.items.some((i) => i.id === itemId) ? { ...group, items: group.items.filter((i) => i.id !== itemId) } : group
+  );
+}
+function moveItem(value, groupKey, itemId, delta) {
+  return mapGroup(value, groupKey, (group) => {
+    const items = moveInArray(group.items, group.items.findIndex((i) => i.id === itemId), delta);
+    return items === group.items ? group : { ...group, items };
+  });
+}
+
+// src/hooks/useRosterActions.ts
+function useRosterActions(value, onChange) {
+  return react.useMemo(() => {
+    const emit = (next) => {
+      if (next !== value) onChange(next);
+    };
+    return {
+      addGroup: (group) => emit(addGroup(value, group)),
+      renameGroup: (key, title) => emit(renameGroup(value, key, title)),
+      removeGroup: (key) => emit(removeGroup(value, key)),
+      moveGroup: (key, delta) => emit(moveGroup(value, key, delta)),
+      moveItem: (groupKey, itemId, delta) => emit(moveItem(value, groupKey, itemId, delta))
+    };
+  }, [value, onChange]);
+}
+
+// src/utils/editorSession.ts
+function isSplitPane(width, breakpoint) {
+  return width >= breakpoint;
+}
+function resolveEditSession(value, target, draft) {
+  if (target === null) return null;
+  if (target.itemId === null) return draft === null ? null : { item: draft, groupKey: target.groupKey, isNew: true };
+  const found = findItem(value, target.itemId);
+  return found === void 0 ? null : { item: found.item, groupKey: found.group.key, isNew: false };
+}
+function commitEdit(value, session, next) {
+  return session.isNew ? addItem(value, session.groupKey, next) : updateItem(value, session.groupKey, next);
+}
+
+// src/hooks/useRosterEditor.ts
+function useRosterEditor(value, onChange, createItem) {
+  const [target, setTarget] = react.useState(null);
+  const [draft, setDraft] = react.useState(null);
+  const close = react.useCallback(() => {
+    setTarget(null);
+    setDraft(null);
+  }, []);
+  const openEdit = react.useCallback((groupKey, itemId) => {
+    setDraft(null);
+    setTarget({ groupKey, itemId });
+  }, []);
+  const openNew = react.useCallback(
+    (groupKey) => {
+      if (createItem === void 0) return;
+      setDraft(createItem(groupKey));
+      setTarget({ groupKey, itemId: null });
+    },
+    [createItem]
+  );
+  const session = resolveEditSession(value, target, draft);
+  const context = session === null ? null : {
+    ...session,
+    save: (next) => {
+      const updated = commitEdit(value, session, next);
+      if (updated !== value) onChange(updated);
+      close();
+    },
+    cancel: close,
+    remove: () => {
+      if (!session.isNew) onChange(removeItem(value, session.groupKey, session.item.id));
+      close();
+    }
+  };
+  const activeItemId = session !== null && !session.isNew ? session.item.id : null;
+  return { context, activeItemId, openEdit, openNew, close };
+}
+var styles = reactNative.StyleSheet.create({
+  pane: { width: SPLIT_EDITOR_WIDTH, borderWidth: BORDER_WIDTH, borderRadius: RADIUS_M, padding: SPACE_L, gap: SPACE_L },
+  title: { fontSize: TITLE_FONT_SIZE, fontWeight: "700" },
+  prompt: { fontSize: BODY_FONT_SIZE }
+});
+function EditorPane({
+  context,
+  renderEditor,
+  split,
+  labels,
+  onClose,
+  testID,
+  placeholderTestID
+}) {
+  const { theme } = uiFeedback.useUi();
+  const title = context?.isNew === true ? labels.editorTitleNew : labels.editorTitleEdit;
+  if (!split)
+    return /* @__PURE__ */ jsxRuntime.jsx(uiLayout.ModalShell, { title, visible: context !== null, onCancel: onClose, children: context === null ? null : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID, children: renderEditor(context) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles.pane, { borderColor: theme.colors.border, backgroundColor: theme.colors.surface }], testID, children: context === null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.prompt, { color: theme.colors.textSecondary }], testID: placeholderTestID, children: labels.selectPrompt }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [styles.title, { color: theme.colors.text }], children: title }),
+    renderEditor(context)
+  ] }) });
+}
+var styles2 = reactNative.StyleSheet.create({
+  base: {
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    paddingHorizontal: SPACE_M,
+    borderRadius: RADIUS_S,
+    borderWidth: BORDER_WIDTH,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: { fontSize: BODY_FONT_SIZE, fontWeight: "600" },
+  pressed: { opacity: PRESSED_OPACITY },
+  disabled: { opacity: DISABLED_OPACITY }
+});
+function RosterButton({
+  label,
+  accessibilityLabel,
+  hint,
+  onPress,
+  testID,
+  emphasis = false,
+  danger = false,
+  disabled = false
+}) {
+  const { theme } = uiFeedback.useUi();
+  const accent = danger ? theme.semantic.error["500"] : theme.palette.primary["500"];
+  const tone = emphasis ? { backgroundColor: accent, borderColor: accent } : { borderColor: theme.colors.border };
+  const color = emphasis ? theme.colors.background : accent;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityRole: "button",
+      accessibilityState: { disabled },
+      disabled,
+      style: ({ pressed }) => [styles2.base, tone, pressed ? styles2.pressed : null, disabled ? styles2.disabled : null],
+      testID,
+      onPress,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, { color }], children: label })
+    }
+  );
+}
+var styles3 = reactNative.StyleSheet.create({
+  frame: { borderRadius: RADIUS_M, padding: SPACE_S, gap: SPACE_S, overflow: "hidden" },
+  fill: { alignSelf: "stretch" },
+  body: { position: "relative" },
+  busy: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE_S,
+    opacity: BUSY_OVERLAY_OPACITY
+  },
+  small: { fontSize: SMALL_FONT_SIZE },
+  errorRow: { gap: SPACE_S },
+  footer: { flexDirection: "row", flexWrap: "wrap", gap: SPACE_S }
+});
+function ItemFrame({
+  width,
+  active,
+  state,
+  labels,
+  onRetry,
+  testID,
+  children,
+  footer
+}) {
+  const { theme } = uiFeedback.useUi();
+  const busy = state?.busy === true;
+  const error = state?.error ?? "";
+  const hasError = error !== "";
+  const errorColor = theme.semantic.error["500"];
+  const primary = theme.palette.primary["500"];
+  const highlighted = active || hasError;
+  const borderColor = hasError ? errorColor : active ? primary : theme.colors.border;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      accessibilityState: { busy },
+      style: [
+        styles3.frame,
+        width === void 0 ? styles3.fill : { width },
+        { borderColor, backgroundColor: theme.colors.surface, borderWidth: highlighted ? ACTIVE_BORDER_WIDTH : BORDER_WIDTH }
+      ],
+      testID,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.body, children: [
+          children,
+          busy ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.busy, { backgroundColor: theme.colors.surfaceElevated }], testID: `${testID}-busy`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: primary }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityLiveRegion: "polite", style: [styles3.small, { color: theme.colors.textSecondary }], children: labels.uploading })
+          ] }) : null
+        ] }),
+        hasError ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.errorRow, testID: `${testID}-error`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "alert", style: [styles3.small, { color: errorColor }], children: error }),
+          onRetry !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(RosterButton, { danger: true, hint: labels.retryHint, label: labels.retry, testID: `${testID}-retry`, onPress: onRetry }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.footer, children: footer })
+      ]
+    }
+  );
+}
+var styles4 = reactNative.StyleSheet.create({
+  band: { gap: SPACE_M, paddingVertical: SPACE_XS }
+});
+function CardBand({ group, shared }) {
+  const { labels, ids, onRetryItem } = shared;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.ScrollView,
+    {
+      horizontal: true,
+      contentContainerStyle: styles4.band,
+      showsHorizontalScrollIndicator: false,
+      testID: `${ids.group(group.key)}-band`,
+      children: group.items.map((item) => {
+        const cardId = ids.card(item.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ItemFrame,
+          {
+            active: shared.activeItemId === item.id,
+            footer: /* @__PURE__ */ jsxRuntime.jsx(
+              RosterButton,
+              {
+                accessibilityLabel: labels.editCard(shared.getItemName(item)),
+                hint: labels.editCardHint,
+                label: labels.edit,
+                testID: `${cardId}-edit`,
+                onPress: () => shared.onEdit(group.key, item.id)
+              }
+            ),
+            labels,
+            state: shared.getItemState?.(item),
+            testID: cardId,
+            width: shared.cardWidth,
+            onRetry: onRetryItem === void 0 ? void 0 : () => onRetryItem(item),
+            children: shared.renderCard(item, group)
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+var styles5 = reactNative.StyleSheet.create({
+  header: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: SPACE_S },
+  title: { flexGrow: 1, flexShrink: 1, minWidth: GROUP_TITLE_MIN_WIDTH, fontSize: TITLE_FONT_SIZE, fontWeight: "700" },
+  input: {
+    flexGrow: 1,
+    minWidth: GROUP_TITLE_MIN_WIDTH,
+    minHeight: MIN_TOUCH_TARGET,
+    paddingHorizontal: SPACE_M,
+    borderWidth: BORDER_WIDTH,
+    borderRadius: RADIUS_S,
+    fontSize: BODY_FONT_SIZE
+  },
+  actions: { flexDirection: "row", flexWrap: "wrap", gap: SPACE_S }
+});
+function GroupHeader({ group, index, shared }) {
+  const { theme } = uiFeedback.useUi();
+  const [draft, setDraft] = react.useState(null);
+  const { labels, actions, reordering } = shared;
+  const gid = shared.ids.group(group.key);
+  const commit = () => {
+    if (draft !== null) actions.renameGroup(group.key, draft);
+    setDraft(null);
+  };
+  const reorderActions = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RosterButton,
+      {
+        accessibilityLabel: labels.moveGroupUp(group.title),
+        disabled: index === 0,
+        hint: labels.moveGroupHint,
+        label: GLYPH_UP,
+        testID: `${gid}-up`,
+        onPress: () => actions.moveGroup(group.key, MOVE_UP)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RosterButton,
+      {
+        accessibilityLabel: labels.moveGroupDown(group.title),
+        disabled: index === shared.groupCount - 1,
+        hint: labels.moveGroupHint,
+        label: GLYPH_DOWN,
+        testID: `${gid}-down`,
+        onPress: () => actions.moveGroup(group.key, MOVE_DOWN)
+      }
+    )
+  ] });
+  const editActions = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    shared.onAdd !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      RosterButton,
+      {
+        emphasis: true,
+        accessibilityLabel: labels.addCard(group.title),
+        hint: labels.addCardHint,
+        label: labels.add,
+        testID: `${gid}-add`,
+        onPress: () => shared.onAdd?.(group.key)
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RosterButton,
+      {
+        accessibilityLabel: labels.renameGroup(group.title),
+        hint: labels.renameGroupHint,
+        label: labels.rename,
+        testID: `${gid}-rename`,
+        onPress: () => setDraft(group.title)
+      }
+    ),
+    shared.canRemoveGroup(group) ? /* @__PURE__ */ jsxRuntime.jsx(
+      RosterButton,
+      {
+        danger: true,
+        accessibilityLabel: labels.removeGroup(group.title),
+        hint: labels.removeGroupHint,
+        label: labels.remove,
+        testID: `${gid}-remove`,
+        onPress: () => actions.removeGroup(group.key)
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.header, children: [
+    draft === null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", numberOfLines: 1, style: [styles5.title, { color: theme.colors.text }], children: group.title }) : /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        autoFocus: true,
+        accessibilityHint: labels.groupTitleInputHint,
+        accessibilityLabel: labels.groupTitleInput,
+        style: [styles5.input, { color: theme.colors.text, borderColor: theme.palette.primary["500"] }],
+        testID: `${gid}-title-input`,
+        value: draft,
+        onBlur: commit,
+        onChangeText: setDraft,
+        onSubmitEditing: commit
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.actions, children: reordering ? reorderActions : editActions })
+  ] });
+}
+var styles6 = reactNative.StyleSheet.create({
+  item: { paddingVertical: SPACE_S / 2 }
+});
+function ReorderList({ group, shared }) {
+  const { labels, ids, actions } = shared;
+  const keys = react.useMemo(() => group.items.map((item) => item.id), [group.items]);
+  const last = group.items.length - 1;
+  const renderItem = (key) => {
+    const index = group.items.findIndex((item2) => item2.id === key);
+    const item = group.items[index];
+    if (item === void 0) return null;
+    const name = shared.getItemName(item);
+    const cardId = ids.card(item.id);
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.item, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ItemFrame,
+      {
+        active: false,
+        footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RosterButton,
+            {
+              accessibilityLabel: labels.moveCardUp(name),
+              disabled: index === 0,
+              hint: labels.moveCardHint,
+              label: GLYPH_UP,
+              testID: `${cardId}-up`,
+              onPress: () => actions.moveItem(group.key, item.id, MOVE_UP)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RosterButton,
+            {
+              accessibilityLabel: labels.moveCardDown(name),
+              disabled: index === last,
+              hint: labels.moveCardHint,
+              label: GLYPH_DOWN,
+              testID: `${cardId}-down`,
+              onPress: () => actions.moveItem(group.key, item.id, MOVE_DOWN)
+            }
+          )
+        ] }),
+        labels,
+        state: shared.getItemState?.(item),
+        testID: cardId,
+        children: shared.renderCard(item, group)
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(uiMotion.Reorder, { itemKeys: keys, spring: REORDER_SPRING, testID: `${ids.group(group.key)}-reorder`, children: renderItem });
+}
+var styles7 = reactNative.StyleSheet.create({
+  section: { gap: SPACE_S },
+  empty: {
+    borderWidth: BORDER_WIDTH,
+    borderStyle: "dashed",
+    borderRadius: RADIUS_M,
+    padding: SPACE_L,
+    alignItems: "center"
+  },
+  emptyText: { fontSize: BODY_FONT_SIZE, textAlign: "center" }
+});
+function RosterGroupSection({
+  group,
+  index,
+  shared
+}) {
+  const { theme } = uiFeedback.useUi();
+  const gid = shared.ids.group(group.key);
+  let body;
+  if (group.items.length === 0)
+    body = /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.empty, { borderColor: theme.colors.border }], testID: `${gid}-empty`, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.emptyText, { color: theme.colors.textSecondary }], children: shared.labels.emptyGroup }) });
+  else if (shared.reordering) body = /* @__PURE__ */ jsxRuntime.jsx(ReorderList, { group, shared });
+  else body = /* @__PURE__ */ jsxRuntime.jsx(CardBand, { group, shared });
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.section, testID: gid, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GroupHeader, { group, index, shared }),
+    body
+  ] });
+}
+var styles8 = reactNative.StyleSheet.create({
+  root: { gap: SPACE_L },
+  split: { flexDirection: "row", alignItems: "flex-start" },
+  list: { flex: 1, minWidth: 0, gap: SPACE_L },
+  toolbar: { flexDirection: "row", flexWrap: "wrap", gap: SPACE_S, justifyContent: "flex-end" }
+});
+function CardRoster(props) {
+  const {
+    value,
+    onChange,
+    renderCard,
+    renderEditor,
+    getItemName,
+    labels,
+    createItem,
+    createGroup,
+    canRemoveGroup = isGroupEmpty,
+    getItemState,
+    onRetryItem,
+    error,
+    wideBreakpoint = uiLayout.LAYOUT_COLLAPSE_BREAKPOINT,
+    cardWidth = DEFAULT_CARD_WIDTH,
+    testID = DEFAULT_TEST_ID
+  } = props;
+  const { width } = reactNative.useWindowDimensions();
+  const split = isSplitPane(width, wideBreakpoint);
+  const [reordering, setReordering] = react.useState(false);
+  const editor = useRosterEditor(value, onChange, createItem);
+  const actions = useRosterActions(value, onChange);
+  const ids = react.useMemo(() => rosterTestIds(testID), [testID]);
+  const { close, openEdit, openNew } = editor;
+  const toggleReorder = react.useCallback(() => {
+    close();
+    setReordering((on) => !on);
+  }, [close]);
+  const shared = {
+    renderCard,
+    getItemName,
+    getItemState,
+    onRetryItem,
+    labels,
+    cardWidth,
+    ids,
+    reordering,
+    actions,
+    canRemoveGroup,
+    activeItemId: editor.activeItemId,
+    groupCount: value.groups.length,
+    onEdit: openEdit,
+    onAdd: createItem === void 0 ? void 0 : openNew
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles8.root, split ? styles8.split : null], testID: ids.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.list, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.toolbar, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RosterButton,
+          {
+            emphasis: reordering,
+            hint: reordering ? labels.doneReorderingHint : labels.reorderHint,
+            label: reordering ? labels.doneReordering : labels.reorder,
+            testID: ids.reorderToggle,
+            onPress: toggleReorder
+          }
+        ),
+        createGroup !== void 0 && !reordering ? /* @__PURE__ */ jsxRuntime.jsx(
+          RosterButton,
+          {
+            hint: labels.addGroupHint,
+            label: labels.addGroup,
+            testID: ids.addGroup,
+            onPress: () => actions.addGroup(createGroup())
+          }
+        ) : null
+      ] }),
+      error !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(uiFeedback.ErrorState, { message: error.message, testID: ids.error, title: error.title, onRetry: error.onRetry }) : null,
+      value.groups.map((group, index) => /* @__PURE__ */ jsxRuntime.jsx(RosterGroupSection, { group, index, shared }, group.key))
+    ] }),
+    reordering && split ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      EditorPane,
+      {
+        context: editor.context,
+        labels,
+        placeholderTestID: ids.editorPlaceholder,
+        renderEditor,
+        split,
+        testID: ids.editor,
+        onClose: close
+      }
+    )
+  ] });
+}
+
+exports.CardRoster = CardRoster;
+exports.DEFAULT_CARD_WIDTH = DEFAULT_CARD_WIDTH;
+exports.DEFAULT_TEST_ID = DEFAULT_TEST_ID;
+exports.MIN_TOUCH_TARGET = MIN_TOUCH_TARGET;
+exports.MOVE_DOWN = MOVE_DOWN;
+exports.MOVE_UP = MOVE_UP;
+exports.addGroup = addGroup;
+exports.addItem = addItem;
+exports.canMove = canMove;
+exports.commitEdit = commitEdit;
+exports.findItem = findItem;
+exports.isGroupEmpty = isGroupEmpty;
+exports.isSplitPane = isSplitPane;
+exports.moveGroup = moveGroup;
+exports.moveInArray = moveInArray;
+exports.moveItem = moveItem;
+exports.removeGroup = removeGroup;
+exports.removeItem = removeItem;
+exports.renameGroup = renameGroup;
+exports.resolveEditSession = resolveEditSession;
+exports.rosterTestIds = rosterTestIds;
+exports.updateItem = updateItem;
+exports.useRosterActions = useRosterActions;
+exports.useRosterEditor = useRosterEditor;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map