@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/ColorInput.js

@@ -1,148 +1,48 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Input } from "./Input.js";
-import "./index.js";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkColorInput } from "@verbb/plugin-kit-web/components/color-input/pk-color-input.js";
 //#region src/components/ColorInput.tsx
-var DEFAULT_COLOR = "#000000";
-var SIZE_CLASSES = {
-	xs: {
-		wrapper: "min-w-[80px]",
-		swatch: "left-1.5 size-3.5",
-		hash: "left-6 text-[10px]",
-		input: "h-[24px]! pl-8! pr-2!"
-	},
-	sm: {
-		wrapper: "min-w-[88px]",
-		swatch: "left-1.5 size-4",
-		hash: "left-6.5 text-[11px]",
-		input: "h-[26px]! pl-9! pr-2.5!"
-	},
-	default: {
-		wrapper: "min-w-[98px]",
-		swatch: "left-1.5 size-5",
-		hash: "left-8 text-xs",
-		input: "h-[30px]! pl-11! pr-3!"
-	},
-	lg: {
-		wrapper: "min-w-[108px]",
-		swatch: "left-2 size-5",
-		hash: "left-8.5 text-[13px]",
-		input: "h-[34px]! pl-12! pr-3!"
-	},
-	xl: {
-		wrapper: "min-w-[118px]",
-		swatch: "left-2 size-6",
-		hash: "left-10 text-sm",
-		input: "h-[38px]! pl-[52px]! pr-3.5!"
+var PkColorInputElement = createPluginKitComponent({
+	tagName: "pk-color-input",
+	elementClass: PkColorInput,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onInput: "input",
+		onNativeChange: "change",
+		onBlur: "blur"
 	}
-};
-var FIT_CELL_INPUT_WIDTH = {
-	xs: "w-[72px]",
-	sm: "w-[78px]",
-	default: "w-[86px]",
-	lg: "w-[94px]",
-	xl: "w-[104px]"
-};
-var sanitizeHex = (value) => {
-	return String(value || "").replace(/^#/, "").replace(/[^0-9a-fA-F]/g, "").slice(0, 6).toLowerCase();
-};
-var isCompleteHex = (value) => {
-	return value.length === 3 || value.length === 6;
-};
-var expandShortHex = (value) => {
-	if (value.length !== 3) return value;
-	return value.split("").map((char) => {
-		return `${char}${char}`;
-	}).join("");
-};
-function ColorInput({ value, onValueChange, onBlur, className, size = "default", fitCell = false, disabled = false, isInvalid = false, ...props }) {
-	const [hexValue, setHexValue] = useState(() => {
-		return sanitizeHex(String(value || ""));
+});
+/** React facade over `<pk-color-input>`. Behavior and styles live in the web component. */
+var ColorInput = forwardRef(function ColorInput({ disabled, readonly, readOnly, invalid, isInvalid, onChange, onValueChange, onPkChange, ...rest }, ref) {
+	const resolvedInvalid = Boolean(invalid ?? isInvalid);
+	const resolvedReadonly = Boolean(readonly ?? readOnly);
+	const valueCallback = onChange ?? onValueChange;
+	const handlePkChange = useCallback((event) => {
+		onPkChange?.(event);
+		if (!valueCallback) return;
+		const detail = event.detail;
+		if (detail && "value" in detail) valueCallback(detail.value ?? "");
+	}, [onPkChange, valueCallback]);
+	return /* @__PURE__ */ jsx(PkColorInputElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"readonly",
+			"invalid"
+		], {
+			disabled,
+			readonly: resolvedReadonly,
+			invalid: resolvedInvalid
+		}),
+		...valueCallback || onPkChange ? { onPkChange: handlePkChange } : {}
 	});
-	useEffect(() => {
-		const normalized = sanitizeHex(String(value || ""));
-		if (normalized !== hexValue) setHexValue(normalized);
-	}, [hexValue, value]);
-	const pickerValue = useMemo(() => {
-		if (hexValue.length === 6) return `#${hexValue}`;
-		if (hexValue.length === 3) return `#${expandShortHex(hexValue)}`;
-		return DEFAULT_COLOR;
-	}, [hexValue]);
-	const isPreviewTransparent = !isCompleteHex(hexValue);
-	const handleTextChange = (event) => {
-		const nextHex = sanitizeHex(event.target.value);
-		setHexValue(nextHex);
-		if (nextHex.length === 0) {
-			onValueChange?.("");
-			return;
-		}
-		onValueChange?.(`#${nextHex}`);
-	};
-	const handleColorPickerChange = (event) => {
-		const normalized = sanitizeHex(event.target.value);
-		setHexValue(normalized);
-		onValueChange?.(`#${normalized}`);
-	};
-	const sizeClasses = SIZE_CLASSES[size] || SIZE_CLASSES.default;
-	const fitCellWidthClass = FIT_CELL_INPUT_WIDTH[size] || FIT_CELL_INPUT_WIDTH.default;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative inline-block", fitCell ? "w-auto min-w-0 max-w-full" : sizeClasses.wrapper, className),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: cn("absolute top-1/2 z-10 -translate-y-1/2 rounded-sm", fitCell ? "left-2 size-4" : sizeClasses.swatch, disabled && "opacity-50"),
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "absolute inset-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,.15)]",
-					style: isPreviewTransparent ? {
-						backgroundColor: "#fff",
-						backgroundImage: `
-                            linear-gradient(45deg, #d1d5db 25%, transparent 25%),
-                            linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
-                            linear-gradient(45deg, transparent 75%, #d1d5db 75%),
-                            linear-gradient(-45deg, transparent 75%, #d1d5db 75%)
-                        `,
-						backgroundSize: "8px 8px",
-						backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
-					} : { backgroundColor: pickerValue }
-				}), /* @__PURE__ */ jsx("input", {
-					type: "color",
-					className: "absolute inset-0 m-0 size-full cursor-pointer border-0 p-0 opacity-0 [appearance:none] [-webkit-appearance:none]",
-					value: pickerValue,
-					onChange: handleColorPickerChange,
-					disabled,
-					"aria-label": "Color picker",
-					style: {
-						width: "100%",
-						height: "100%",
-						minWidth: 0,
-						minHeight: 0,
-						background: "transparent"
-					}
-				})]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: cn("pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 font-mono text-gray-300", fitCell ? "left-7 text-[11px]" : sizeClasses.hash),
-				"aria-hidden": "true",
-				children: "#"
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				type: "text",
-				size,
-				value: hexValue,
-				onChange: handleTextChange,
-				onBlur,
-				disabled,
-				"aria-invalid": isInvalid,
-				autoComplete: "off",
-				maxLength: 6,
-				className: cn("font-mono text-[12px]", fitCell ? ["max-w-full h-full rounded-none! border-none! bg-transparent! pl-9! pr-2! focus-visible:shadow-none focus-visible:inset-ring-1 focus-visible:inset-ring-gray-200", fitCellWidthClass] : ["rounded-sm!", sizeClasses.input]),
-				...props
-			})
-		]
-	});
-}
+});
+ColorInput.displayName = "ColorInput";
 //#endregion
-export { ColorInput };
+export { ColorInput, PkColorInputElement };
 
 //# sourceMappingURL=ColorInput.js.map

package/dist/components/ColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","names":[],"sources":["../../src/components/ColorInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Input } from '@verbb/plugin-kit-react/components';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst DEFAULT_COLOR = '#000000';\ntype ColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst SIZE_CLASSES: Record<ColorInputSize, {\n    wrapper: string;\n    swatch: string;\n    hash: string;\n    input: string;\n}> = {\n    xs: {\n        wrapper: 'min-w-[80px]',\n        swatch: 'left-1.5 size-3.5',\n        hash: 'left-6 text-[10px]',\n        input: 'h-[24px]! pl-8! pr-2!',\n    },\n    sm: {\n        wrapper: 'min-w-[88px]',\n        swatch: 'left-1.5 size-4',\n        hash: 'left-6.5 text-[11px]',\n        input: 'h-[26px]! pl-9! pr-2.5!',\n    },\n    default: {\n        wrapper: 'min-w-[98px]',\n        swatch: 'left-1.5 size-5',\n        hash: 'left-8 text-xs',\n        input: 'h-[30px]! pl-11! pr-3!',\n    },\n    lg: {\n        wrapper: 'min-w-[108px]',\n        swatch: 'left-2 size-5',\n        hash: 'left-8.5 text-[13px]',\n        input: 'h-[34px]! pl-12! pr-3!',\n    },\n    xl: {\n        wrapper: 'min-w-[118px]',\n        swatch: 'left-2 size-6',\n        hash: 'left-10 text-sm',\n        input: 'h-[38px]! pl-[52px]! pr-3.5!',\n    },\n};\n\nconst FIT_CELL_INPUT_WIDTH: Record<ColorInputSize, string> = {\n    xs: 'w-[72px]',\n    sm: 'w-[78px]',\n    default: 'w-[86px]',\n    lg: 'w-[94px]',\n    xl: 'w-[104px]',\n};\n\nconst sanitizeHex = (value: string) => {\n    return String(value || '')\n        .replace(/^#/, '')\n        .replace(/[^0-9a-fA-F]/g, '')\n        .slice(0, 6)\n        .toLowerCase();\n};\n\nconst isCompleteHex = (value: string) => {\n    return value.length === 3 || value.length === 6;\n};\n\nconst expandShortHex = (value: string) => {\n    if (value.length !== 3) {\n        return value;\n    }\n\n    return value.split('').map((char) => { return `${char}${char}`; }).join('');\n};\n\nexport function ColorInput({\n    value,\n    onValueChange,\n    onBlur,\n    className,\n    size = 'default',\n    fitCell = false,\n    disabled = false,\n    isInvalid = false,\n    ...props\n}: {\n    value?: string;\n    onValueChange?: (value: string) => void;\n    onBlur?: () => void;\n    className?: string;\n    size?: ColorInputSize;\n    fitCell?: boolean;\n    disabled?: boolean;\n    isInvalid?: boolean;\n    [x: string]: unknown;\n}) {\n    const [hexValue, setHexValue] = useState(() => {\n        return sanitizeHex(String(value || ''));\n    });\n\n    useEffect(() => {\n        const normalized = sanitizeHex(String(value || ''));\n        if (normalized !== hexValue) {\n            setHexValue(normalized);\n        }\n    }, [hexValue, value]);\n\n    const pickerValue = useMemo(() => {\n        if (hexValue.length === 6) {\n            return `#${hexValue}`;\n        }\n\n        if (hexValue.length === 3) {\n            return `#${expandShortHex(hexValue)}`;\n        }\n\n        return DEFAULT_COLOR;\n    }, [hexValue]);\n    const isPreviewTransparent = !isCompleteHex(hexValue);\n\n    const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextHex = sanitizeHex(event.target.value);\n        setHexValue(nextHex);\n\n        if (nextHex.length === 0) {\n            onValueChange?.('');\n            return;\n        }\n\n        onValueChange?.(`#${nextHex}`);\n    };\n\n    const handleColorPickerChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const normalized = sanitizeHex(event.target.value);\n        setHexValue(normalized);\n        onValueChange?.(`#${normalized}`);\n    };\n    const sizeClasses = SIZE_CLASSES[size] || SIZE_CLASSES.default;\n    const fitCellWidthClass = FIT_CELL_INPUT_WIDTH[size] || FIT_CELL_INPUT_WIDTH.default;\n\n    return (\n        <div className={cn(\n            'relative inline-block',\n            fitCell ? 'w-auto min-w-0 max-w-full' : sizeClasses.wrapper,\n            className,\n        )}>\n            <div className={cn(\n                'absolute top-1/2 z-10 -translate-y-1/2 rounded-sm',\n                fitCell ? 'left-2 size-4' : sizeClasses.swatch,\n                disabled && 'opacity-50',\n            )}>\n                <div\n                    className=\"absolute inset-0 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,.15)]\"\n                    style={isPreviewTransparent ? {\n                        backgroundColor: '#fff',\n                        backgroundImage: `\n                            linear-gradient(45deg, #d1d5db 25%, transparent 25%),\n                            linear-gradient(-45deg, #d1d5db 25%, transparent 25%),\n                            linear-gradient(45deg, transparent 75%, #d1d5db 75%),\n                            linear-gradient(-45deg, transparent 75%, #d1d5db 75%)\n                        `,\n                        backgroundSize: '8px 8px',\n                        backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',\n                    } : { backgroundColor: pickerValue }}\n                />\n\n                <input\n                    type=\"color\"\n                    className=\"absolute inset-0 m-0 size-full cursor-pointer border-0 p-0 opacity-0 [appearance:none] [-webkit-appearance:none]\"\n                    value={pickerValue}\n                    onChange={handleColorPickerChange}\n                    disabled={disabled}\n                    aria-label=\"Color picker\"\n                    style={{\n                        width: '100%',\n                        height: '100%',\n                        minWidth: 0,\n                        minHeight: 0,\n                        background: 'transparent',\n                    }}\n                />\n            </div>\n\n            <div\n                className={cn(\n                    'pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 font-mono text-gray-300',\n                    fitCell ? 'left-7 text-[11px]' : sizeClasses.hash,\n                )}\n                aria-hidden=\"true\"\n            >\n                #\n            </div>\n\n            <Input\n                type=\"text\"\n                size={size}\n                value={hexValue}\n                onChange={handleTextChange}\n                onBlur={onBlur}\n                disabled={disabled}\n                aria-invalid={isInvalid}\n                autoComplete=\"off\"\n                maxLength={6}\n                className={cn(\n                    'font-mono text-[12px]',\n                    fitCell\n                        ? ['max-w-full h-full rounded-none! border-none! bg-transparent! pl-9! pr-2! focus-visible:shadow-none focus-visible:inset-ring-1 focus-visible:inset-ring-gray-200', fitCellWidthClass]\n                        : ['rounded-sm!', sizeClasses.input],\n                )}\n                {...props}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"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"}

package/dist/components/Combobox.d.ts

@@ -1,40 +1,32 @@
-import { ComponentProps, ComponentPropsWithRef } from 'react';
-import { Combobox as ComboboxPrimitive } from '@base-ui/react';
-import { VariantProps } from 'class-variance-authority';
-declare const comboboxItemVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    variant?: "default" | "destructive" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ComboboxSize = NonNullable<VariantProps<typeof comboboxItemVariants>['size']>;
-type ComboboxHighlightedTextProps = {
-    text?: string | number | null;
-    search?: string | number | null;
-    className?: string;
-    matchClassName?: string;
-};
-declare function Combobox({ size, children, ...props }: ComponentProps<typeof ComboboxPrimitive.Root> & {
-    size?: ComboboxSize;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxPrimitiveInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
-    showTrigger?: boolean;
-    showClear?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxChips({ className, ...props }: ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
-    showRemove?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
-declare function useComboboxAnchor(): import('react').RefObject<HTMLDivElement | null>;
-declare function ComboboxHighlightedText({ text, search, className, matchClassName, }: ComboboxHighlightedTextProps): string | import("react/jsx-runtime").JSX.Element;
-export { Combobox, ComboboxPrimitiveInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, ComboboxHighlightedText, useComboboxAnchor, };
+import { default as React } from 'react';
+import { PkCombobox, PkComboboxAsyncOption, PkComboboxFetchHandler, PkComboboxFilter, PkComboboxSize } from '@verbb/plugin-kit-web/components/combobox/pk-combobox.js';
+declare const PkComboboxElement: import('@lit/react').ReactWebComponent<PkCombobox, {
+    onPkChange: string;
+    onPkClear: string;
+    onPkCreate: string;
+    onInput: string;
+    onChange: string;
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+type PkComboboxElementProps = React.ComponentProps<typeof PkComboboxElement>;
+/** React facade over `<pk-combobox>`. Behavior and styles live in the web component. */
+export declare const Combobox: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkCombobox>, "defaultValue" | "onChange" | "onInput" | "form" | "show" | "hide" | "open" | "input" | "label" | "filter" | "values" | "value" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "instructions" | "required" | "name" | "size" | "placeholder" | "invalid" | "onPkShow" | "onPkAfterShow" | "onPkHide" | "onPkAfterHide" | "onPkOpenChange" | "placement" | "sideOffset" | "multiple" | "onPkChange" | "assumeInteractionOn" | "validators" | "customError" | "valueHasChanged" | "hasInteracted" | "formResetCallback" | "formDisabledCallback" | "formStateRestoreCallback" | "labels" | "validity" | "willValidate" | "validationMessage" | "getForm" | "checkValidity" | "reportValidity" | "resetValidity" | "setCustomValidity" | "onPkClear" | "withClear" | "width" | "clearable" | "defaultValues" | "loopFocus" | "onPkCreate" | "allowCreate" | "allowCustomValue" | "autoHighlight" | "popupMode" | "searchPlaceholder" | "emptyMessage" | "async" | "loadingMessage" | "startTypingMessage" | "fetchOptions"> & {
+    onPkChange?: ((e: Event) => void) | undefined;
+    onPkClear?: ((e: Event) => void) | undefined;
+    onPkCreate?: ((e: Event) => void) | undefined;
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+    onPkShow?: ((e: Event) => void) | undefined;
+    onPkAfterShow?: ((e: Event) => void) | undefined;
+    onPkHide?: ((e: Event) => void) | undefined;
+    onPkAfterHide?: ((e: Event) => void) | undefined;
+    onPkOpenChange?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkCombobox, keyof HTMLElement>> & React.RefAttributes<PkCombobox>, "ref"> & React.RefAttributes<PkCombobox>>;
+export { PkComboboxElement };
+export type ComboboxProps = PkComboboxElementProps;
+export type { PkComboboxAsyncOption, PkComboboxFetchHandler, PkComboboxFilter, PkComboboxSize };
 //# sourceMappingURL=Combobox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EACH,UAAU,EACV,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACtB,MAAM,0DAA0D,CAAC;AAIlE,QAAA,MAAM,iBAAiB;;;;;;;;;;;EAgBrB,CAAC;AAEH,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE7E,wFAAwF;AACxF,eAAO,MAAM,QAAQ;;;;;;;;;;;6HAiBnB,CAAC;AAIH,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC;AACnD,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC"}