@verbb/plugin-kit-react 2.0.3 → 2.0.5

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 2.0.5 - 2026-07-21
+
+### Added
+- `DatePicker` gains `multiple` (sugar for `mode="multiple"` multi-date selection; an explicit `mode` wins) and `clearable` (sugar for the web component's `with-clear` toggle).
+- `ColorInput` accepts the `readonly` boolean (and keeps the existing `readOnly` alias) for the new read-only web-component state.
+
+### Fixed
+- `Input` re-adds the `autofocus` boolean prop that lit-react's `HTMLAttributes`-derived prop map dropped, and `EditableTable` now accepts (and swallows) `children` so it type-checks with JSX children.
+- Lockstep with `@verbb/plugin-kit-core`: importing string/handle utils from the core package root no longer pulls `markdown-it` into a consumer bundle (core is now `sideEffects: false` with lazy markdown-it and granular `./utils/*` subpath exports). No React API change.
+
+## 2.0.4 - 2026-07-21
+
+### Fixed
+- Slotted menu/button/option/tab labels inherit kit size-token type metrics from the web-component host (lockstep with `@verbb/plugin-kit-web` slotted-host fix). No React API change.
+
 ## 2.0.3 - 2026-07-19
 
 ### Changed

package/dist/components/ColorInput.d.ts

@@ -10,6 +10,8 @@ type PkColorInputElementProps = React.ComponentProps<typeof PkColorInputElement>
 export type ColorInputProps = Omit<PkColorInputElementProps, 'onChange'> & {
     /** React alias for the CE `invalid` boolean attribute. */
     isInvalid?: boolean;
+    /** CE `readonly` boolean. Declared explicitly so it survives lit-react's prop mapping. */
+    readonly?: boolean;
     /** React/Formie alias for the Lit `readonly` property. */
     readOnly?: boolean;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../src/components/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAIrH,QAAA,MAAM,mBAAmB;;;;;EAWvB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAG;IACvE,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uFAAuF;IACvF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,UAAU,mGA+CrB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../src/components/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAIrH,QAAA,MAAM,mBAAmB;;;;;EAWvB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAG;IACvE,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uFAAuF;IACvF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,UAAU,mGA+CrB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","names":[],"sources":["../../src/components/ColorInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkColorInput, type PkColorInputSize } from '@verbb/plugin-kit-web/components/color-input/pk-color-input.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkColorInputElement = createPluginKitComponent({\n    tagName: 'pk-color-input',\n    elementClass: PkColorInput,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        // React `onChange` is live; native `change` is blur-commit.\n        onInput: 'input',\n        onNativeChange: 'change',\n        onBlur: 'blur',\n    },\n});\n\ntype PkColorInputElementProps = React.ComponentProps<typeof PkColorInputElement>;\n\nexport type ColorInputProps = Omit<PkColorInputElementProps, 'onChange'> & {\n    /** React alias for the CE `invalid` boolean attribute. */\n    isInvalid?: boolean;\n    /** React/Formie alias for the Lit `readonly` property. */\n    readOnly?: boolean;\n    /**\n     * Controlled value callback — sugar over `onPkChange` detail.\n     * Also accepts legacy docs name `onValueChange`.\n     */\n    onChange?: (value: string) => void;\n    /** @deprecated Prefer `onChange` — kept for docs examples that still use this name. */\n    onValueChange?: (value: string) => void;\n};\n\n/** React facade over `<pk-color-input>`. Behavior and styles live in the web component. */\nexport const ColorInput = forwardRef<PkColorInput, ColorInputProps>(function ColorInput(\n    {\n        disabled,\n        readonly,\n        readOnly,\n        invalid,\n        isInvalid,\n        onChange,\n        onValueChange,\n        onPkChange,\n        ...rest\n    },\n    ref,\n) {\n    // Docs / Formie use `isInvalid` + `readOnly`; Lit properties are `invalid` + `readonly`.\n    const resolvedInvalid = Boolean(invalid ?? isInvalid);\n    const resolvedReadonly = Boolean(readonly ?? readOnly);\n    const valueCallback = onChange ?? onValueChange;\n\n    const handlePkChange = useCallback(\n        (event: Event) => {\n            onPkChange?.(event as Parameters<NonNullable<PkColorInputElementProps['onPkChange']>>[0]);\n\n            if (!valueCallback) {\n                return;\n            }\n\n            const detail = (event as CustomEvent<{ value?: string }>).detail;\n            if (detail && 'value' in detail) {\n                valueCallback(detail.value ?? '');\n            }\n        },\n        [onPkChange, valueCallback],\n    );\n\n    return (\n        <PkColorInputElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid'], {\n                disabled,\n                readonly: resolvedReadonly,\n                invalid: resolvedInvalid,\n            })}\n            {...(valueCallback || onPkChange ? { onPkChange: handlePkChange } : {})}\n        />\n    );\n});\n\nColorInput.displayName = 'ColorInput';\n\nexport { PkColorInputElement };\nexport type { PkColorInputSize };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EAEZ,SAAS;EACT,gBAAgB;EAChB,QAAQ;EACX;CACJ,CAAC;;AAmBF,IAAa,aAAa,WAA0C,SAAS,WACzE,EACI,UACA,UACA,UACA,SACA,WACA,UACA,eACA,YACA,GAAG,QAEP,KACF;CAEE,MAAM,kBAAkB,QAAQ,WAAW,UAAU;CACrD,MAAM,mBAAmB,QAAQ,YAAY,SAAS;CACtD,MAAM,gBAAgB,YAAY;CAElC,MAAM,iBAAiB,aAClB,UAAiB;AACd,eAAa,MAA4E;AAEzF,MAAI,CAAC,cACD;EAGJ,MAAM,SAAU,MAA0C;AAC1D,MAAI,UAAU,WAAW,OACrB,eAAc,OAAO,SAAS,GAAG;IAGzC,CAAC,YAAY,cAAc,CAC9B;AAED,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAU,EAAE;GACtD;GACA,UAAU;GACV,SAAS;GACZ,CAAC;EACF,GAAK,iBAAiB,aAAa,EAAE,YAAY,gBAAgB,GAAG,EAAE;EACxE,CAAA;EAER;AAEF,WAAW,cAAc"}
+{"version":3,"file":"ColorInput.js","names":[],"sources":["../../src/components/ColorInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkColorInput, type PkColorInputSize } from '@verbb/plugin-kit-web/components/color-input/pk-color-input.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkColorInputElement = createPluginKitComponent({\n    tagName: 'pk-color-input',\n    elementClass: PkColorInput,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        // React `onChange` is live; native `change` is blur-commit.\n        onInput: 'input',\n        onNativeChange: 'change',\n        onBlur: 'blur',\n    },\n});\n\ntype PkColorInputElementProps = React.ComponentProps<typeof PkColorInputElement>;\n\nexport type ColorInputProps = Omit<PkColorInputElementProps, 'onChange'> & {\n    /** React alias for the CE `invalid` boolean attribute. */\n    isInvalid?: boolean;\n    /** CE `readonly` boolean. Declared explicitly so it survives lit-react's prop mapping. */\n    readonly?: boolean;\n    /** React/Formie alias for the Lit `readonly` property. */\n    readOnly?: boolean;\n    /**\n     * Controlled value callback — sugar over `onPkChange` detail.\n     * Also accepts legacy docs name `onValueChange`.\n     */\n    onChange?: (value: string) => void;\n    /** @deprecated Prefer `onChange` — kept for docs examples that still use this name. */\n    onValueChange?: (value: string) => void;\n};\n\n/** React facade over `<pk-color-input>`. Behavior and styles live in the web component. */\nexport const ColorInput = forwardRef<PkColorInput, ColorInputProps>(function ColorInput(\n    {\n        disabled,\n        readonly,\n        readOnly,\n        invalid,\n        isInvalid,\n        onChange,\n        onValueChange,\n        onPkChange,\n        ...rest\n    },\n    ref,\n) {\n    // Docs / Formie use `isInvalid` + `readOnly`; Lit properties are `invalid` + `readonly`.\n    const resolvedInvalid = Boolean(invalid ?? isInvalid);\n    const resolvedReadonly = Boolean(readonly ?? readOnly);\n    const valueCallback = onChange ?? onValueChange;\n\n    const handlePkChange = useCallback(\n        (event: Event) => {\n            onPkChange?.(event as Parameters<NonNullable<PkColorInputElementProps['onPkChange']>>[0]);\n\n            if (!valueCallback) {\n                return;\n            }\n\n            const detail = (event as CustomEvent<{ value?: string }>).detail;\n            if (detail && 'value' in detail) {\n                valueCallback(detail.value ?? '');\n            }\n        },\n        [onPkChange, valueCallback],\n    );\n\n    return (\n        <PkColorInputElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid'], {\n                disabled,\n                readonly: resolvedReadonly,\n                invalid: resolvedInvalid,\n            })}\n            {...(valueCallback || onPkChange ? { onPkChange: handlePkChange } : {})}\n        />\n    );\n});\n\nColorInput.displayName = 'ColorInput';\n\nexport { PkColorInputElement };\nexport type { PkColorInputSize };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EAEZ,SAAS;EACT,gBAAgB;EAChB,QAAQ;EACX;CACJ,CAAC;;AAqBF,IAAa,aAAa,WAA0C,SAAS,WACzE,EACI,UACA,UACA,UACA,SACA,WACA,UACA,eACA,YACA,GAAG,QAEP,KACF;CAEE,MAAM,kBAAkB,QAAQ,WAAW,UAAU;CACrD,MAAM,mBAAmB,QAAQ,YAAY,SAAS;CACtD,MAAM,gBAAgB,YAAY;CAElC,MAAM,iBAAiB,aAClB,UAAiB;AACd,eAAa,MAA4E;AAEzF,MAAI,CAAC,cACD;EAGJ,MAAM,SAAU,MAA0C;AAC1D,MAAI,UAAU,WAAW,OACrB,eAAc,OAAO,SAAS,GAAG;IAGzC,CAAC,YAAY,cAAc,CAC9B;AAED,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAU,EAAE;GACtD;GACA,UAAU;GACV,SAAS;GACZ,CAAC;EACF,GAAK,iBAAiB,aAAa,EAAE,YAAY,gBAAgB,GAAG,EAAE;EACxE,CAAA;EAER;AAEF,WAAW,cAAc"}

package/dist/components/DatePicker.d.ts

@@ -22,6 +22,10 @@ export type DatePickerProps = Omit<PkDatePickerElementProps, 'value' | 'onPkChan
      */
     onValueChange?: (value: Date | undefined) => void;
     onPkChange?: PkDatePickerElementProps['onPkChange'];
+    /** Sugar for the CE `with-clear` toggle. */
+    clearable?: boolean;
+    /** Sugar for the CE `mode="multiple"` (multi-date selection). Explicit `mode` wins. */
+    multiple?: boolean;
 };
 /** React facade over `<pk-date-picker>`. Behavior and styles live in the web component. */
 export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<PkDatePicker>>;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAI5I,QAAA,MAAM,mBAAmB;;;;;;;;;EAcvB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IACnF,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,wBAAwB,CAAC,YAAY,CAAC,CAAC;CACvD,CAAC;AAiDF,2FAA2F;AAC3F,eAAO,MAAM,UAAU,mGAiErB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAI5I,QAAA,MAAM,mBAAmB;;;;;;;;;EAcvB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IACnF,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,UAAU,CAAC,EAAE,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACpD,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAyDF,2FAA2F;AAC3F,eAAO,MAAM,UAAU,mGAsErB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/DatePicker.js

@@ -40,13 +40,17 @@ function toIsoValue(value) {
 		if (Number.isNaN(value.getTime())) return "";
 		return formatIsoDate(value);
 	}
-	const dateOnly = String(value).match(/^(\d{4}-\d{2}-\d{2})/);
-	return dateOnly ? dateOnly[1] : String(value);
+	const str = String(value);
+	if (str.includes("/") || str.includes(",")) return str;
+	const dateOnly = str.match(/^(\d{4}-\d{2}-\d{2})/);
+	return dateOnly ? dateOnly[1] : str;
 }
 /** React facade over `<pk-date-picker>`. Behavior and styles live in the web component. */
 var DatePicker = forwardRef(function DatePicker(props, ref) {
-	const { value, onValueChange, onPkChange, disabled, invalid, isInvalid, clearable, multiple, open, disablePast, disableFuture, withClear, required, ...rest } = props;
+	const { value, onValueChange, onPkChange, disabled, invalid, isInvalid, clearable, multiple, mode, open, disablePast, disableFuture, withClear, required, ...rest } = props;
 	const resolvedInvalid = Boolean(invalid ?? isInvalid);
+	const resolvedWithClear = withClear ?? clearable;
+	const resolvedMode = mode ?? (multiple ? "multiple" : void 0);
 	const isoValue = useMemo(() => toIsoValue(value), [value]);
 	const handlePkChange = (event) => {
 		onPkChange?.(event);
@@ -58,12 +62,11 @@ var DatePicker = forwardRef(function DatePicker(props, ref) {
 		ref,
 		...rest,
 		value: isoValue,
+		...resolvedMode ? { mode: resolvedMode } : {},
 		onPkChange: handlePkChange,
 		...trueBooleanProps([
 			"disabled",
 			"invalid",
-			"clearable",
-			"multiple",
 			"open",
 			"disablePast",
 			"disableFuture",
@@ -72,12 +75,10 @@ var DatePicker = forwardRef(function DatePicker(props, ref) {
 		], {
 			disabled,
 			invalid: resolvedInvalid,
-			clearable,
-			multiple,
 			open,
 			disablePast,
 			disableFuture,
-			withClear,
+			withClear: resolvedWithClear,
 			required
 		})
 	});

package/dist/components/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkDatePicker, type PkDatePickerMode, type PkDatePickerSize } from '@verbb/plugin-kit-web/components/date-picker/pk-date-picker.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkDatePickerElement = createPluginKitComponent({\n    tagName: 'pk-date-picker',\n    elementClass: PkDatePicker,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkClear: 'pk-clear',\n        onInput: 'input',\n        onChange: 'change',\n        onPkShow: 'pk-show',\n        onPkAfterShow: 'pk-after-show',\n        onPkHide: 'pk-hide',\n        onPkAfterHide: 'pk-after-hide',\n    },\n});\n\ntype PkDatePickerElementProps = React.ComponentProps<typeof PkDatePickerElement>;\n\nexport type DatePickerProps = Omit<PkDatePickerElementProps, 'value' | 'onPkChange'> & {\n    /** ISO string, Date, or empty — v1 DatePicker accepted Date. */\n    value?: string | Date | null;\n    /** React/Formie alias for the CE `invalid` boolean. */\n    isInvalid?: boolean;\n    /**\n     * v1 callback — receives a local `Date` (or `undefined` when cleared).\n     * Prefer `onPkChange` for raw ISO `detail.value` from the CE.\n     */\n    onValueChange?: (value: Date | undefined) => void;\n    onPkChange?: PkDatePickerElementProps['onPkChange'];\n};\n\n/** Local YYYY-MM-DD — keep facade free of non-exported kit util paths. */\nfunction formatIsoDate(date: Date): string {\n    const year = String(date.getFullYear()).padStart(4, '0');\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n\n    return `${year}-${month}-${day}`;\n}\n\nfunction parseIsoDate(value: string): Date | null {\n    const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value.trim());\n\n    if (!match) {\n        return null;\n    }\n\n    const year = Number(match[1]);\n    const month = Number(match[2]);\n    const day = Number(match[3]);\n    const date = new Date(year, month - 1, day);\n\n    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n        return null;\n    }\n\n    return date;\n}\n\n/** Coerce Formie/v1 Date|string values to the CE’s ISO `YYYY-MM-DD` string. */\nfunction toIsoValue(value: string | Date | null | undefined): string {\n    if (value == null || value === '') {\n        return '';\n    }\n\n    if (value instanceof Date) {\n        if (Number.isNaN(value.getTime())) {\n            return '';\n        }\n\n        return formatIsoDate(value);\n    }\n\n    const dateOnly = String(value).match(/^(\\d{4}-\\d{2}-\\d{2})/);\n\n    return dateOnly ? dateOnly[1] : String(value);\n}\n\n/** React facade over `<pk-date-picker>`. Behavior and styles live in the web component. */\nexport const DatePicker = forwardRef<PkDatePicker, DatePickerProps>(function DatePicker(props, ref) {\n    const {\n        value,\n        onValueChange,\n        onPkChange,\n        disabled,\n        invalid,\n        isInvalid,\n        clearable,\n        multiple,\n        open,\n        disablePast,\n        disableFuture,\n        withClear,\n        required,\n        ...rest\n    } = props;\n\n    // Docs / Formie often pass `isInvalid`; Lit property is `invalid`.\n    const resolvedInvalid = Boolean(invalid ?? isInvalid);\n    const isoValue = useMemo(() => toIsoValue(value), [value]);\n\n    const handlePkChange = (event: CustomEvent<{ value?: string }>) => {\n        onPkChange?.(event as never);\n\n        if (!onValueChange) {\n            return;\n        }\n\n        const next = event.detail?.value;\n        onValueChange(next ? (parseIsoDate(next) ?? undefined) : undefined);\n    };\n\n    return (\n        <PkDatePickerElement\n            ref={ref}\n            {...rest}\n            value={isoValue}\n            onPkChange={handlePkChange}\n            {...trueBooleanProps(\n                [\n                    'disabled',\n                    'invalid',\n                    'clearable',\n                    'multiple',\n                    'open',\n                    'disablePast',\n                    'disableFuture',\n                    'withClear',\n                    'required',\n                ],\n                {\n                    disabled,\n                    invalid: resolvedInvalid,\n                    clearable,\n                    multiple,\n                    open,\n                    disablePast,\n                    disableFuture,\n                    withClear,\n                    required,\n                },\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport { PkDatePickerElement };\nexport type { PkDatePickerMode, PkDatePickerSize };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,UAAU;EACV,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EAClB;CACJ,CAAC;;AAkBF,SAAS,cAAc,MAAoB;AAKvC,QAAO,GAJM,OAAO,KAAK,aAAa,CAAC,CAAC,SAAS,GAAG,IAI1C,CAAK,GAHD,OAAO,KAAK,UAAU,GAAG,EAAE,CAAC,SAAS,GAAG,IAGpC,CAAM,GAFZ,OAAO,KAAK,SAAS,CAAC,CAAC,SAAS,GAAG,IAEpB;;AAG/B,SAAS,aAAa,OAA4B;CAC9C,MAAM,QAAQ,4BAA4B,KAAK,MAAM,MAAM,CAAC;AAE5D,KAAI,CAAC,MACD,QAAO;CAGX,MAAM,OAAO,OAAO,MAAM,GAAG;CAC7B,MAAM,QAAQ,OAAO,MAAM,GAAG;CAC9B,MAAM,MAAM,OAAO,MAAM,GAAG;CAC5B,MAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,IAAI;AAE3C,KAAI,KAAK,aAAa,KAAK,QAAQ,KAAK,UAAU,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,IACnF,QAAO;AAGX,QAAO;;;AAIX,SAAS,WAAW,OAAiD;AACjE,KAAI,SAAS,QAAQ,UAAU,GAC3B,QAAO;AAGX,KAAI,iBAAiB,MAAM;AACvB,MAAI,OAAO,MAAM,MAAM,SAAS,CAAC,CAC7B,QAAO;AAGX,SAAO,cAAc,MAAM;;CAG/B,MAAM,WAAW,OAAO,MAAM,CAAC,MAAM,uBAAuB;AAE5D,QAAO,WAAW,SAAS,KAAK,OAAO,MAAM;;;AAIjD,IAAa,aAAa,WAA0C,SAAS,WAAW,OAAO,KAAK;CAChG,MAAM,EACF,OACA,eACA,YACA,UACA,SACA,WACA,WACA,UACA,MACA,aACA,eACA,WACA,UACA,GAAG,SACH;CAGJ,MAAM,kBAAkB,QAAQ,WAAW,UAAU;CACrD,MAAM,WAAW,cAAc,WAAW,MAAM,EAAE,CAAC,MAAM,CAAC;CAE1D,MAAM,kBAAkB,UAA2C;AAC/D,eAAa,MAAe;AAE5B,MAAI,CAAC,cACD;EAGJ,MAAM,OAAO,MAAM,QAAQ;AAC3B,gBAAc,OAAQ,aAAa,KAAK,IAAI,KAAA,IAAa,KAAA,EAAU;;AAGvE,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,OAAO;EACP,YAAY;EACZ,GAAI,iBACA;GACI;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACH,EACD;GACI;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACH,CACJ;EACH,CAAA;EAER;AAEF,WAAW,cAAc"}
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkDatePicker, type PkDatePickerMode, type PkDatePickerSize } from '@verbb/plugin-kit-web/components/date-picker/pk-date-picker.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkDatePickerElement = createPluginKitComponent({\n    tagName: 'pk-date-picker',\n    elementClass: PkDatePicker,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkClear: 'pk-clear',\n        onInput: 'input',\n        onChange: 'change',\n        onPkShow: 'pk-show',\n        onPkAfterShow: 'pk-after-show',\n        onPkHide: 'pk-hide',\n        onPkAfterHide: 'pk-after-hide',\n    },\n});\n\ntype PkDatePickerElementProps = React.ComponentProps<typeof PkDatePickerElement>;\n\nexport type DatePickerProps = Omit<PkDatePickerElementProps, 'value' | 'onPkChange'> & {\n    /** ISO string, Date, or empty — v1 DatePicker accepted Date. */\n    value?: string | Date | null;\n    /** React/Formie alias for the CE `invalid` boolean. */\n    isInvalid?: boolean;\n    /**\n     * v1 callback — receives a local `Date` (or `undefined` when cleared).\n     * Prefer `onPkChange` for raw ISO `detail.value` from the CE.\n     */\n    onValueChange?: (value: Date | undefined) => void;\n    onPkChange?: PkDatePickerElementProps['onPkChange'];\n    /** Sugar for the CE `with-clear` toggle. */\n    clearable?: boolean;\n    /** Sugar for the CE `mode=\"multiple\"` (multi-date selection). Explicit `mode` wins. */\n    multiple?: boolean;\n};\n\n/** Local YYYY-MM-DD — keep facade free of non-exported kit util paths. */\nfunction formatIsoDate(date: Date): string {\n    const year = String(date.getFullYear()).padStart(4, '0');\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n\n    return `${year}-${month}-${day}`;\n}\n\nfunction parseIsoDate(value: string): Date | null {\n    const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value.trim());\n\n    if (!match) {\n        return null;\n    }\n\n    const year = Number(match[1]);\n    const month = Number(match[2]);\n    const day = Number(match[3]);\n    const date = new Date(year, month - 1, day);\n\n    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n        return null;\n    }\n\n    return date;\n}\n\n/** Coerce Formie/v1 Date|string values to the CE’s ISO `YYYY-MM-DD` string. */\nfunction toIsoValue(value: string | Date | null | undefined): string {\n    if (value == null || value === '') {\n        return '';\n    }\n\n    if (value instanceof Date) {\n        if (Number.isNaN(value.getTime())) {\n            return '';\n        }\n\n        return formatIsoDate(value);\n    }\n\n    const str = String(value);\n\n    // Range (`from/to`) and multiple (`a,b,c`) values are already CE-formatted ISO lists —\n    // pass them through untouched. Only a lone date(time) gets trimmed to `YYYY-MM-DD`.\n    if (str.includes('/') || str.includes(',')) {\n        return str;\n    }\n\n    const dateOnly = str.match(/^(\\d{4}-\\d{2}-\\d{2})/);\n\n    return dateOnly ? dateOnly[1] : str;\n}\n\n/** React facade over `<pk-date-picker>`. Behavior and styles live in the web component. */\nexport const DatePicker = forwardRef<PkDatePicker, DatePickerProps>(function DatePicker(props, ref) {\n    const {\n        value,\n        onValueChange,\n        onPkChange,\n        disabled,\n        invalid,\n        isInvalid,\n        clearable,\n        multiple,\n        mode,\n        open,\n        disablePast,\n        disableFuture,\n        withClear,\n        required,\n        ...rest\n    } = props;\n\n    // Docs / Formie often pass `isInvalid`; Lit property is `invalid`.\n    const resolvedInvalid = Boolean(invalid ?? isInvalid);\n    // `clearable` is the legacy/docs name for the CE's `with-clear` toggle — the CE\n    // exposes a single `withClear` property (same convention as pk-input), so fold them.\n    const resolvedWithClear = withClear ?? clearable;\n    // `multiple` is sugar for the CE's `mode=\"multiple\"`; an explicit `mode` wins.\n    const resolvedMode = mode ?? (multiple ? 'multiple' : undefined);\n    const isoValue = useMemo(() => toIsoValue(value), [value]);\n\n    // Element event map types `onPkChange` as `(e: Event) => void`; widen at the boundary\n    // and read the CustomEvent detail after a local cast.\n    const handlePkChange = (event: Event) => {\n        onPkChange?.(event as never);\n\n        if (!onValueChange) {\n            return;\n        }\n\n        const next = (event as CustomEvent<{ value?: string }>).detail?.value;\n        onValueChange(next ? (parseIsoDate(next) ?? undefined) : undefined);\n    };\n\n    return (\n        <PkDatePickerElement\n            ref={ref}\n            {...rest}\n            value={isoValue}\n            {...(resolvedMode ? { mode: resolvedMode } : {})}\n            onPkChange={handlePkChange}\n            {...trueBooleanProps(\n                [\n                    'disabled',\n                    'invalid',\n                    'open',\n                    'disablePast',\n                    'disableFuture',\n                    'withClear',\n                    'required',\n                ],\n                {\n                    disabled,\n                    invalid: resolvedInvalid,\n                    open,\n                    disablePast,\n                    disableFuture,\n                    withClear: resolvedWithClear,\n                    required,\n                },\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport { PkDatePickerElement };\nexport type { PkDatePickerMode, PkDatePickerSize };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,UAAU;EACV,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EAClB;CACJ,CAAC;;AAsBF,SAAS,cAAc,MAAoB;AAKvC,QAAO,GAJM,OAAO,KAAK,aAAa,CAAC,CAAC,SAAS,GAAG,IAI1C,CAAK,GAHD,OAAO,KAAK,UAAU,GAAG,EAAE,CAAC,SAAS,GAAG,IAGpC,CAAM,GAFZ,OAAO,KAAK,SAAS,CAAC,CAAC,SAAS,GAAG,IAEpB;;AAG/B,SAAS,aAAa,OAA4B;CAC9C,MAAM,QAAQ,4BAA4B,KAAK,MAAM,MAAM,CAAC;AAE5D,KAAI,CAAC,MACD,QAAO;CAGX,MAAM,OAAO,OAAO,MAAM,GAAG;CAC7B,MAAM,QAAQ,OAAO,MAAM,GAAG;CAC9B,MAAM,MAAM,OAAO,MAAM,GAAG;CAC5B,MAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,IAAI;AAE3C,KAAI,KAAK,aAAa,KAAK,QAAQ,KAAK,UAAU,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,IACnF,QAAO;AAGX,QAAO;;;AAIX,SAAS,WAAW,OAAiD;AACjE,KAAI,SAAS,QAAQ,UAAU,GAC3B,QAAO;AAGX,KAAI,iBAAiB,MAAM;AACvB,MAAI,OAAO,MAAM,MAAM,SAAS,CAAC,CAC7B,QAAO;AAGX,SAAO,cAAc,MAAM;;CAG/B,MAAM,MAAM,OAAO,MAAM;AAIzB,KAAI,IAAI,SAAS,IAAI,IAAI,IAAI,SAAS,IAAI,CACtC,QAAO;CAGX,MAAM,WAAW,IAAI,MAAM,uBAAuB;AAElD,QAAO,WAAW,SAAS,KAAK;;;AAIpC,IAAa,aAAa,WAA0C,SAAS,WAAW,OAAO,KAAK;CAChG,MAAM,EACF,OACA,eACA,YACA,UACA,SACA,WACA,WACA,UACA,MACA,MACA,aACA,eACA,WACA,UACA,GAAG,SACH;CAGJ,MAAM,kBAAkB,QAAQ,WAAW,UAAU;CAGrD,MAAM,oBAAoB,aAAa;CAEvC,MAAM,eAAe,SAAS,WAAW,aAAa,KAAA;CACtD,MAAM,WAAW,cAAc,WAAW,MAAM,EAAE,CAAC,MAAM,CAAC;CAI1D,MAAM,kBAAkB,UAAiB;AACrC,eAAa,MAAe;AAE5B,MAAI,CAAC,cACD;EAGJ,MAAM,OAAQ,MAA0C,QAAQ;AAChE,gBAAc,OAAQ,aAAa,KAAK,IAAI,KAAA,IAAa,KAAA,EAAU;;AAGvE,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,OAAO;EACP,GAAK,eAAe,EAAE,MAAM,cAAc,GAAG,EAAE;EAC/C,YAAY;EACZ,GAAI,iBACA;GACI;GACA;GACA;GACA;GACA;GACA;GACA;GACH,EACD;GACI;GACA,SAAS;GACT;GACA;GACA;GACA,WAAW;GACX;GACH,CACJ;EACH,CAAA;EAER;AAEF,WAAW,cAAc"}

package/dist/components/EditableTable.d.ts

@@ -68,6 +68,11 @@ export type EditableTableProps = Omit<PkEditableTableElementProps, 'onChange' |
      */
     renderRowMenuItemsBeforeCore?: PkEditableTableGetRowMenuItems | null;
     onRowMenuSelect?: (detail: EditableTableRowMenuSelectDetail) => void;
+    /**
+     * Accepted but not forwarded — the facade projects cells via `renderCell`, not
+     * arbitrary children. Declared so it can be destructured away from element props.
+     */
+    children?: ReactNode;
 };
 /**
  * React facade over `<pk-editable-table>`.

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

@@ -1 +1 @@
-{"version":3,"file":"EditableTable.d.ts","sourceRoot":"","sources":["../../src/components/EditableTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EditableTable.d.ts","sourceRoot":"","sources":["../../src/components/EditableTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/EditableTable.js.map

@@ -1 +1 @@
-{"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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"}
+{"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     * Accepted but not forwarded — the facade projects cells via `renderCell`, not\n     * arbitrary children. Declared so it can be destructured away from element props.\n     */\n    children?: ReactNode;\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/Input.d.ts

@@ -8,14 +8,10 @@ declare const PkInputElement: import('@lit/react').ReactWebComponent<PkInput, {
     onBlur: string;
 }>;
 type PkInputElementProps = React.ComponentProps<typeof PkInputElement>;
+export type InputProps = PkInputElementProps & {
+    autofocus?: boolean;
+};
 /** 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 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<PkInput>>;
 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,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"}
+{"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;AAIvE,MAAM,MAAM,UAAU,GAAG,mBAAmB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEvE,qFAAqF;AACrF,eAAO,MAAM,KAAK,yFAchB,CAAC;AAIH,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkInput, type PkInputSize } from '@verbb/plugin-kit-web/components/input/pk-input.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkInputElement = createPluginKitComponent({\n    tagName: 'pk-input',\n    elementClass: PkInput,\n    react: React,\n    events: {\n        // React `onChange` is live (every keystroke); native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n        onPkClear: 'pk-clear',\n        onFocus: 'focus',\n        onBlur: 'blur',\n    },\n});\n\ntype PkInputElementProps = React.ComponentProps<typeof PkInputElement>;\n\n/** React facade over `<pk-input>`. Behavior and styles live in the web component. */\nexport const Input = forwardRef<PkInput, PkInputElementProps>(function Input(props, ref) {\n    const {\n        disabled, readonly, invalid, fitCell, autofocus, mono, ...rest\n    } = props;\n\n    return (\n        <PkInputElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid', 'fitCell', 'autofocus', 'mono'], {\n                disabled, readonly, invalid, fitCell, autofocus, mono,\n            })}\n        />\n    );\n});\n\nInput.displayName = 'Input';\n\nexport type InputProps = PkInputElementProps;\nexport type { PkInputSize };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,yBAAyB;CAC5C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EAEJ,SAAS;EACT,UAAU;EACV,WAAW;EACX,SAAS;EACT,QAAQ;EACX;CACJ,CAAC;;AAKF,IAAa,QAAQ,WAAyC,SAAS,MAAM,OAAO,KAAK;CACrF,MAAM,EACF,UAAU,UAAU,SAAS,SAAS,WAAW,MAAM,GAAG,SAC1D;AAEJ,QACI,oBAAC,gBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAW;GAAW;GAAa;GAAO,EAAE;GACtF;GAAU;GAAU;GAAS;GAAS;GAAW;GACpD,CAAC;EACJ,CAAA;EAER;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkInput, type PkInputSize } from '@verbb/plugin-kit-web/components/input/pk-input.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkInputElement = createPluginKitComponent({\n    tagName: 'pk-input',\n    elementClass: PkInput,\n    react: React,\n    events: {\n        // React `onChange` is live (every keystroke); native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n        onPkClear: 'pk-clear',\n        onFocus: 'focus',\n        onBlur: 'blur',\n    },\n});\n\ntype PkInputElementProps = React.ComponentProps<typeof PkInputElement>;\n\n// lit-react derives props from `HTMLAttributes` (React spells it `autoFocus`), so the\n// CE's lowercase `autofocus` property is dropped from the generated prop map — re-add it.\nexport type InputProps = PkInputElementProps & { autofocus?: boolean };\n\n/** React facade over `<pk-input>`. Behavior and styles live in the web component. */\nexport const Input = forwardRef<PkInput, InputProps>(function Input(props, ref) {\n    const {\n        disabled, readonly, invalid, fitCell, autofocus, mono, ...rest\n    } = props;\n\n    return (\n        <PkInputElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid', 'fitCell', 'autofocus', 'mono'], {\n                disabled, readonly, invalid, fitCell, autofocus, mono,\n            })}\n        />\n    );\n});\n\nInput.displayName = 'Input';\n\nexport type { PkInputSize };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,yBAAyB;CAC5C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EAEJ,SAAS;EACT,UAAU;EACV,WAAW;EACX,SAAS;EACT,QAAQ;EACX;CACJ,CAAC;;AASF,IAAa,QAAQ,WAAgC,SAAS,MAAM,OAAO,KAAK;CAC5E,MAAM,EACF,UAAU,UAAU,SAAS,SAAS,WAAW,MAAM,GAAG,SAC1D;AAEJ,QACI,oBAAC,gBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAW;GAAW;GAAa;GAAO,EAAE;GACtF;GAAU;GAAU;GAAS;GAAS;GAAW;GACpD,CAAC;EACJ,CAAA;EAER;AAEF,MAAM,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verbb/plugin-kit-react",
-    "version": "2.0.3",
+    "version": "2.0.5",
     "description": "Thin React facades over @verbb/plugin-kit-web custom elements",
     "type": "module",
     "main": "dist/index.js",
@@ -117,9 +117,9 @@
     },
     "dependencies": {
         "@lit/react": "^1.0.8",
-        "@verbb/plugin-kit-core": "2.0.3",
-        "@verbb/plugin-kit-forms": "2.0.3",
-        "@verbb/plugin-kit-web": "2.0.3",
+        "@verbb/plugin-kit-core": "2.0.5",
+        "@verbb/plugin-kit-forms": "2.0.5",
+        "@verbb/plugin-kit-web": "2.0.5",
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.5.0"
     }