@byline/admin 2.5.2 → 2.6.1

package/dist/fields/array/array-field.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { ArrayField as ArrayFieldType } from '@byline/core';
+export declare const ArrayField: ({ field, defaultValue, path, disableSorting, }: {
+    field: ArrayFieldType;
+    defaultValue: any;
+    path: string;
+    disableSorting?: boolean;
+}) => import("react").JSX.Element;

package/dist/fields/array/array-field.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { DraggableSortable, IconButton, PlusIcon, moveItem } from "@byline/ui/react";
+import classnames from "classnames";
+import { defaultScalarForField } from "../field-helpers.js";
+import { FieldRenderer } from "../field-renderer.js";
+import { SortableItem } from "../sortable-item.js";
+import { useFormContext } from "../../forms/form-context.js";
+import array_field_module from "./array-field.module.js";
+const ArrayField = ({ field, defaultValue, path, disableSorting = false })=>{
+    const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
+    const { t } = useTranslation('byline-admin');
+    const [items, setItems] = useState([]);
+    useEffect(()=>{
+        Array.isArray(defaultValue) ? setItems(defaultValue.map((item)=>({
+                id: item && 'object' == typeof item && 'id' in item ? String(item.id) : item && 'object' == typeof item && '_id' in item ? String(item._id) : crypto.randomUUID(),
+                data: item
+            }))) : setItems([]);
+    }, [
+        defaultValue
+    ]);
+    const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
+        setItems((prev)=>moveItem(prev, moveFromIndex, moveToIndex));
+        const currentArray = getFieldValue(path) ?? defaultValue;
+        if (Array.isArray(currentArray)) {
+            const clampedFrom = Math.max(0, Math.min(moveFromIndex, currentArray.length - 1));
+            const clampedTo = Math.max(0, Math.min(moveToIndex, currentArray.length - 1));
+            if (clampedFrom === clampedTo) return;
+            const item = currentArray[clampedFrom];
+            const itemId = item && 'object' == typeof item && 'id' in item ? String(item.id) : String(clampedFrom);
+            appendPatch({
+                kind: 'array.move',
+                path: path,
+                itemId,
+                toIndex: clampedTo
+            });
+        }
+    };
+    const handleAddItem = async (atIndex)=>{
+        const childFields = field.fields ?? [];
+        if (0 === childFields.length) return;
+        const newId = crypto.randomUUID();
+        const newItem = {};
+        for (const childField of childFields)if ('group' === childField.type && childField.fields && childField.fields.length > 0) {
+            const groupObj = {};
+            for (const innerField of childField.fields)groupObj[innerField.name] = await defaultScalarForField(innerField, getFieldValues);
+            newItem[childField.name] = groupObj;
+        } else newItem[childField.name] = await defaultScalarForField(childField, getFieldValues);
+        const currentArray = getFieldValue(path) ?? defaultValue;
+        const insertAt = null != atIndex ? atIndex : currentArray ? currentArray.length : 0;
+        const newItemWrapper = {
+            id: newId,
+            data: newItem
+        };
+        setItems((prev)=>{
+            const next = [
+                ...prev
+            ];
+            next.splice(insertAt, 0, newItemWrapper);
+            return next;
+        });
+        appendPatch({
+            kind: 'array.insert',
+            path: path,
+            index: insertAt,
+            item: newItem
+        });
+        const newArrayValue = currentArray ? [
+            ...currentArray
+        ] : [];
+        newArrayValue.splice(insertAt, 0, newItem);
+        setFieldStore(path, newArrayValue);
+    };
+    const handleRemoveItem = (index)=>{
+        const currentArray = getFieldValue(path) ?? defaultValue;
+        if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
+        const item = currentArray[index];
+        const itemId = item && 'object' == typeof item && 'id' in item ? String(item.id) : String(index);
+        setItems((prev)=>prev.filter((_, i)=>i !== index));
+        appendPatch({
+            kind: 'array.remove',
+            path: path,
+            itemId
+        });
+        const newArrayValue = [
+            ...currentArray
+        ];
+        newArrayValue.splice(index, 1);
+        setFieldStore(path, newArrayValue);
+    };
+    const handleInsertBelow = (index)=>{
+        handleAddItem(index + 1);
+    };
+    const renderItem = (itemWrapper, index)=>{
+        const item = itemWrapper.data;
+        const arrayElementPath = `${path}[${index}]`;
+        if (!item || 'object' != typeof item) return null;
+        const childFields = field.fields ?? [];
+        if (0 === childFields.length) return null;
+        const innerBody = childFields.map((childField)=>{
+            const initial = item[childField.name];
+            if ('group' === childField.type && childField.fields && childField.fields.length > 0) {
+                const groupData = initial && 'object' == typeof initial ? initial : {};
+                return /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
+                    children: [
+                        childField.label && /*#__PURE__*/ jsx("h4", {
+                            className: classnames('byline-field-array-group-header', array_field_module["group-header"]),
+                            children: childField.label
+                        }),
+                        childField.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
+                                field: innerField,
+                                defaultValue: groupData[innerField.name],
+                                basePath: `${arrayElementPath}.${childField.name}`,
+                                disableSorting: true
+                            }, innerField.name))
+                    ]
+                }, childField.name);
+            }
+            return /*#__PURE__*/ jsx(FieldRenderer, {
+                field: childField,
+                defaultValue: initial,
+                basePath: arrayElementPath,
+                disableSorting: true
+            }, childField.name);
+        });
+        const label = field.label ?? field.name;
+        if (disableSorting) return /*#__PURE__*/ jsx("div", {
+            className: classnames('byline-field-array-card', array_field_module.card),
+            children: /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
+                children: innerBody
+            })
+        }, itemWrapper.id);
+        return /*#__PURE__*/ jsx(SortableItem, {
+            id: itemWrapper.id,
+            label: label,
+            onAddBelow: ()=>handleInsertBelow(index),
+            onRemove: ()=>handleRemoveItem(index),
+            children: /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
+                children: innerBody
+            })
+        }, itemWrapper.id);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-array ${field.name}`,
+        children: [
+            !disableSorting && field.label && /*#__PURE__*/ jsx("h3", {
+                className: classnames('byline-field-array-title', array_field_module.title),
+                children: field.label
+            }),
+            disableSorting ? /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-array-stack', array_field_module.stack),
+                children: items.map((item, index)=>renderItem(item, index))
+            }) : /*#__PURE__*/ jsxs(DraggableSortable, {
+                ids: items.map((i)=>i.id),
+                onDragEnd: handleDragEnd,
+                className: classnames('byline-field-array-stack', array_field_module.stack),
+                children: [
+                    items.map((item, index)=>renderItem(item, index)),
+                    /*#__PURE__*/ jsx("span", {
+                        children: /*#__PURE__*/ jsx(IconButton, {
+                            onClick: ()=>{
+                                handleAddItem();
+                            },
+                            "aria-label": t('fields.array.addItemAriaLabel'),
+                            children: /*#__PURE__*/ jsx(PlusIcon, {})
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { ArrayField };

package/dist/fields/array/array-field.module.js

@@ -0,0 +1,11 @@
+import "./array-field_module.css";
+const array_field_module = {
+    title: "title-HMJs1n",
+    stack: "stack-emBcXW",
+    card: "card-j_6w_O",
+    "group-header": "group-header-KJxpIV",
+    groupHeader: "group-header-KJxpIV",
+    "group-fields": "group-fields-Bmi_hA",
+    groupFields: "group-fields-Bmi_hA"
+};
+export default array_field_module;

package/dist/fields/array/array-field_module.css

@@ -0,0 +1,32 @@
+:is(.title-HMJs1n, .byline-field-array-title) {
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+  margin-bottom: .25rem;
+}
+
+:is(.stack-emBcXW, .byline-field-array-stack) {
+  gap: var(--spacing-16);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.card-j_6w_O, .byline-field-array-card) {
+  gap: var(--spacing-16);
+  padding: var(--spacing-16);
+  border: var(--border-width-thin) dashed var(--gray-600);
+  border-radius: var(--border-radius-md);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.group-header-KJxpIV, .byline-field-array-group-header) {
+  font-size: .9rem;
+  font-weight: var(--font-weight-medium);
+}
+
+:is(.group-fields-Bmi_hA, .byline-field-array-group-fields) {
+  gap: var(--spacing-16);
+  flex-direction: column;
+  display: flex;
+}
+

package/dist/fields/blocks/blocks-field.d.ts

@@ -0,0 +1,13 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { BlocksField as BlocksFieldType } from '@byline/core';
+export declare const BlocksField: ({ field, defaultValue, path, }: {
+    field: BlocksFieldType;
+    defaultValue: any;
+    path: string;
+}) => import("react").JSX.Element;

package/dist/fields/blocks/blocks-field.js

@@ -0,0 +1,245 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { Card, CloseIcon, DraggableSortable, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
+import classnames from "classnames";
+import { defaultScalarForField } from "../field-helpers.js";
+import { GroupField } from "../group/group-field.js";
+import { SortableItem } from "../sortable-item.js";
+import { useFormContext } from "../../forms/form-context.js";
+import blocks_field_module from "./blocks-field.module.js";
+const BlocksField = ({ field, defaultValue, path })=>{
+    const { appendPatch, getFieldValue, getFieldValues, setFieldStore } = useFormContext();
+    const { t } = useTranslation('byline-admin');
+    const [items, setItems] = useState([]);
+    const [showAddBlockModal, setShowAddBlockModal] = useState(false);
+    const [pendingInsertIndex, setPendingInsertIndex] = useState(null);
+    const availableBlocks = useMemo(()=>field.blocks ?? [], [
+        field.blocks
+    ]);
+    const [selectedBlockName, setSelectedBlockName] = useState(()=>availableBlocks[0]?.blockType ?? '');
+    useEffect(()=>{
+        if (null == selectedBlockName || !availableBlocks.some((b)=>b.blockType === selectedBlockName)) setSelectedBlockName(availableBlocks[0]?.blockType ?? '');
+    }, [
+        availableBlocks,
+        selectedBlockName
+    ]);
+    useEffect(()=>{
+        Array.isArray(defaultValue) ? setItems(defaultValue.map((item)=>({
+                id: item && 'object' == typeof item && '_id' in item ? String(item._id) : crypto.randomUUID(),
+                data: item
+            }))) : setItems([]);
+    }, [
+        defaultValue
+    ]);
+    const handleDragEnd = ({ moveFromIndex, moveToIndex })=>{
+        setItems((prev)=>moveItem(prev, moveFromIndex, moveToIndex));
+        const currentArray = getFieldValue(path) ?? defaultValue;
+        if (Array.isArray(currentArray)) {
+            const clampedFrom = Math.max(0, Math.min(moveFromIndex, currentArray.length - 1));
+            const clampedTo = Math.max(0, Math.min(moveToIndex, currentArray.length - 1));
+            if (clampedFrom === clampedTo) return;
+            const item = currentArray[clampedFrom];
+            const itemId = item && 'object' == typeof item && '_id' in item ? String(item._id) : String(clampedFrom);
+            appendPatch({
+                kind: 'array.move',
+                path: path,
+                itemId,
+                toIndex: clampedTo
+            });
+        }
+    };
+    const handleAddItem = async (forcedVariantName, atIndex)=>{
+        setShowAddBlockModal(false);
+        setPendingInsertIndex(null);
+        const variant = (null != forcedVariantName ? availableBlocks.find((v)=>v.blockType === forcedVariantName) : void 0) ?? availableBlocks[0];
+        if (!variant) return;
+        const compositeFields = variant.fields ?? [];
+        const newId = crypto.randomUUID();
+        const newItem = {
+            _id: newId,
+            _type: variant.blockType
+        };
+        for (const f of compositeFields)newItem[f.name] = await defaultScalarForField(f, getFieldValues);
+        const currentArray = getFieldValue(path) ?? defaultValue;
+        const insertAt = null != atIndex ? atIndex : currentArray ? currentArray.length : 0;
+        const newItemWrapper = {
+            id: newId,
+            data: newItem
+        };
+        setItems((prev)=>{
+            const next = [
+                ...prev
+            ];
+            next.splice(insertAt, 0, newItemWrapper);
+            return next;
+        });
+        appendPatch({
+            kind: 'array.insert',
+            path: path,
+            index: insertAt,
+            item: newItem
+        });
+        const newArrayValue = currentArray ? [
+            ...currentArray
+        ] : [];
+        newArrayValue.splice(insertAt, 0, newItem);
+        setFieldStore(path, newArrayValue);
+    };
+    const handleRemoveItem = (index)=>{
+        const currentArray = getFieldValue(path) ?? defaultValue;
+        if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length) return;
+        const item = currentArray[index];
+        const itemId = item && 'object' == typeof item && '_id' in item ? String(item._id) : String(index);
+        setItems((prev)=>prev.filter((_, i)=>i !== index));
+        appendPatch({
+            kind: 'array.remove',
+            path: path,
+            itemId
+        });
+        const newArrayValue = [
+            ...currentArray
+        ];
+        newArrayValue.splice(index, 1);
+        setFieldStore(path, newArrayValue);
+    };
+    const handleInsertBelow = (index, forcedVariantName)=>{
+        if (availableBlocks.length > 1 && null == forcedVariantName) {
+            setPendingInsertIndex(index + 1);
+            setShowAddBlockModal(true);
+        } else handleAddItem(forcedVariantName, index + 1);
+    };
+    const renderItem = (itemWrapper, index)=>{
+        const item = itemWrapper.data;
+        const arrayElementPath = `${path}[${index}]`;
+        if (!item || 'object' != typeof item || 'string' != typeof item._type) return null;
+        const subField = field.blocks?.find((b)=>b.blockType === item._type);
+        if (null == subField) return null;
+        const { _id, _type, ...fieldData } = item;
+        const label = subField.label ?? _type;
+        const body = /*#__PURE__*/ jsx(GroupField, {
+            field: {
+                type: 'group',
+                name: subField.blockType,
+                fields: subField.fields,
+                label: void 0
+            },
+            defaultValue: fieldData,
+            path: arrayElementPath
+        }, subField.blockType);
+        return /*#__PURE__*/ jsx(SortableItem, {
+            id: itemWrapper.id,
+            label: label ?? subField.blockType,
+            onAddBelow: ()=>handleInsertBelow(index),
+            onRemove: ()=>handleRemoveItem(index),
+            children: body
+        }, itemWrapper.id);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-blocks ${field.name}`,
+        children: [
+            field.label && /*#__PURE__*/ jsx("h3", {
+                className: classnames('byline-field-blocks-title', blocks_field_module.title),
+                children: field.label
+            }),
+            /*#__PURE__*/ jsxs(DraggableSortable, {
+                ids: items.map((i)=>i.id),
+                onDragEnd: handleDragEnd,
+                className: classnames('byline-field-blocks-stack', blocks_field_module.stack),
+                children: [
+                    items.map((item, index)=>renderItem(item, index)),
+                    /*#__PURE__*/ jsx("div", {
+                        className: classnames('byline-field-blocks-add-row', blocks_field_module["add-row"]),
+                        children: /*#__PURE__*/ jsx(IconButton, {
+                            onClick: ()=>{
+                                setPendingInsertIndex(null);
+                                setShowAddBlockModal(true);
+                            },
+                            disabled: !selectedBlockName,
+                            "aria-label": t('fields.blocks.addBlockAriaLabel'),
+                            children: /*#__PURE__*/ jsx(PlusIcon, {})
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: showAddBlockModal,
+                closeOnOverlayClick: true,
+                onDismiss: ()=>{
+                    setShowAddBlockModal(false);
+                    setPendingInsertIndex(null);
+                },
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '600px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Modal.Header, {
+                            className: classnames('byline-field-blocks-modal-head', blocks_field_module["modal-head"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: classnames('byline-field-blocks-modal-title', blocks_field_module["modal-title"]),
+                                    children: t('fields.blocks.modalTitle')
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "arial-label": t('common.actions.close'),
+                                    size: "xs",
+                                    onClick: ()=>{
+                                        setShowAddBlockModal(false);
+                                        setPendingInsertIndex(null);
+                                    },
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "16px",
+                                        height: "16px",
+                                        svgClassName: "white-icon"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Content, {
+                            className: classnames('byline-field-blocks-card-cursor', blocks_field_module["modal-content"]),
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: classnames('byline-field-blocks-grid', blocks_field_module.grid),
+                                children: availableBlocks.map((b, index)=>/*#__PURE__*/ jsxs(Card, {
+                                        hover: true,
+                                        onClick: ()=>void handleAddItem(b.blockType, pendingInsertIndex ?? void 0),
+                                        className: classnames('byline-field-blocks-card', blocks_field_module.card),
+                                        children: [
+                                            /*#__PURE__*/ jsxs(Card.Header, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        className: classnames('byline-field-blocks-card-head', blocks_field_module["card-head"]),
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Card.Title, {
+                                                                className: classnames('byline-field-blocks-card-title', blocks_field_module["card-title"]),
+                                                                children: b.label ?? b.blockType
+                                                            }),
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: classnames('byline-field-blocks-card-index', blocks_field_module["card-index"]),
+                                                                children: index + 1
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx("code", {
+                                                        className: classnames('byline-field-blocks-card-code', blocks_field_module["card-code"]),
+                                                        children: b.blockType
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx(Card.Content, {
+                                                children: /*#__PURE__*/ jsx("p", {
+                                                    className: classnames('byline-field-blocks-card-body', blocks_field_module["card-body"]),
+                                                    children: b.helpText ?? b.label ?? b.blockType
+                                                })
+                                            })
+                                        ]
+                                    }, b.blockType))
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export { BlocksField };

package/dist/fields/blocks/blocks-field.module.js

@@ -0,0 +1,26 @@
+import "./blocks-field_module.css";
+const blocks_field_module = {
+    title: "title-lxXfG6",
+    stack: "stack-Xxa89J",
+    "add-row": "add-row-gEqjM_",
+    addRow: "add-row-gEqjM_",
+    "modal-head": "modal-head-BTxR9C",
+    modalHead: "modal-head-BTxR9C",
+    "modal-title": "modal-title-jwOfU_",
+    modalTitle: "modal-title-jwOfU_",
+    "modal-content": "modal-content-S12b_T",
+    modalContent: "modal-content-S12b_T",
+    grid: "grid-gALL6j",
+    card: "card-O4b_4k",
+    "card-head": "card-head-yrL68H",
+    cardHead: "card-head-yrL68H",
+    "card-title": "card-title-yBgy__",
+    cardTitle: "card-title-yBgy__",
+    "card-index": "card-index-XD_vf6",
+    cardIndex: "card-index-XD_vf6",
+    "card-code": "card-code-pEAcf6",
+    cardCode: "card-code-pEAcf6",
+    "card-body": "card-body-RhabRg",
+    cardBody: "card-body-RhabRg"
+};
+export default blocks_field_module;

package/dist/fields/blocks/blocks-field_module.css

@@ -0,0 +1,107 @@
+:is(.title-lxXfG6, .byline-field-blocks-title) {
+  font-size: 1rem;
+  font-weight: var(--font-weight-medium);
+  margin-bottom: .25rem;
+}
+
+:is(.stack-Xxa89J, .byline-field-blocks-stack) {
+  gap: var(--spacing-16);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.add-row-gEqjM_, .byline-field-blocks-add-row) {
+  align-items: center;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.modal-head-BTxR9C, .byline-field-blocks-modal-head) {
+  margin-bottom: var(--spacing-8);
+  padding-top: 1rem;
+}
+
+:is(.modal-title-jwOfU_, .byline-field-blocks-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+:is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
+  cursor: pointer;
+}
+
+:is(.grid-gALL6j, .byline-field-blocks-grid) {
+  gap: var(--spacing-16);
+  grid-template-columns: 1fr;
+  display: grid;
+}
+
+@media (min-width: 40rem) {
+  :is(.grid-gALL6j, .byline-field-blocks-grid) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 48rem) {
+  :is(.grid-gALL6j, .byline-field-blocks-grid) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+:is(.card-O4b_4k, .byline-field-blocks-card) {
+  margin-bottom: var(--spacing-8);
+}
+
+:is(.card-head-yrL68H, .byline-field-blocks-card-head) {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.card-title-yBgy__, .byline-field-blocks-card-title) {
+  font-size: 1.3rem;
+  line-height: var(--line-height-tight);
+}
+
+:is(.card-index-XD_vf6, .byline-field-blocks-card-index) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-full);
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--gray-400);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-top: .125rem;
+  display: inline-flex;
+}
+
+:is(.card-code-pEAcf6, .byline-field-blocks-card-code) {
+  color: var(--gray-400);
+  margin-top: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  display: block;
+}
+
+:is(.card-body-RhabRg, .byline-field-blocks-card-body) {
+  color: var(--gray-500);
+  font-size: var(--font-size-sm);
+}
+
+:is(:is([data-theme="dark"], .dark) .card-index-XD_vf6, :is([data-theme="dark"], .dark) .byline-field-blocks-card-index) {
+  border-color: var(--gray-700);
+}
+
+:is(:is([data-theme="dark"], .dark) .card-code-pEAcf6, :is([data-theme="dark"], .dark) .byline-field-blocks-card-code) {
+  color: var(--gray-500);
+}
+
+:is(:is([data-theme="dark"], .dark) .card-body-RhabRg, :is([data-theme="dark"], .dark) .byline-field-blocks-card-body) {
+  color: var(--gray-200);
+}
+

package/dist/fields/checkbox/checkbox-field.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { CheckboxField as FieldType } from '@byline/core';
+export declare const CheckboxField: ({ field, value, defaultValue, onChange, id, path, }: {
+    field: FieldType;
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: (value: boolean) => void;
+    id?: string;
+    path?: string;
+}) => import("react").JSX.Element;

package/dist/fields/checkbox/checkbox-field.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@byline/ui/react";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import checkbox_field_module from "./checkbox-field.module.js";
+const CheckboxField = ({ field, value, defaultValue, onChange, id, path })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const checked = value ?? fieldValue ?? defaultValue ?? false;
+    return /*#__PURE__*/ jsx("div", {
+        className: `byline-field-checkbox ${field.name} ${checkbox_field_module["field-checkbox"]}`,
+        children: /*#__PURE__*/ jsx(Checkbox, {
+            id: id ?? fieldPath,
+            name: field.name,
+            label: field.label,
+            checked: checked,
+            size: "sm",
+            helpText: field.helpText,
+            onCheckedChange: (value)=>{
+                const next = 'indeterminate' === value ? false : Boolean(value);
+                onChange?.(next);
+            },
+            error: null != fieldError,
+            errorText: fieldError
+        })
+    });
+};
+export { CheckboxField };