@wordpress-gcb/fields 0.2.0 → 0.2.2

package/README.md

@@ -1,49 +1,65 @@
 # @wordpress-gcb/fields
 
-GCB's typed-field UI as a standalone package: the control components, the
-inspector renderer (`block.fields.json` → settings panel), and the
-conditional-logic / validation helpers — **with no dependency on the GCB
-WordPress plugin's globals or REST endpoints**.
+Typed-field UI for the WordPress block editor: control components, an inspector
+renderer that turns a `block.fields.json` schema into a settings panel, plus
+conditional-logic and validation helpers — **decoupled from any plugin**. Host
+data (design tokens, media picker, etc.) is injected, so the same controls run
+inside the [GCB Lite plugin](https://github.com/wordpress-gcb/gutenberg-control-blocks-lite),
+a meta box, or a headless editor.
 
-This is the free, open core of GCB. The Lite plugin consumes it; headless setups
-can use it directly. See `~/sites/gcb/README.md` for how this fits the whole
-project, and `gcb-pro/docs/eject-blocks-scope.md` for the architecture rationale.
+This is the free, open core of **[GCB](https://gutenbergcontrolblocks.com)** —
+[Gutenberg Control Blocks](https://gutenbergcontrolblocks.com).
 
-**Status: skeleton.** The public API surface and the injected-config contract are
-defined (`src/index.js`); the control source is extracted from the plugin in a
-later step — see `EXTRACTION.md`.
+## Install
 
-## Why it exists
+```bash
+npm install @wordpress-gcb/fields
+```
 
-The plugin currently bakes the controls into itself and feeds them via
-`window.gcbLite` + plugin REST. That couples the field UI to the plugin. Pulling
-it into `@wordpress-gcb/fields` means:
+`@wordpress/*` are peer dependencies — provided by the WordPress editor runtime
+(or your build's externals). `@dnd-kit/*` and `@tiptap/*` ship bundled.
 
-- headless editors get the exact same controls without the plugin;
-- "eject" can scaffold a block that uses the SDK and works plugin-free;
-- graceful degradation: static `block.json` is the floor, the SDK restores live UI.
+## Usage
 
-## Host contract (what you inject)
+```jsx
+import { GcbFieldsProvider, renderInspector } from '@wordpress-gcb/fields';
 
-The plugin used to read these off `window.gcbLite`; here they're explicit:
+// controls = the `controls` array from a block.fields.json
+<GcbFieldsProvider value={{ tokens, googleMapsEnabled: true }}>
+  {renderInspector(controls, attributes, setAttributes)}
+</GcbFieldsProvider>
+```
 
-| Inject | Replaces | For |
-| --- | --- | --- |
-| `controls` (arg to `renderInspector`) | `window.gcbLite.blocks[name].controls` | the fields to render |
-| `tokens` | `window.gcbLite.tokens` | token-aware controls (select, range, spacing) |
-| `googleMapsEnabled` | `window.gcbLite.googleMaps.hasApiKey` | the google-map control |
-| `media` adapter | `wp.media` / block-editor `MediaUpload` | image / gallery / file / richtext |
-| `apiFetch` (optional) | `@wordpress/api-fetch` | reference controls — **core `wp/v2` only** |
-| `variant` | `ControlContext` | `'sidebar'` (popovers) vs `'metabox'` (modals) |
+Each control receives `{ control, value, onChange, attributes }`. The provider
+supplies what the controls need from the host:
 
-## Not included (stays in the plugin)
+| Inject | For |
+| --- | --- |
+| `tokens` | token-aware controls (select, range, spacing) |
+| `googleMapsEnabled` | the google-map control |
+| `media` | media picker adapter (image / gallery / file / richtext) |
+| `apiFetch` | reference controls — calls core `wp/v2` (optional; defaults to `@wordpress/api-fetch`) |
+| `variant` | `'sidebar'` (popovers) vs `'metabox'` (modals) |
 
-The `gcb/repeater` **block** + `useRepeaterSeeding` / `useRepeaterValidation`
-(editor-coupled: clientId, block/editor stores, the validation transient), the
-PHP-preview pipeline, focus-field handling, the admin builder. The `repeater`
-**control** (form-of-forms field) IS included — don't confuse the two.
+All are optional; with none provided the package falls back to the WordPress
+editor globals.
 
-## Peer vs bundled deps
+## Exports
 
-- **peerDependencies:** all `@wordpress/*` — provided by the host editor.
-- **bundled:** `@dnd-kit/*`, `@tiptap/*` — not part of the WP runtime.
+- `renderInspector(controls, attributes, setAttributes, options?)`
+- `controlComponents` — the control registry (`type` → component)
+- `GcbFieldsProvider`, `useGcbFieldsConfig`
+- `shouldRender`, `panelsContainingErrors`, `STRUCTURAL_TYPES`
+- `ValidationContext`, `ControlContext`
+- token helpers: `useTokens`, `getTokensByGroup`, `getAllTokenGroups`
+
+## Links
+
+- **Website:** <https://gutenbergcontrolblocks.com>
+- **Source:** <https://github.com/wordpress-gcb/gcb-fields>
+- **Issues:** <https://github.com/wordpress-gcb/gcb-fields/issues>
+- **GCB Lite plugin:** <https://github.com/wordpress-gcb/gutenberg-control-blocks-lite>
+
+## License
+
+GPL-2.0-or-later

package/dist/conditional-logic.js

@@ -0,0 +1,83 @@
+/**
+ * Conditional logic — pure functions, no React, no @wordpress/* deps.
+ *
+ * Kept separate from inspector.js so unit tests can import without
+ * pulling in the whole control library. Keep in sync with PHP mirror:
+ *   includes/PostFields/Conditional.php
+ *
+ * Config shape on a control:
+ *
+ *   {
+ *     conditionalLogic: {
+ *       enabled:  true,
+ *       operator: 'and' | 'or',           // default: 'and'
+ *       rules: [
+ *         { field: 'show_cta', operator: '==', value: true },
+ *         { field: 'count',    operator: '>',  value: 0 },
+ *       ],
+ *     }
+ *   }
+ */
+
+// Structural control types (group, panel, tools-panel) render as panel
+// containers, not as fields. Exported so callers that walk the control
+// list can skip them consistently.
+export const STRUCTURAL_TYPES = new Set(['group', 'panel', 'tools-panel']);
+
+/**
+ * Decide whether a control should render against the current attribute
+ * values. A control with no `conditionalLogic` (or a disabled one) is
+ * always rendered.
+ */
+export function shouldRender(control, attributes) {
+  const cl = control.conditionalLogic;
+  if (!cl?.enabled || !Array.isArray(cl.rules) || cl.rules.length === 0) {
+    return true;
+  }
+  const op = cl.operator === 'or' ? 'or' : 'and';
+  const results = cl.rules.map(rule => evalRule(rule, attributes));
+  return op === 'or' ? results.some(Boolean) : results.every(Boolean);
+}
+function evalRule(rule, attributes) {
+  const actual = attributes[rule.field];
+  switch (rule.operator) {
+    case '==':
+      return actual == rule.value;
+    // eslint-disable-line eqeqeq
+    case '!=':
+      return actual != rule.value;
+    // eslint-disable-line eqeqeq
+    case '>':
+      return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) > Number(rule.value);
+    case '<':
+      return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) < Number(rule.value);
+    case '>=':
+      return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) >= Number(rule.value);
+    case '<=':
+      return Number.isFinite(Number(actual)) && Number.isFinite(Number(rule.value)) && Number(actual) <= Number(rule.value);
+    case 'contains':
+      return typeof actual === 'string' && actual.includes(rule.value);
+    case 'in':
+      return Array.isArray(rule.value) && rule.value.includes(actual);
+    default:
+      return true;
+  }
+}
+
+/**
+ * Walk controls and return the set of panel ids that contain at least one
+ * control whose attributeKey appears in `errors`. Used by the meta-box to
+ * auto-open panels that have validation errors.
+ */
+export function panelsContainingErrors(controls, errors) {
+  const errorKeys = new Set(Object.keys(errors || {}));
+  if (errorKeys.size === 0) return new Set();
+  const ids = new Set();
+  for (const c of controls) {
+    if (STRUCTURAL_TYPES.has(c.type)) continue;
+    if (c.attributeKey && errorKeys.has(c.attributeKey) && c.parentPanelId) {
+      ids.add(c.parentPanelId);
+    }
+  }
+  return ids;
+}

package/{src → dist}/control-context.js

@@ -13,5 +13,6 @@
  */
 
 import { createContext } from '@wordpress/element';
-
-export const ControlContext = createContext({ variant: 'sidebar' });
+export const ControlContext = createContext({
+  variant: 'sidebar'
+});

package/{src → dist}/controls/MediaCapabilityGate.js

@@ -23,11 +23,15 @@
 import { useContext } from '@wordpress/element';
 import { MediaUploadCheck } from '@wordpress/block-editor';
 import { ControlContext } from '../control-context';
-
-export default function MediaCapabilityGate({ children }) {
-	const ctx = useContext(ControlContext);
-	if (ctx.variant === 'metabox') {
-		return children;
-	}
-	return <MediaUploadCheck>{children}</MediaUploadCheck>;
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MediaCapabilityGate({
+  children
+}) {
+  const ctx = useContext(ControlContext);
+  if (ctx.variant === 'metabox') {
+    return children;
+  }
+  return /*#__PURE__*/_jsx(MediaUploadCheck, {
+    children: children
+  });
+}

package/dist/controls/MediaPicker.js

@@ -0,0 +1,149 @@
+/**
+ * MediaPicker — a `MediaUpload`-shaped component that works on any
+ * admin screen.
+ *
+ * `@wordpress/block-editor`'s `MediaUpload` requires the `core/block-editor`
+ * data store, which is only initialised on screens that bootstrap the
+ * block editor itself (post.php, site-editor.php, widgets.php). On
+ * profile.php, term.php, options.php — anywhere we mount our post-fields
+ * bundle on a classic admin page — the store isn't there, so the
+ * MediaUpload modal silently fails to open and the image / gallery /
+ * file controls feel broken.
+ *
+ * This wrapper falls back to the lower-level `wp.media()` JS API on
+ * non-editor screens. wp.media is what WP's own avatar uploader uses
+ * and is loaded by wp_enqueue_media() — available on every admin page
+ * we care about. It's not React; we wrap it in the same render-prop
+ * shape MediaUpload exposes so callers don't need to know which path
+ * they're on.
+ *
+ * Shape:
+ *   <MediaPicker
+ *     onSelect={(media) => …}           // single media object (or array)
+ *     allowedTypes={['image']}
+ *     value={123 | [123,124] | null}
+ *     multiple={false}
+ *     gallery={false}
+ *     render={({ open }) => <button onClick={open}>Pick</button>}
+ *   />
+ */
+
+import { useContext } from '@wordpress/element';
+import { MediaUpload } from '@wordpress/block-editor';
+import { ControlContext } from '../control-context';
+
+/**
+ * Translate a wp.media attachment model into the same plain object
+ * @wordpress/block-editor's MediaUpload onSelect receives.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function toPlainAttachment(attachment) {
+  const a = attachment.toJSON ? attachment.toJSON() : attachment;
+  return {
+    id: a.id,
+    url: a.url,
+    alt: a.alt || '',
+    title: a.title || a.filename || '',
+    filename: a.filename || '',
+    caption: a.caption || '',
+    description: a.description || '',
+    mime: a.mime || a.type || '',
+    type: a.type || '',
+    subtype: a.subtype || '',
+    width: a.width,
+    height: a.height,
+    filesizeInBytes: a.filesizeInBytes,
+    sizes: a.sizes
+  };
+}
+function openClassicMediaFrame({
+  allowedTypes,
+  multiple,
+  gallery,
+  value,
+  onSelect
+}) {
+  if (typeof window === 'undefined' || !window.wp || !window.wp.media) {
+    // eslint-disable-next-line no-console
+    console.warn('gcb-lite: wp.media not loaded — call wp_enqueue_media() on this screen.');
+    return;
+  }
+
+  // IMPORTANT: don't open directly into 'gallery-edit' — WP 7.0's
+  // media-views.js bootstraps menu/router state lazily, and asking for
+  // 'gallery-edit' before the menu state exists throws
+  // `Cannot read properties of undefined (reading 'get')` in
+  // setMenuTabPanelAriaAttributes. The supported gallery flow is to open
+  // the library with `multiple: true`, pre-select the existing images,
+  // and treat the result as a gallery on 'select'.
+  const isMulti = !!(gallery || multiple);
+  const frame = window.wp.media({
+    title: gallery ? 'Edit gallery' : isMulti ? 'Select media' : 'Select media',
+    button: {
+      text: gallery ? 'Update gallery' : 'Use this media'
+    },
+    library: allowedTypes ? {
+      type: allowedTypes
+    } : undefined,
+    multiple: isMulti
+  });
+
+  // Pre-select prior value so the user lands on the existing pick.
+  frame.on('open', () => {
+    const selection = frame.state().get('selection');
+    if (!selection) return;
+    const ids = Array.isArray(value) ? value : value ? [value] : [];
+    ids.forEach(id => {
+      if (!id) return;
+      const attachment = window.wp.media.attachment(id);
+      if (!attachment) return;
+      attachment.fetch();
+      selection.add([attachment]);
+    });
+  });
+  frame.on('select', () => {
+    const selection = frame.state().get('selection');
+    if (!selection) return;
+    const picks = selection.toArray().map(toPlainAttachment);
+    if (isMulti) {
+      onSelect(picks);
+    } else {
+      onSelect(picks[0] || null);
+    }
+  });
+  frame.open();
+}
+
+/**
+ * Decide which backend to use based on render surface:
+ *
+ * - Block Inspector ('sidebar' variant): MediaUpload from
+ *   @wordpress/block-editor. That's the right tool inside the block
+ *   editor — it integrates with the editor's upload flow + capability
+ *   store.
+ *
+ * - Post-fields meta-box / Options / Taxonomy / User pages
+ *   ('metabox' variant): wp.media() directly. These screens often DON'T
+ *   bootstrap the block editor (we strip 'editor' support from
+ *   field-only CPTs), and MediaUpload silently renders nothing when the
+ *   editor stores aren't fully initialised. wp.media() is the lower-
+ *   level JS API loaded by wp_enqueue_media() — works on any admin page.
+ *
+ * Surface decision is made via ControlContext, which post-fields.js
+ * sets to 'metabox' and the block Inspector leaves at 'sidebar'.
+ */
+export default function MediaPicker(props) {
+  const ctx = useContext(ControlContext);
+  if (ctx.variant !== 'metabox') {
+    return /*#__PURE__*/_jsx(MediaUpload, {
+      ...props
+    });
+  }
+
+  // Metabox surface — synthesize the same render-prop shape with a
+  // wp.media() backend.
+  const open = () => openClassicMediaFrame(props);
+  return props.render ? props.render({
+    open
+  }) : null;
+}

package/dist/controls/MediaTriggerBadges.js

@@ -0,0 +1,35 @@
+/**
+ * MediaTriggerBadges — places an inline clear (×) button to the right of
+ * a media-control toggle. Used by ImageField and FileField on the metabox
+ * surface. Edit affordance isn't needed — clicking the trigger itself
+ * opens the picker/popover.
+ */
+
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+// Default sizing is content-width (inline-flex). In sidebar / Inspector
+// contexts an external rule promotes it to full-width — see editor.scss
+// "Sidebar / Inspector surface: media trigger fills width".
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function MediaTriggerBadges({
+  children,
+  onClear,
+  hideClear
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    className: "gcb-media-trigger-badges",
+    children: [children, !hideClear && /*#__PURE__*/_jsx(Button, {
+      variant: "tertiary",
+      isDestructive: true,
+      onClick: e => {
+        e.stopPropagation();
+        e.preventDefault();
+        onClear?.();
+      },
+      "aria-label": __('Clear', 'gcblite'),
+      title: __('Clear', 'gcblite'),
+      children: "\u2715"
+    })]
+  });
+}

package/{src → dist}/controls/PopoverOrModal.js

@@ -35,49 +35,55 @@
 import { useContext, useState } from '@wordpress/element';
 import { Dropdown, Modal } from '@wordpress/components';
 import { ControlContext } from '../control-context';
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export default function PopoverOrModal({
-	renderToggle,
-	renderContent,
-	modalTitle,
-	modalSize = 'medium',
-	dropdownProps = {},
+  renderToggle,
+  renderContent,
+  modalTitle,
+  modalSize = 'medium',
+  dropdownProps = {}
 }) {
-	const ctx = useContext(ControlContext);
-
-	if (ctx.variant === 'metabox') {
-		return (
-			<ModalAffordance
-				renderToggle={renderToggle}
-				renderContent={renderContent}
-				modalTitle={modalTitle}
-				modalSize={modalSize}
-			/>
-		);
-	}
-
-	return (
-		<Dropdown
-			{...dropdownProps}
-			renderToggle={renderToggle}
-			renderContent={({ onClose }) => renderContent({ close: onClose, variant: 'popover' })}
-		/>
-	);
-}
-
-function ModalAffordance({ renderToggle, renderContent, modalTitle, modalSize }) {
-	const [open, setOpen] = useState(false);
-	const onToggle = () => setOpen((v) => !v);
-	const close = () => setOpen(false);
-
-	return (
-		<>
-			{renderToggle({ onToggle, isOpen: open })}
-			{open && (
-				<Modal title={modalTitle} onRequestClose={close} size={modalSize}>
-					{renderContent({ close, variant: 'modal' })}
-				</Modal>
-			)}
-		</>
-	);
+  const ctx = useContext(ControlContext);
+  if (ctx.variant === 'metabox') {
+    return /*#__PURE__*/_jsx(ModalAffordance, {
+      renderToggle: renderToggle,
+      renderContent: renderContent,
+      modalTitle: modalTitle,
+      modalSize: modalSize
+    });
+  }
+  return /*#__PURE__*/_jsx(Dropdown, {
+    ...dropdownProps,
+    renderToggle: renderToggle,
+    renderContent: ({
+      onClose
+    }) => renderContent({
+      close: onClose,
+      variant: 'popover'
+    })
+  });
 }
+function ModalAffordance({
+  renderToggle,
+  renderContent,
+  modalTitle,
+  modalSize
+}) {
+  const [open, setOpen] = useState(false);
+  const onToggle = () => setOpen(v => !v);
+  const close = () => setOpen(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderToggle({
+      onToggle,
+      isOpen: open
+    }), open && /*#__PURE__*/_jsx(Modal, {
+      title: modalTitle,
+      onRequestClose: close,
+      size: modalSize,
+      children: renderContent({
+        close,
+        variant: 'modal'
+      })
+    })]
+  });
+}

package/dist/controls/SortableItem.js

@@ -0,0 +1,126 @@
+/**
+ * Sortable item — ported from the original GCB SortableItemComponent.
+ *
+ * Used by gallery, post-object (and any other future multi-select reorderable
+ * field) to render a draggable row with handle, title, and remove button.
+ */
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { __ } from '@wordpress/i18n';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ICONS = {
+  post: {
+    viewBox: '0 0 24 24',
+    path: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"
+      })]
+    })
+  },
+  tag: {
+    viewBox: '0 0 24 24',
+    path: /*#__PURE__*/_jsx("path", {
+      d: "M12.5 4.5h-2v7h7v-2l-5-5zm-2.5 8.5v5h2v-5h-2zm5 5h2v-5h-2v5z"
+    })
+  },
+  image: {
+    viewBox: '0 0 24 24',
+    path: /*#__PURE__*/_jsx("path", {
+      d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+    })
+  }
+};
+export default function SortableItem({
+  item,
+  onRemove,
+  icon = 'post',
+  getTitle,
+  thumb
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: item.id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const selectedIcon = ICONS[icon] || ICONS.post;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: setNodeRef,
+    style: style,
+    className: "gcb-sortable-item",
+    ...attributes,
+    ...listeners,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "gcb-sortable-drag-handle",
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 20 20",
+        width: "12",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+        })
+      })
+    }), thumb ? /*#__PURE__*/_jsx("img", {
+      src: thumb,
+      alt: "",
+      style: {
+        width: 28,
+        height: 28,
+        borderRadius: 2,
+        objectFit: 'cover',
+        marginRight: 8,
+        flexShrink: 0,
+        border: '1px solid #ddd'
+      }
+    }) : /*#__PURE__*/_jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: selectedIcon.viewBox,
+      width: "20",
+      height: "20",
+      style: {
+        marginRight: 8,
+        flexShrink: 0,
+        opacity: 0.6
+      },
+      children: selectedIcon.path
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        flex: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        userSelect: 'none'
+      },
+      children: getTitle ? getTitle(item) : item.title?.rendered || item.name || __('(no title)', 'gcblite')
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: e => {
+        e.stopPropagation();
+        onRemove(item.id);
+      },
+      onPointerDown: e => e.stopPropagation(),
+      className: "gcb-sortable-remove",
+      "aria-label": __('Remove', 'gcblite'),
+      children: /*#__PURE__*/_jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "20",
+        height: "20",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
+        })
+      })
+    })]
+  });
+}

package/dist/controls/button-group.js

@@ -0,0 +1,46 @@
+/**
+ * ButtonGroup — multi-select shown as a row of toggle buttons. Each option
+ * looks like a pressable button; clicking toggles it on/off.
+ *
+ * Stored shape: array of selected values, same as checkbox-group.
+ *   ['apple', 'cherry']
+ *
+ * Why not alias checkbox-group? Checkbox-group is checkboxes-in-a-column
+ * (vertical, ☑ ☐ ☐). ButtonGroup is buttons-in-a-row (horizontal, compact,
+ * visually weightier). Same data shape, different affordance.
+ *
+ * For single-select segmented controls use `toggle-group` instead.
+ */
+
+import { BaseControl, Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ButtonGroupField({
+  control,
+  value,
+  onChange
+}) {
+  const current = Array.isArray(value) ? value : [];
+  return /*#__PURE__*/_jsx(BaseControl, {
+    label: control.label,
+    help: control.helpText,
+    className: "gcb-button-group-control components-base-control",
+    __nextHasNoMarginBottom: true,
+    children: /*#__PURE__*/_jsx(HStack, {
+      spacing: 1,
+      justify: "flex-start",
+      wrap: true,
+      children: (control.options || []).map(option => {
+        const isOn = current.includes(option.value);
+        return /*#__PURE__*/_jsx(Button, {
+          variant: isOn ? 'primary' : 'secondary',
+          onClick: () => {
+            const next = isOn ? current.filter(v => v !== option.value) : [...current, option.value];
+            onChange(next);
+          },
+          "aria-pressed": isOn,
+          children: option.label
+        }, option.value);
+      })
+    })
+  });
+}