@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/EditableTable.js

@@ -1,146 +1,196 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { useTranslation } from "../hooks/useTranslation.js";
-import "../hooks/index.js";
-import { TableRow } from "./editable-table/TableRow.js";
-import { isGeneratedColumn, isThinColumn } from "./editable-table/helpers.js";
-import { useEditableTableRows } from "./editable-table/useEditableTableRows.js";
-import { useEditableTableDnd } from "./editable-table/useEditableTableDnd.js";
-import { useEditableTableCellChange } from "./editable-table/useEditableTableCellChange.js";
-import { Table, TableBody, TableHead, TableHeader, TableRow as TableRow$1 } from "./Table.js";
-import "./index.js";
-import { Button } from "./Button.js";
-import { useCallback, useMemo } from "react";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/pro-solid-svg-icons";
-import { DragDropProvider } from "@dnd-kit/react";
-import { AutoScroller } from "@dnd-kit/dom";
+import { PkEditableTable, getCustomCellSlotName, isCustomColumn, nextRowId } from "@verbb/plugin-kit-web/components/editable-table/pk-editable-table.js";
 //#region src/components/EditableTable.tsx
-function EditableTable({ columns, rows, onChange, onCellChange = void 0, addRowLabel, allowReorder = true, allowAdd = true, allowDelete = true, className = "", modifyColumn = void 0, modifyRow = void 0, fieldName = void 0, cellErrors = {}, newRowDefaults = {}, renderActions = void 0, renderRowActions = void 0, renderRowMenuItemsBeforeCore = void 0, renderRowMenuItemsAfterCore = void 0, renderRowMenuItems = void 0 }) {
-	const TableRowComponent = TableRow;
-	const t = useTranslation();
-	const normalizedColumns = useMemo(() => {
-		const sourceColumns = Array.isArray(columns) ? columns : [];
-		const validColumns = sourceColumns.filter((column) => {
-			return typeof column?.name === "string" && column.name.trim() !== "";
+var PkEditableTableElement = createPluginKitComponent({
+	tagName: "pk-editable-table",
+	elementClass: PkEditableTable,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onPkCellChange: "pk-cell-change",
+		onPkRowMenuSelect: "pk-row-menu-select",
+		onInput: "input",
+		onChange: "change"
+	}
+});
+function optionalBoolean(name, value) {
+	if (value === void 0) return {};
+	return { [name]: value };
+}
+function cellHasError(cellErrors, fieldName, rowIndex, columnName) {
+	if (!cellErrors) return false;
+	const errors = (fieldName ? cellErrors[`${fieldName}.${rowIndex}.${columnName}`] : void 0) ?? cellErrors[`${rowIndex}.${columnName}`];
+	if (!errors) return false;
+	return Array.isArray(errors) ? errors.length > 0 : Boolean(errors);
+}
+function normalizeColumnsForElement(columns) {
+	if (!Array.isArray(columns)) return [];
+	return columns.map((column) => {
+		const forceCustom = typeof column.renderCell === "function" || column.type === "custom" || typeof column.type === "string" && column.type !== "" && isCustomColumn({
+			name: String(column.name),
+			type: column.type
 		});
-		if (validColumns.length !== sourceColumns.length) {
-			const invalidColumns = sourceColumns.filter((column) => {
-				return !(typeof column?.name === "string" && column.name.trim() !== "");
-			});
-			console.error("EditableTable: column definitions must include a non-empty `name`.", {
-				invalidColumns,
-				columns: sourceColumns
-			});
+		return {
+			name: String(column.name),
+			type: (forceCustom ? "custom" : column.type) || "text",
+			label: column.label,
+			required: column.required,
+			placeholder: column.placeholder,
+			width: column.width,
+			thin: column.thin,
+			options: column.options,
+			source: column.source,
+			allowUnselect: column.allowUnselect,
+			class: column.class || column.className || void 0
+		};
+	});
+}
+function wrapModifyRow(modifyRow) {
+	if (!modifyRow) return null;
+	return (row, rowIndex) => {
+		const result = modifyRow(row, rowIndex);
+		if (!result || typeof result !== "object") return result ?? void 0;
+		if ("cellClassName" in result || "tone" in result) {
+			const typed = result;
+			return {
+				class: typed.class || typed.cellClassName,
+				title: typed.title,
+				tone: typed.tone
+			};
 		}
-		return validColumns;
-	}, [columns]);
-	const generatedColumns = useMemo(() => {
-		return normalizedColumns.filter(isGeneratedColumn);
-	}, [normalizedColumns]);
-	const columnsSignature = useMemo(() => {
-		return JSON.stringify(normalizedColumns.map((column) => {
+		return result;
+	};
+}
+/**
+* Keep stable `_id`s for slotted custom cells. The CE also mints ids, but React
+* projections key slots from the rows prop — without ids on first paint, TipTap
+* cells would mount empty until the next pk-change.
+*/
+function ensureRowIds(rows, previousIds) {
+	if (!Array.isArray(rows)) return {
+		rows: [],
+		ids: [],
+		minted: false
+	};
+	let minted = false;
+	const ids = [];
+	return {
+		rows: rows.map((row, index) => {
+			if (typeof row._id === "string" && row._id !== "") {
+				ids[index] = row._id;
+				return row;
+			}
+			const reused = previousIds[index];
+			const id = reused || nextRowId();
+			if (!reused) minted = true;
+			ids[index] = id;
 			return {
-				name: column.name,
-				type: column.type,
-				label: column.label,
-				required: column.required,
-				placeholder: column.placeholder,
-				options: column.options
+				...row,
+				_id: id
 			};
-		}));
-	}, [normalizedColumns]);
-	const { internalData, setInternalData, internalDataRef, skipNextRowsSyncRef, handleChange, addRow, removeRow, updateRow, moveRow } = useEditableTableRows({
-		rows,
+		}),
+		ids,
+		minted
+	};
+}
+/**
+* React facade over `<pk-editable-table>`.
+* Behavior and styles live in the web component; this layer adds React sugar
+* (`onChange`, `onCellChange`, `renderCell` light-DOM projection, `modifyRow`
+* className alias) without reimplementing the table.
+*/
+var EditableTable = forwardRef(function EditableTable({ allowAdd, allowDelete, allowReorder, columns, rows, cellErrors, fieldName, onChange, onCellChange, onPkChange, onPkCellChange, onPkRowMenuSelect, onRowMenuSelect, modifyColumn, modifyRow, getRowMenuItems, renderRowMenuItemsBeforeCore, children, ...rest }, ref) {
+	const elementRef = useRef(null);
+	const rowIdsRef = useRef([]);
+	useImperativeHandle(ref, () => elementRef.current, []);
+	const { rows: rowsWithIds, ids: nextIds, minted } = useMemo(() => ensureRowIds(rows, rowIdsRef.current), [rows]);
+	rowIdsRef.current = nextIds;
+	useEffect(() => {
+		if (!minted || !onChange) return;
+		onChange(rowsWithIds);
+	}, [
+		minted,
 		onChange,
-		newRowDefaults
-	});
-	const { isDragging, isDndHydrated, effectiveAllowReorder, handleDragStart, handleDragEnd } = useEditableTableDnd({
-		allowReorder,
-		internalData,
-		handleChange
-	});
-	const { handleCellValueChange } = useEditableTableCellChange({
-		internalData,
-		internalDataRef,
-		setInternalData,
-		skipNextRowsSyncRef,
-		generatedColumns,
-		onCellChange,
-		updateRow,
-		handleChange
-	});
-	const getCellErrors = useCallback((rowIndex, columnName) => {
-		if (!fieldName) return [];
-		const key = `${fieldName}.${rowIndex}.${columnName}`;
-		const errors = cellErrors?.[key];
-		if (!errors) return [];
-		return Array.isArray(errors) ? errors : [errors];
-	}, [cellErrors, fieldName]);
-	return /* @__PURE__ */ jsxs("div", {
-		className,
-		children: [
-			typeof renderActions === "function" ? renderActions({
-				rows: internalData,
-				addRow,
-				isDragging
-			}) : null,
-			/* @__PURE__ */ jsx(DragDropProvider, {
-				plugins: useCallback((defaults) => {
-					return defaults.filter((plugin) => {
-						return plugin !== AutoScroller;
-					});
-				}, []),
-				onDragStart: handleDragStart,
-				onDragEnd: handleDragEnd,
-				children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow$1, { children: [normalizedColumns.map((column) => {
-					return /* @__PURE__ */ jsxs(TableHead, {
-						className: cn(column.className, isThinColumn(column) && "w-[1%] whitespace-nowrap"),
-						children: [column.label, column.required && /* @__PURE__ */ jsx("span", {
-							className: "text-error ml-1",
-							children: "*"
-						})]
-					}, column.name);
-				}), (allowReorder || allowDelete) && /* @__PURE__ */ jsx(TableHead, { className: "p-0 w-0" })] }) }), /* @__PURE__ */ jsx(TableBody, { children: internalData.map((row, rowIndex) => {
-					return /* @__PURE__ */ jsx(TableRowComponent, {
+		rowsWithIds
+	]);
+	const elementColumns = useMemo(() => normalizeColumnsForElement(columns), [columns]);
+	const resolvedGetRowMenuItems = getRowMenuItems ?? renderRowMenuItemsBeforeCore ?? null;
+	const resolvedModifyRow = useMemo(() => wrapModifyRow(modifyRow), [modifyRow]);
+	const handlePkChange = useCallback((event) => {
+		onPkChange?.(event);
+		if (!onChange) return;
+		const detail = event.detail;
+		if (detail?.rows) onChange(detail.rows);
+	}, [onChange, onPkChange]);
+	const handlePkCellChange = useCallback((event) => {
+		onPkCellChange?.(event);
+		if (!onCellChange) return;
+		const detail = event.detail;
+		if (!detail) return;
+		onCellChange(detail.rowIndex, detail.columnName, detail.value, detail.row);
+	}, [onCellChange, onPkCellChange]);
+	const handlePkRowMenuSelect = useCallback((event) => {
+		onPkRowMenuSelect?.(event);
+		if (!onRowMenuSelect) return;
+		const detail = event.detail;
+		if (detail) onRowMenuSelect(detail);
+	}, [onPkRowMenuSelect, onRowMenuSelect]);
+	const customCellProjections = useMemo(() => {
+		if (!Array.isArray(columns) || rowsWithIds.length === 0) return null;
+		const projections = [];
+		rowsWithIds.forEach((row, rowIndex) => {
+			const rowId = String(row._id);
+			columns.forEach((column) => {
+				if (typeof column.renderCell !== "function") return;
+				const columnName = String(column.name);
+				const slotName = getCustomCellSlotName(rowId, columnName);
+				const isInvalid = cellHasError(cellErrors, typeof fieldName === "string" ? fieldName : void 0, rowIndex, columnName);
+				projections.push(/* @__PURE__ */ jsx("div", {
+					slot: slotName,
+					className: typeof column.contentClassName === "string" ? column.contentClassName : void 0,
+					children: column.renderCell({
+						column,
 						row,
 						rowIndex,
-						rowCount: internalData.length,
-						columns: normalizedColumns,
-						columnsSignature,
-						useDnd: allowReorder && isDndHydrated,
-						allowReorder: effectiveAllowReorder && isDndHydrated,
-						showReorderControls: allowReorder,
-						allowDelete,
-						modifyColumn,
-						modifyRow,
-						getCellErrors,
-						onUpdateCell: handleCellValueChange,
-						moveRow,
-						removeRow,
-						t,
-						renderRowActions,
-						renderRowMenuItemsBeforeCore,
-						renderRowMenuItemsAfterCore,
-						renderRowMenuItems
-					}, row._id);
-				}) })] })
-			}),
-			allowAdd && /* @__PURE__ */ jsxs(Button, {
-				type: "button",
-				variant: "dashed",
-				onClick: addRow,
-				className: cn("w-full rounded-t-none! border-t-0!", isDragging && "pointer-events-none"),
-				children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
-					icon: faPlus,
-					className: "size-3 mr-1"
-				}), addRowLabel || t("Add row")]
-			})
-		]
+						value: row[columnName],
+						isInvalid,
+						updateValue: (next) => {
+							elementRef.current?.setCellValue(rowIndex, columnName, next);
+						}
+					})
+				}, slotName));
+			});
+		});
+		return projections.length > 0 ? projections : null;
+	}, [
+		cellErrors,
+		columns,
+		fieldName,
+		rowsWithIds
+	]);
+	return /* @__PURE__ */ jsxs(PkEditableTableElement, {
+		ref: elementRef,
+		...rest,
+		columns: elementColumns,
+		rows: rowsWithIds,
+		cellErrors,
+		fieldName,
+		modifyColumn: modifyColumn ?? null,
+		modifyRow: resolvedModifyRow,
+		getRowMenuItems: resolvedGetRowMenuItems,
+		...optionalBoolean("allowAdd", allowAdd),
+		...optionalBoolean("allowDelete", allowDelete),
+		...optionalBoolean("allowReorder", allowReorder),
+		...onChange || onPkChange ? { onPkChange: handlePkChange } : {},
+		...onCellChange || onPkCellChange ? { onPkCellChange: handlePkCellChange } : {},
+		...onRowMenuSelect || onPkRowMenuSelect ? { onPkRowMenuSelect: handlePkRowMenuSelect } : {},
+		children: [customCellProjections, children]
 	});
-}
+});
+EditableTable.displayName = "EditableTable";
 //#endregion
-export { EditableTable };
+export { EditableTable, PkEditableTableElement, getCustomCellSlotName };
 
 //# sourceMappingURL=EditableTable.js.map

package/dist/components/EditableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableTable.js","names":[],"sources":["../../src/components/EditableTable.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { AutoScroller } from '@dnd-kit/dom';\nimport {\n    Button,\n    Table,\n    TableHeader,\n    TableBody,\n    TableRow as UITableRow,\n    TableHead,\n} from '@verbb/plugin-kit-react/components';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableRow } from './editable-table/TableRow';\nimport { isGeneratedColumn, isThinColumn } from './editable-table/helpers';\nimport { useEditableTableRows } from './editable-table/useEditableTableRows';\nimport { useEditableTableDnd } from './editable-table/useEditableTableDnd';\nimport { useEditableTableCellChange } from './editable-table/useEditableTableCellChange';\nimport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableModifyRow,\n    EditableTableOnCellChange,\n    EditableTableRow,\n    EditableTableRowActionArgs,\n} from './editable-table/types';\n\nexport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableModifyColumnResult,\n    EditableTableModifyRow,\n    EditableTableOnCellChange,\n    EditableTableRow,\n    EditableTableRowActionArgs,\n} from './editable-table/types';\n\nexport type EditableTableProps = {\n    columns: EditableTableColumn[];\n    rows: EditableTableRow[];\n    onChange: (rows: EditableTableRow[]) => void;\n    onCellChange?: EditableTableOnCellChange;\n    addRowLabel?: string;\n    allowReorder?: boolean;\n    allowAdd?: boolean;\n    allowDelete?: boolean;\n    className?: string;\n    modifyColumn?: EditableTableModifyColumn;\n    modifyRow?: EditableTableModifyRow;\n    fieldName?: string;\n    cellErrors?: Record<string, unknown>;\n    newRowDefaults?: Record<string, unknown>;\n    renderActions?: (args: { rows: EditableTableRow[]; addRow: () => void; isDragging: boolean }) => React.ReactNode;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\ntype TableRowComponentProps = {\n    row: EditableTableRow;\n    rowIndex: number;\n    rowCount: number;\n    columns: EditableTableColumn[];\n    columnsSignature: string;\n    useDnd: boolean;\n    allowReorder: boolean;\n    showReorderControls: boolean;\n    allowDelete: boolean;\n    modifyColumn?: EditableTableModifyColumn;\n    modifyRow?: EditableTableModifyRow;\n    getCellErrors: (rowIndex: number, columnName: string) => unknown[];\n    onUpdateCell: (rowIndex: number, row: EditableTableRow, column: EditableTableColumn, newValue: unknown) => void;\n    moveRow: (row: EditableTableRow, direction: number) => void;\n    removeRow: (row: EditableTableRow) => void;\n    t: (key: string) => string;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\nexport function EditableTable({\n    columns,\n    rows,\n    onChange,\n    onCellChange = undefined,\n    addRowLabel,\n    allowReorder = true,\n    allowAdd = true,\n    allowDelete = true,\n    className = '',\n    modifyColumn = undefined,\n    modifyRow = undefined,\n    fieldName = undefined,\n    cellErrors = {},\n    newRowDefaults = {},\n    renderActions = undefined,\n    renderRowActions = undefined,\n    renderRowMenuItemsBeforeCore = undefined,\n    renderRowMenuItemsAfterCore = undefined,\n    renderRowMenuItems = undefined,\n}: EditableTableProps) {\n    const TableRowComponent = TableRow as React.ComponentType<TableRowComponentProps>;\n    const t = useTranslation();\n    const normalizedColumns = useMemo(() => {\n        const sourceColumns = Array.isArray(columns) ? columns : [];\n        const validColumns = sourceColumns.filter((column) => {\n            return typeof column?.name === 'string' && column.name.trim() !== '';\n        });\n\n        if (validColumns.length !== sourceColumns.length) {\n            const invalidColumns = sourceColumns.filter((column) => {\n                return !(typeof column?.name === 'string' && column.name.trim() !== '');\n            });\n\n            console.error(\n                'EditableTable: column definitions must include a non-empty `name`.',\n                { invalidColumns, columns: sourceColumns },\n            );\n        }\n\n        return validColumns;\n    }, [columns]);\n\n    const generatedColumns = useMemo(() => {\n        return normalizedColumns.filter(isGeneratedColumn);\n    }, [normalizedColumns]);\n\n    const columnsSignature = useMemo(() => {\n        return JSON.stringify(normalizedColumns.map((column) => {\n            return {\n                name: column.name,\n                type: column.type,\n                label: column.label,\n                required: column.required,\n                placeholder: column.placeholder,\n                options: column.options,\n            };\n        }));\n    }, [normalizedColumns]);\n\n    const {\n        internalData,\n        setInternalData,\n        internalDataRef,\n        skipNextRowsSyncRef,\n        handleChange,\n        addRow,\n        removeRow,\n        updateRow,\n        moveRow,\n    } = useEditableTableRows({\n        rows,\n        onChange,\n        newRowDefaults,\n    });\n\n    const {\n        isDragging,\n        isDndHydrated,\n        effectiveAllowReorder,\n        handleDragStart,\n        handleDragEnd,\n    } = useEditableTableDnd({\n        allowReorder,\n        internalData,\n        handleChange,\n    });\n\n    const {\n        handleCellValueChange,\n    } = useEditableTableCellChange({\n        internalData,\n        internalDataRef,\n        setInternalData,\n        skipNextRowsSyncRef,\n        generatedColumns,\n        onCellChange,\n        updateRow,\n        handleChange,\n    });\n\n    const getCellErrors = useCallback((rowIndex: number, columnName: string) => {\n        if (!fieldName) {\n            return [];\n        }\n\n        const key = `${fieldName}.${rowIndex}.${columnName}`;\n        const errors = cellErrors?.[key];\n        if (!errors) {\n            return [];\n        }\n\n        return Array.isArray(errors) ? errors : [errors];\n    }, [cellErrors, fieldName]);\n\n    const actions = typeof renderActions === 'function'\n        ? renderActions({\n            rows: internalData,\n            addRow,\n            isDragging,\n        })\n        : null;\n\n    const dragDropPlugins = useCallback((defaults) => {\n        return defaults.filter((plugin) => { return plugin !== AutoScroller; });\n    }, []);\n\n    return (\n        <div className={className}>\n            {actions}\n\n            <DragDropProvider\n                plugins={dragDropPlugins}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <Table>\n                    <TableHeader>\n                        <UITableRow>\n                            {normalizedColumns.map((column) => {\n                                return (\n                                    <TableHead key={column.name} className={cn(column.className, isThinColumn(column) && 'w-[1%] whitespace-nowrap')}>\n                                        {column.label}\n                                        {column.required && <span className=\"text-error ml-1\">*</span>}\n                                    </TableHead>\n                                );\n                            })}\n                            {(allowReorder || allowDelete) && <TableHead className=\"p-0 w-0\"></TableHead>}\n                        </UITableRow>\n                    </TableHeader>\n                    <TableBody>\n                        {internalData.map((row, rowIndex) => {\n                            return (\n                                <TableRowComponent\n                                    key={row._id}\n                                    row={row}\n                                    rowIndex={rowIndex}\n                                    rowCount={internalData.length}\n                                    columns={normalizedColumns}\n                                    columnsSignature={columnsSignature}\n                                    useDnd={allowReorder && isDndHydrated}\n                                    allowReorder={effectiveAllowReorder && isDndHydrated}\n                                    showReorderControls={allowReorder}\n                                    allowDelete={allowDelete}\n                                    modifyColumn={modifyColumn}\n                                    modifyRow={modifyRow}\n                                    getCellErrors={getCellErrors}\n                                    onUpdateCell={handleCellValueChange}\n                                    moveRow={moveRow}\n                                    removeRow={removeRow}\n                                    t={t}\n                                    renderRowActions={renderRowActions}\n                                    renderRowMenuItemsBeforeCore={renderRowMenuItemsBeforeCore}\n                                    renderRowMenuItemsAfterCore={renderRowMenuItemsAfterCore}\n                                    renderRowMenuItems={renderRowMenuItems}\n                                />\n                            );\n                        })}\n                    </TableBody>\n                </Table>\n            </DragDropProvider>\n\n            {allowAdd && (\n                <Button\n                    type=\"button\"\n                    variant=\"dashed\"\n                    onClick={addRow}\n                    className={cn('w-full rounded-t-none! border-t-0!', isDragging && 'pointer-events-none')}\n                >\n                    <FontAwesomeIcon icon={faPlus} className=\"size-3 mr-1\" />\n                    {addRowLabel || t('Add row')}\n                </Button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EditableTable.js","names":[],"sources":["../../src/components/EditableTable.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    type ReactNode,\n} from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport {\n    getCustomCellSlotName,\n    isCustomColumn,\n    nextRowId,\n    PkEditableTable,\n    type PkEditableTableColumn,\n    type PkEditableTableColumnType,\n    type PkEditableTableGetRowMenuItems,\n    type PkEditableTableModifyColumn,\n    type PkEditableTableModifyRow,\n    type PkEditableTableOption,\n    type PkEditableTableRow,\n    type PkEditableTableRowMenuItem,\n    type PkEditableTableRowModifier,\n} from '@verbb/plugin-kit-web/components/editable-table/pk-editable-table.js';\n\nconst PkEditableTableElement = createPluginKitComponent({\n    tagName: 'pk-editable-table',\n    elementClass: PkEditableTable,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkCellChange: 'pk-cell-change',\n        onPkRowMenuSelect: 'pk-row-menu-select',\n        onInput: 'input',\n        onChange: 'change',\n    },\n});\n\ntype PkEditableTableElementProps = React.ComponentProps<typeof PkEditableTableElement>;\n\nexport type EditableTableCellRenderContext = {\n    column: EditableTableColumn;\n    row: PkEditableTableRow;\n    rowIndex: number;\n    value: unknown;\n    isInvalid: boolean;\n    updateValue: (next: unknown) => void;\n};\n\n/**\n * Column shape for the React facade. Extra keys (Formie metadata, `renderCell`,\n * `className`) are stripped / remapped before forwarding to the web component.\n */\nexport type EditableTableColumn = Omit<PkEditableTableColumn, 'type' | 'class'> & {\n    type?: PkEditableTableColumnType | (string & {});\n    /** Maps to the CE `class` field. */\n    className?: string;\n    class?: string;\n    /**\n     * Optional class on the light-DOM projection wrapper for custom cells.\n     * Built-in cell types ignore this (shadow cells cannot take host Tailwind).\n     */\n    contentClassName?: string;\n    /** When set, the column is forced to `type: 'custom'` and content is projected. */\n    renderCell?: (context: EditableTableCellRenderContext) => ReactNode;\n};\n\nexport type EditableTableRowMenuSelectDetail = {\n    rowIndex: number;\n    row: PkEditableTableRow;\n    item: PkEditableTableRowMenuItem;\n    action: string;\n    value: string;\n};\n\nexport type EditableTableProps = Omit<\n    PkEditableTableElementProps,\n    'onChange' | 'columns' | 'modifyColumn' | 'modifyRow' | 'getRowMenuItems' | 'children'\n> & {\n    columns?: EditableTableColumn[];\n    /**\n     * Controlled rows callback — sugar over `onPkChange` detail.\n     * Prefer this in React apps; `onPkChange` remains for CE parity.\n     */\n    onChange?: (rows: PkEditableTableRow[]) => void;\n    /**\n     * Per-cell sugar over `pk-cell-change`.\n     * Signature matches Formie's historical `(rowIndex, columnName, value)` binding.\n     */\n    onCellChange?: (rowIndex: number, columnName: string, value: unknown, row?: PkEditableTableRow) => void;\n    modifyColumn?: PkEditableTableModifyColumn | null;\n    /**\n     * Per-row chrome. Accepts CE shape (`class` / `title`) or Formie's\n     * transitional `{ cellClassName, title }`.\n     */\n    modifyRow?: ((\n        row: PkEditableTableRow,\n        rowIndex: number,\n    ) => PkEditableTableRowModifier | { cellClassName?: string; title?: string; tone?: PkEditableTableRowModifier['tone'] } | null | undefined) | null;\n    getRowMenuItems?: PkEditableTableGetRowMenuItems | null;\n    /**\n     * @deprecated Prefer `getRowMenuItems`. Alias kept so Formie can migrate call sites.\n     */\n    renderRowMenuItemsBeforeCore?: PkEditableTableGetRowMenuItems | null;\n    onRowMenuSelect?: (detail: EditableTableRowMenuSelectDetail) => void;\n};\n\nfunction optionalBoolean(name: 'allowAdd' | 'allowDelete' | 'allowReorder', value: boolean | undefined) {\n    // Defaults live on the CE (`true`). Only forward when the caller sets a value —\n    // including `false`, which `trueBooleanProps` would drop.\n    if (value === undefined) {\n        return {};\n    }\n\n    return { [name]: value };\n}\n\nfunction cellHasError(\n    cellErrors: Record<string, string[] | string> | undefined,\n    fieldName: string | undefined,\n    rowIndex: number,\n    columnName: string,\n): boolean {\n    if (!cellErrors) {\n        return false;\n    }\n\n    const prefixed = fieldName ? cellErrors[`${fieldName}.${rowIndex}.${columnName}`] : undefined;\n    const bare = cellErrors[`${rowIndex}.${columnName}`];\n    const errors = prefixed ?? bare;\n    if (!errors) {\n        return false;\n    }\n\n    return Array.isArray(errors) ? errors.length > 0 : Boolean(errors);\n}\n\nfunction normalizeColumnsForElement(columns: EditableTableColumn[] | undefined): PkEditableTableColumn[] {\n    if (!Array.isArray(columns)) {\n        return [];\n    }\n\n    return columns.map((column) => {\n        const forceCustom = typeof column.renderCell === 'function'\n            || column.type === 'custom'\n            || (typeof column.type === 'string'\n                && column.type !== ''\n                && isCustomColumn({ name: String(column.name), type: column.type as PkEditableTableColumnType }));\n\n        return {\n            name: String(column.name),\n            type: (forceCustom ? 'custom' : (column.type as PkEditableTableColumnType | undefined)) || 'text',\n            label: column.label,\n            required: column.required,\n            placeholder: column.placeholder,\n            width: column.width,\n            thin: column.thin,\n            options: column.options,\n            source: column.source,\n            allowUnselect: column.allowUnselect,\n            class: column.class || column.className || undefined,\n        };\n    });\n}\n\nfunction wrapModifyRow(\n    modifyRow: EditableTableProps['modifyRow'],\n): PkEditableTableModifyRow | null {\n    if (!modifyRow) {\n        return null;\n    }\n\n    return (row, rowIndex) => {\n        const result = modifyRow(row, rowIndex);\n        if (!result || typeof result !== 'object') {\n            return result ?? undefined;\n        }\n\n        if ('cellClassName' in result || 'tone' in result) {\n            const typed = result as {\n                cellClassName?: string;\n                title?: string;\n                class?: string;\n                tone?: PkEditableTableRowModifier['tone'];\n            };\n            return {\n                class: typed.class || typed.cellClassName,\n                title: typed.title,\n                tone: typed.tone,\n            };\n        }\n\n        return result as PkEditableTableRowModifier;\n    };\n}\n\n/**\n * Keep stable `_id`s for slotted custom cells. The CE also mints ids, but React\n * projections key slots from the rows prop — without ids on first paint, TipTap\n * cells would mount empty until the next pk-change.\n */\nfunction ensureRowIds(\n    rows: PkEditableTableRow[] | undefined,\n    previousIds: string[],\n): { rows: PkEditableTableRow[]; ids: string[]; minted: boolean } {\n    if (!Array.isArray(rows)) {\n        return { rows: [], ids: [], minted: false };\n    }\n\n    let minted = false;\n    const ids: string[] = [];\n    const nextRows = rows.map((row, index) => {\n        if (typeof row._id === 'string' && row._id !== '') {\n            ids[index] = row._id;\n            return row;\n        }\n\n        const reused = previousIds[index];\n        const id = reused || nextRowId();\n        if (!reused) {\n            minted = true;\n        }\n        ids[index] = id;\n        return { ...row, _id: id };\n    });\n\n    return { rows: nextRows, ids, minted };\n}\n\n/**\n * React facade over `<pk-editable-table>`.\n * Behavior and styles live in the web component; this layer adds React sugar\n * (`onChange`, `onCellChange`, `renderCell` light-DOM projection, `modifyRow`\n * className alias) without reimplementing the table.\n */\nexport const EditableTable = forwardRef<PkEditableTable, EditableTableProps>(function EditableTable(\n    {\n        allowAdd,\n        allowDelete,\n        allowReorder,\n        columns,\n        rows,\n        cellErrors,\n        fieldName,\n        onChange,\n        onCellChange,\n        onPkChange,\n        onPkCellChange,\n        onPkRowMenuSelect,\n        onRowMenuSelect,\n        modifyColumn,\n        modifyRow,\n        getRowMenuItems,\n        renderRowMenuItemsBeforeCore,\n        children,\n        ...rest\n    },\n    ref,\n) {\n    const elementRef = useRef<PkEditableTable | null>(null);\n    const rowIdsRef = useRef<string[]>([]);\n\n    useImperativeHandle(ref, () => elementRef.current as PkEditableTable, []);\n\n    const { rows: rowsWithIds, ids: nextIds, minted } = useMemo(\n        () => ensureRowIds(rows as PkEditableTableRow[] | undefined, rowIdsRef.current),\n        [rows],\n    );\n    rowIdsRef.current = nextIds;\n\n    // Push minted ids into controlled state so subsequent renders stay stable.\n    useEffect(() => {\n        if (!minted || !onChange) {\n            return;\n        }\n\n        onChange(rowsWithIds);\n    }, [minted, onChange, rowsWithIds]);\n\n    const elementColumns = useMemo(() => normalizeColumnsForElement(columns), [columns]);\n    const resolvedGetRowMenuItems = getRowMenuItems ?? renderRowMenuItemsBeforeCore ?? null;\n    const resolvedModifyRow = useMemo(() => wrapModifyRow(modifyRow), [modifyRow]);\n\n    const handlePkChange = useCallback(\n        (event: Event) => {\n            onPkChange?.(event as Parameters<NonNullable<PkEditableTableElementProps['onPkChange']>>[0]);\n            if (!onChange) {\n                return;\n            }\n\n            const detail = (event as CustomEvent<{ rows: PkEditableTableRow[] }>).detail;\n            if (detail?.rows) {\n                onChange(detail.rows);\n            }\n        },\n        [onChange, onPkChange],\n    );\n\n    const handlePkCellChange = useCallback(\n        (event: Event) => {\n            onPkCellChange?.(event as Parameters<NonNullable<PkEditableTableElementProps['onPkCellChange']>>[0]);\n            if (!onCellChange) {\n                return;\n            }\n\n            const detail = (event as CustomEvent<{\n                rowIndex: number;\n                columnName: string;\n                value: unknown;\n                row: PkEditableTableRow;\n            }>).detail;\n            if (!detail) {\n                return;\n            }\n\n            onCellChange(detail.rowIndex, detail.columnName, detail.value, detail.row);\n        },\n        [onCellChange, onPkCellChange],\n    );\n\n    const handlePkRowMenuSelect = useCallback(\n        (event: Event) => {\n            onPkRowMenuSelect?.(event as Parameters<NonNullable<PkEditableTableElementProps['onPkRowMenuSelect']>>[0]);\n            if (!onRowMenuSelect) {\n                return;\n            }\n\n            const detail = (event as CustomEvent<EditableTableRowMenuSelectDetail>).detail;\n            if (detail) {\n                onRowMenuSelect(detail);\n            }\n        },\n        [onPkRowMenuSelect, onRowMenuSelect],\n    );\n\n    const customCellProjections = useMemo(() => {\n        if (!Array.isArray(columns) || rowsWithIds.length === 0) {\n            return null;\n        }\n\n        const projections: ReactNode[] = [];\n\n        rowsWithIds.forEach((row, rowIndex) => {\n            const rowId = String(row._id);\n            columns.forEach((column) => {\n                if (typeof column.renderCell !== 'function') {\n                    return;\n                }\n\n                const columnName = String(column.name);\n                const slotName = getCustomCellSlotName(rowId, columnName);\n                const isInvalid = cellHasError(\n                    cellErrors as Record<string, string[] | string> | undefined,\n                    typeof fieldName === 'string' ? fieldName : undefined,\n                    rowIndex,\n                    columnName,\n                );\n\n                projections.push(\n                    <div\n                        key={slotName}\n                        slot={slotName}\n                        className={typeof column.contentClassName === 'string' ? column.contentClassName : undefined}\n                    >\n                        {column.renderCell({\n                            column,\n                            row,\n                            rowIndex,\n                            value: row[columnName],\n                            isInvalid,\n                            updateValue: (next) => {\n                                elementRef.current?.setCellValue(rowIndex, columnName, next);\n                            },\n                        })}\n                    </div>,\n                );\n            });\n        });\n\n        return projections.length > 0 ? projections : null;\n    }, [cellErrors, columns, fieldName, rowsWithIds]);\n\n    return (\n        <PkEditableTableElement\n            ref={elementRef}\n            {...rest}\n            columns={elementColumns}\n            rows={rowsWithIds}\n            cellErrors={cellErrors}\n            fieldName={fieldName}\n            modifyColumn={modifyColumn ?? null}\n            modifyRow={resolvedModifyRow}\n            getRowMenuItems={resolvedGetRowMenuItems}\n            {...optionalBoolean('allowAdd', allowAdd)}\n            {...optionalBoolean('allowDelete', allowDelete)}\n            {...optionalBoolean('allowReorder', allowReorder)}\n            {...(onChange || onPkChange ? { onPkChange: handlePkChange } : {})}\n            {...(onCellChange || onPkCellChange ? { onPkCellChange: handlePkCellChange } : {})}\n            {...(onRowMenuSelect || onPkRowMenuSelect ? { onPkRowMenuSelect: handlePkRowMenuSelect } : {})}\n        >\n            {customCellProjections}\n            {children}\n        </PkEditableTableElement>\n    );\n});\n\nEditableTable.displayName = 'EditableTable';\n\nexport { PkEditableTableElement, getCustomCellSlotName };\nexport type {\n    PkEditableTableColumn,\n    PkEditableTableColumnType,\n    PkEditableTableGetRowMenuItems,\n    PkEditableTableModifyColumn,\n    PkEditableTableModifyRow,\n    PkEditableTableOption,\n    PkEditableTableRow,\n    PkEditableTableRowMenuItem,\n    PkEditableTableRowModifier,\n};\n\n/** @deprecated Use `PkEditableTableColumn` — alias kept for transitional imports. */\nexport type EditableTableColumnAlias = PkEditableTableColumn;\n/** @deprecated Use `PkEditableTableRow` — alias kept for transitional imports. */\nexport type EditableTableRow = PkEditableTableRow;\n"],"mappings":"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"}

package/dist/components/Field.d.ts

@@ -0,0 +1,13 @@
+import { default as React, ReactNode } from 'react';
+import { PkField } from '@verbb/plugin-kit-web/components/field/pk-field.js';
+declare const PkFieldElement: import('@lit/react').ReactWebComponent<PkField, {}>;
+type PkFieldElementProps = React.ComponentProps<typeof PkFieldElement>;
+export type FieldProps = Omit<PkFieldElementProps, 'children'> & {
+    /** Trailing header actions — rendered into `slot="header-end"`. */
+    headerEnd?: ReactNode;
+    children?: ReactNode;
+};
+/** React facade over `<pk-field>`. Behavior and styles live in the web component. */
+export declare const Field: React.ForwardRefExoticComponent<Omit<FieldProps, "ref"> & React.RefAttributes<PkField>>;
+export { PkFieldElement };
+//# sourceMappingURL=Field.d.ts.map

package/dist/components/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,OAAO,EAAE,MAAM,oDAAoD,CAAC;AAI7E,QAAA,MAAM,cAAc,qDAIlB,CAAC;AAEH,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,GAAG;IAC7D,mEAAmE;IACnE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,KAAK,yFAmBhB,CAAC;AAIH,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Field.js

@@ -0,0 +1,32 @@
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef } from "react";
+import { PkField } from "@verbb/plugin-kit-web/components/field/pk-field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Field.tsx
+var PkFieldElement = createPluginKitComponent({
+	tagName: "pk-field",
+	elementClass: PkField,
+	react: React
+});
+/** React facade over `<pk-field>`. Behavior and styles live in the web component. */
+var Field = forwardRef(function Field(props, ref) {
+	const { required, translatable, headerEnd, children, ...rest } = props;
+	return /* @__PURE__ */ jsxs(PkFieldElement, {
+		ref,
+		...rest,
+		...trueBooleanProps(["required", "translatable"], {
+			required,
+			translatable
+		}),
+		children: [headerEnd ? /* @__PURE__ */ jsx("div", {
+			slot: "header-end",
+			children: headerEnd
+		}) : null, children]
+	});
+});
+Field.displayName = "Field";
+//#endregion
+export { Field, PkFieldElement };
+
+//# sourceMappingURL=Field.js.map

package/dist/components/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../src/components/Field.tsx"],"sourcesContent":["import React, { forwardRef, type ReactNode } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkField } from '@verbb/plugin-kit-web/components/field/pk-field.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkFieldElement = createPluginKitComponent({\n    tagName: 'pk-field',\n    elementClass: PkField,\n    react: React,\n});\n\ntype PkFieldElementProps = React.ComponentProps<typeof PkFieldElement>;\n\nexport type FieldProps = Omit<PkFieldElementProps, 'children'> & {\n    /** Trailing header actions — rendered into `slot=\"header-end\"`. */\n    headerEnd?: ReactNode;\n    children?: ReactNode;\n};\n\n/** React facade over `<pk-field>`. Behavior and styles live in the web component. */\nexport const Field = forwardRef<PkField, FieldProps>(function Field(props, ref) {\n    const {\n        required,\n        translatable,\n        headerEnd,\n        children,\n        ...rest\n    } = props;\n\n    return (\n        <PkFieldElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['required', 'translatable'], { required, translatable })}\n        >\n            {headerEnd ? <div slot=\"header-end\">{headerEnd}</div> : null}\n            {children}\n        </PkFieldElement>\n    );\n});\n\nField.displayName = 'Field';\n\nexport { PkFieldElement };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,yBAAyB;CAC5C,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;;AAWF,IAAa,QAAQ,WAAgC,SAAS,MAAM,OAAO,KAAK;CAC5E,MAAM,EACF,UACA,cACA,WACA,UACA,GAAG,SACH;AAEJ,QACI,qBAAC,gBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB,CAAC,YAAY,eAAe,EAAE;GAAE;GAAU;GAAc,CAAC;YAHlF,CAKK,YAAY,oBAAC,OAAD;GAAK,MAAK;aAAc;GAAgB,CAAA,GAAG,MACvD,SACY;;EAEvB;AAEF,MAAM,cAAc"}

package/dist/components/Icon.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { PkIcon } from '@verbb/plugin-kit-web/components/icon/pk-icon.js';
+/** React facade over `<pk-icon>`. Behavior and styles live in the web component. */
+export declare const PkIconElement: import('@lit/react').ReactWebComponent<PkIcon, {}>;
+export declare const Icon: import('@lit/react').ReactWebComponent<PkIcon, {}>;
+export type IconProps = React.ComponentProps<typeof PkIconElement>;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,kDAAkD,CAAC;AAE1E,oFAAoF;AACpF,eAAO,MAAM,aAAa,oDAIxB,CAAC;AAEH,eAAO,MAAM,IAAI,oDAAgB,CAAC;AAClC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Icon.js

@@ -0,0 +1,15 @@
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkIcon } from "@verbb/plugin-kit-web/components/icon/pk-icon.js";
+//#region src/components/Icon.tsx
+/** React facade over `<pk-icon>`. Behavior and styles live in the web component. */
+var PkIconElement = createPluginKitComponent({
+	tagName: "pk-icon",
+	elementClass: PkIcon,
+	react: React
+});
+var Icon = PkIconElement;
+//#endregion
+export { Icon, PkIconElement };
+
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkIcon } from '@verbb/plugin-kit-web/components/icon/pk-icon.js';\n\n/** React facade over `<pk-icon>`. Behavior and styles live in the web component. */\nexport const PkIconElement = createPluginKitComponent({\n    tagName: 'pk-icon',\n    elementClass: PkIcon,\n    react: React,\n});\n\nexport const Icon = PkIconElement;\nexport type IconProps = React.ComponentProps<typeof PkIconElement>;\n"],"mappings":";;;;;AAKA,IAAa,gBAAgB,yBAAyB;CAClD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,OAAO"}

package/dist/components/Input.d.ts

@@ -1,9 +1,21 @@
-import { ComponentProps } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const inputVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    width?: "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Input({ className, type, size, width, ...props }: Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>): import("react/jsx-runtime").JSX.Element;
-export { Input };
+import { default as React } from 'react';
+import { PkInput, PkInputSize } from '@verbb/plugin-kit-web/components/input/pk-input.js';
+declare const PkInputElement: import('@lit/react').ReactWebComponent<PkInput, {
+    onInput: string;
+    onChange: string;
+    onPkClear: string;
+    onFocus: string;
+    onBlur: string;
+}>;
+type PkInputElementProps = React.ComponentProps<typeof PkInputElement>;
+/** React facade over `<pk-input>`. Behavior and styles live in the web component. */
+export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkInput>, "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onInput" | "form" | "input" | "label" | "select" | "pattern" | "value" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "instructions" | "required" | "step" | "name" | "type" | "size" | "placeholder" | "readonly" | "invalid" | "autocomplete" | "min" | "max" | "assumeInteractionOn" | "validators" | "customError" | "valueHasChanged" | "hasInteracted" | "formResetCallback" | "formDisabledCallback" | "formStateRestoreCallback" | "labels" | "validity" | "willValidate" | "validationMessage" | "getForm" | "checkValidity" | "reportValidity" | "resetValidity" | "setCustomValidity" | "fitCell" | "onPkClear" | "withClear" | "withLabel" | "withInstructions" | "mono" | "minlength" | "maxlength"> & {
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+    onPkClear?: ((e: Event) => void) | undefined;
+    onFocus?: ((e: Event) => void) | undefined;
+    onBlur?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkInput, keyof HTMLElement>> & React.RefAttributes<PkInput>, "ref"> & React.RefAttributes<PkInput>>;
+export type InputProps = PkInputElementProps;
+export type { PkInputSize };
 //# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;;8EAqBjB,CAAC;AAEH,iBAAS,KAAK,CAAC,EACX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAc,EACd,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAiC5E;AACD,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAI/F,QAAA,MAAM,cAAc;;;;;;EAYlB,CAAC;AAEH,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,qFAAqF;AACrF,eAAO,MAAM,KAAK;;;;;;oHAchB,CAAC;AAIH,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Input.js

@@ -1,42 +1,45 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { cva } from "class-variance-authority";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Input as Input$1 } from "@base-ui/react/input";
+import { PkInput } from "@verbb/plugin-kit-web/components/input/pk-input.js";
 //#region src/components/Input.tsx
-var inputVariants = cva("", {
-	variants: {
-		size: {
-			xs: "px-1.5 py-1 text-[11px]",
-			sm: "px-2 py-1 text-[12px]",
-			default: "px-2 py-1.5 text-sm",
-			lg: "px-3 py-2 text-sm",
-			xl: "px-4 py-2.5 text-base"
-		},
-		width: {
-			xs: "w-4",
-			sm: "w-8",
-			lg: "w-12",
-			xl: "w-16",
-			full: "w-full"
-		}
-	},
-	defaultVariants: {
-		size: "default",
-		width: "full"
+var PkInputElement = createPluginKitComponent({
+	tagName: "pk-input",
+	elementClass: PkInput,
+	react: React,
+	events: {
+		onInput: "input",
+		onChange: "input",
+		onPkClear: "pk-clear",
+		onFocus: "focus",
+		onBlur: "blur"
 	}
 });
-function Input({ className, type, size, width = "full", ...props }) {
-	return /* @__PURE__ */ jsx(Input$1, {
-		type,
-		"data-slot": "input",
-		className: cn("flex outline-none bg-clip-padding", "rounded-sm", "border border-[rgba(96,125,159,0.4)]", "bg-[rgb(251,252,254)]", inputVariants({
-			size,
-			width
-		}), "placeholder:text-[#7c8793]", "focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "aria-invalid:border-rose-600! aria-invalid:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!", "disabled:cursor-not-allowed disabled:opacity-50", "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", className),
-		...props
+/** React facade over `<pk-input>`. Behavior and styles live in the web component. */
+var Input = forwardRef(function Input(props, ref) {
+	const { disabled, readonly, invalid, fitCell, autofocus, mono, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkInputElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"readonly",
+			"invalid",
+			"fitCell",
+			"autofocus",
+			"mono"
+		], {
+			disabled,
+			readonly,
+			invalid,
+			fitCell,
+			autofocus,
+			mono
+		})
 	});
-}
+});
+Input.displayName = "Input";
 //#endregion
 export { Input };