@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/ComboboxInput.js

@@ -1,175 +1,95 @@
-import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxHighlightedText, ComboboxItem, ComboboxList, ComboboxPrimitiveInput, ComboboxValue, useComboboxAnchor } from "./Combobox.js";
-import { Spinner } from "./Spinner.js";
-import "./index.js";
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "./Combobox.js";
+import { Option } from "./Select.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/ComboboxInput.tsx
-var optionsCache = /* @__PURE__ */ new Map();
 var toStringValue = (value) => {
-	return String(value ?? "");
+	return value === void 0 || value === null ? "" : String(value);
 };
-var OptionIcon = ({ icon }) => {
-	if (!icon || typeof icon !== "string") return null;
-	return /* @__PURE__ */ jsx("span", {
-		className: "text-slate-500 [&_svg]:size-4 [&_svg]:shrink-0",
-		"aria-hidden": "true",
-		dangerouslySetInnerHTML: { __html: icon }
-	});
-};
-var ComboboxInput = ({ options, fetchOptions, value = null, onValueChange, multiple = false, disabled = false, placeholder = "Select an option", emptyMessage = "No options found.", className, contentClassName, withLoadingIndicator = true, showClear = true, open, defaultOpen, onOpenChange, onInputValueChange, cacheKey, cacheTtlMs = 300 * 1e3, disableCache = false }) => {
-	const [fetchedOptions, setFetchedOptions] = useState(null);
-	const [loading, setLoading] = useState(false);
-	const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
-	const [searchValue, setSearchValue] = useState("");
-	const hasLoadedRef = useRef(false);
-	const anchor = useComboboxAnchor();
-	const isMultiple = multiple;
-	const isOpen = open ?? internalOpen;
-	const resolvedOptions = useMemo(() => {
-		return fetchedOptions ?? options ?? [];
-	}, [fetchedOptions, options]);
-	const resolveCachedOptions = useCallback(() => {
-		if (disableCache || !cacheKey) return null;
-		const cached = optionsCache.get(cacheKey);
-		if (!cached) return null;
-		if (cached.expiresAt <= Date.now()) {
-			optionsCache.delete(cacheKey);
-			return null;
-		}
-		return cached.options;
-	}, [cacheKey, disableCache]);
-	const persistCachedOptions = useCallback((nextOptions) => {
-		if (disableCache || !cacheKey) return;
-		optionsCache.set(cacheKey, {
-			options: nextOptions,
-			expiresAt: Date.now() + cacheTtlMs
+/**
+* Convenience facade over `<pk-combobox>` mirroring the `plugin-kit-react` `ComboboxInput`
+* contract: `options[]` (or `fetchOptions` for async search), controlled `value`/`onValueChange`,
+* and `multiple`. Unlike the base-ui version, `pk-combobox` owns async fetching, filtering, chips,
+* and empty/loading states internally — this wrapper just maps props/values.
+*
+* `pk-combobox` is string-valued, so values are stringified for the element and mapped back to
+* their original option value on change.
+*/
+var ComboboxInput = forwardRef(function ComboboxInput({ options, fetchOptions, value = null, onValueChange, multiple = false, disabled = false, placeholder = "", emptyMessage = "No options found.", loadingMessage = "Searching…", startTypingMessage = "Start typing to search…", showClear = false, isInvalid, size, width, allowCreate, onCreate, onOpenChange, name, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-labelledby": ariaLabelledBy }, ref) {
+	const usesAsync = Boolean(fetchOptions) && !options?.length;
+	const flatOptions = useMemo(() => {
+		return options ?? [];
+	}, [options]);
+	const mapBack = (raw) => {
+		const match = flatOptions.find((option) => {
+			return toStringValue(option.value) === toStringValue(raw);
 		});
-	}, [
-		cacheKey,
-		cacheTtlMs,
-		disableCache
-	]);
-	useEffect(() => {
-		if (!fetchOptions || !isOpen) return;
-		const cachedOptions = resolveCachedOptions();
-		if (cachedOptions) {
-			setFetchedOptions(cachedOptions);
-			hasLoadedRef.current = true;
-			return;
-		}
-		if (hasLoadedRef.current && fetchedOptions) return;
-		let isMounted = true;
-		const loadOptions = async () => {
-			setLoading(true);
-			try {
-				const fetchedOptions = await fetchOptions();
-				if (isMounted) {
-					setFetchedOptions(fetchedOptions);
-					persistCachedOptions(fetchedOptions);
-					hasLoadedRef.current = true;
-				}
-			} catch (error) {
-				console.error("Failed to load combobox options:", error);
-			} finally {
-				if (isMounted) setLoading(false);
-			}
-		};
-		loadOptions();
-		return () => {
-			isMounted = false;
-		};
-	}, [
-		fetchOptions,
-		fetchedOptions,
-		isOpen,
-		persistCachedOptions,
-		resolveCachedOptions
-	]);
-	const selectedValue = useMemo(() => {
-		if (isMultiple) {
-			const selectedValues = Array.isArray(value) ? new Set(value.map((item) => {
-				return toStringValue(item);
-			})) : /* @__PURE__ */ new Set();
-			return resolvedOptions.filter((option) => {
-				return selectedValues.has(toStringValue(option.value));
+		return match ? match.value : raw;
+	};
+	const adaptedFetch = useMemo(() => {
+		if (!fetchOptions) return null;
+		return async (query, signal) => {
+			return (await fetchOptions(query, signal)).map((option) => {
+				return {
+					value: toStringValue(option.value),
+					label: option.label
+				};
 			});
-		}
-		return resolvedOptions.find((option) => {
-			return toStringValue(option.value) === toStringValue(value);
-		}) ?? null;
-	}, [
-		isMultiple,
-		resolvedOptions,
-		value
-	]);
-	const handleChange = (nextValue) => {
+		};
+	}, [fetchOptions]);
+	const handleChange = (event) => {
 		if (!onValueChange) return;
-		if (isMultiple) {
-			onValueChange((Array.isArray(nextValue) ? nextValue : []).map((item) => {
-				return item.value;
+		const raw = event.detail?.value;
+		if (multiple) {
+			onValueChange((Array.isArray(raw) ? raw : raw ? [raw] : []).map((entry) => {
+				return mapBack(entry);
 			}));
 			return;
 		}
-		onValueChange(nextValue?.value ?? null);
+		const single = Array.isArray(raw) ? raw[0] : raw;
+		onValueChange(single ? mapBack(single) : null);
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsxs(Combobox, {
-			multiple: isMultiple,
-			items: resolvedOptions,
-			value: selectedValue,
-			onValueChange: handleChange,
-			open,
-			defaultOpen,
-			onOpenChange: (nextOpen) => {
-				setInternalOpen(nextOpen);
-				onOpenChange?.(nextOpen);
-				if (!nextOpen) setSearchValue("");
-			},
-			onInputValueChange: (nextValue) => {
-				const nextSearchValue = String(nextValue ?? "");
-				setSearchValue(nextSearchValue);
-				onInputValueChange?.(nextSearchValue);
-			},
-			itemToStringLabel: (item) => {
-				return item?.label ?? "";
-			},
-			itemToStringValue: (item) => {
-				return toStringValue(item?.value);
-			},
-			disabled,
-			children: [isMultiple ? /* @__PURE__ */ jsx(ComboboxChips, {
-				ref: anchor,
-				className,
-				children: /* @__PURE__ */ jsx(ComboboxValue, { children: (items) => {
-					return /* @__PURE__ */ jsxs(Fragment, { children: [items.map((item) => {
-						return /* @__PURE__ */ jsxs(ComboboxChip, { children: [/* @__PURE__ */ jsx(OptionIcon, { icon: item.icon }), item.label] }, toStringValue(item.value));
-					}), /* @__PURE__ */ jsx(ComboboxChipsInput, { placeholder })] });
-				} })
-			}) : /* @__PURE__ */ jsx(ComboboxPrimitiveInput, {
-				className,
-				placeholder,
-				showClear,
-				disabled
-			}), /* @__PURE__ */ jsxs(ComboboxContent, {
-				anchor: isMultiple ? anchor : void 0,
-				className: contentClassName,
-				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
-					return /* @__PURE__ */ jsx(ComboboxItem, {
-						value: item,
-						children: /* @__PURE__ */ jsxs("span", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ jsx(OptionIcon, { icon: item.icon }), /* @__PURE__ */ jsx(ComboboxHighlightedText, {
-								text: item.label,
-								search: searchValue
-							})]
-						})
-					}, toStringValue(item.value));
-				} })]
-			})]
-		}), withLoadingIndicator && loading && /* @__PURE__ */ jsx(Spinner, { size: "xs" })]
+	const valueProps = multiple ? { values: (Array.isArray(value) ? value : []).map((entry) => {
+		return toStringValue(entry);
+	}) } : { value: toStringValue(value) };
+	return /* @__PURE__ */ jsx(Combobox, {
+		ref,
+		multiple,
+		disabled,
+		placeholder,
+		emptyMessage,
+		loadingMessage,
+		startTypingMessage,
+		clearable: showClear,
+		invalid: isInvalid,
+		size,
+		width,
+		allowCreate,
+		async: usesAsync,
+		fetchOptions: adaptedFetch,
+		name,
+		id,
+		onPkChange: handleChange,
+		onPkCreate: onCreate ? (event) => {
+			return onCreate(event.detail?.query ?? "");
+		} : void 0,
+		onPkOpenChange: onOpenChange ? (event) => {
+			return onOpenChange(Boolean(event.detail?.open));
+		} : void 0,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		"aria-errormessage": ariaErrorMessage,
+		"aria-labelledby": ariaLabelledBy,
+		...valueProps,
+		children: !usesAsync && flatOptions.map((option) => {
+			return /* @__PURE__ */ jsx(Option, {
+				value: toStringValue(option.value),
+				disabled: option.disabled,
+				children: option.label
+			}, toStringValue(option.value));
+		})
 	});
-};
+});
 //#endregion
 export { ComboboxInput };
 

package/dist/components/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import {\n    Fragment, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxValue,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n} from '@verbb/plugin-kit-react/components/Combobox';\n\nexport type ComboboxInputOption = {\n    label: string;\n    value: string | number;\n    icon?: string | null;\n    [key: string]: unknown;\n};\n\nexport type ComboboxInputProps = {\n    options?: ComboboxInputOption[];\n    fetchOptions?: () => Promise<ComboboxInputOption[]>;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    className?: string;\n    contentClassName?: string;\n    withLoadingIndicator?: boolean;\n    showClear?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onInputValueChange?: (value: string) => void;\n    cacheKey?: string;\n    cacheTtlMs?: number;\n    disableCache?: boolean;\n};\n\ntype CacheEntry = {\n    options: ComboboxInputOption[];\n    expiresAt: number;\n};\n\nconst optionsCache = new Map<string, CacheEntry>();\n\nconst toStringValue = (value: unknown): string => {\n    return String(value ?? '');\n};\n\nconst OptionIcon = ({ icon }: { icon?: string | null }) => {\n    if (!icon || typeof icon !== 'string') {\n        return null;\n    }\n\n    return (\n        <span\n            className=\"text-slate-500 [&_svg]:size-4 [&_svg]:shrink-0\"\n            aria-hidden=\"true\"\n            dangerouslySetInnerHTML={{ __html: icon }}\n        />\n    );\n};\n\nexport const ComboboxInput = ({\n    options,\n    fetchOptions,\n    value = null,\n    onValueChange,\n    multiple = false,\n    disabled = false,\n    placeholder = 'Select an option',\n    emptyMessage = 'No options found.',\n    className,\n    contentClassName,\n    withLoadingIndicator = true,\n    showClear = true,\n    open,\n    defaultOpen,\n    onOpenChange,\n    onInputValueChange,\n    cacheKey,\n    cacheTtlMs = 5 * 60 * 1000,\n    disableCache = false,\n}: ComboboxInputProps) => {\n    const [fetchedOptions, setFetchedOptions] = useState<ComboboxInputOption[] | null>(null);\n    const [loading, setLoading] = useState(false);\n    const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));\n    const [searchValue, setSearchValue] = useState('');\n    const hasLoadedRef = useRef(false);\n    const anchor = useComboboxAnchor();\n    const isMultiple = multiple;\n    const isOpen = open ?? internalOpen;\n\n    const resolvedOptions = useMemo(() => {\n        return fetchedOptions ?? options ?? [];\n    }, [fetchedOptions, options]);\n\n    const resolveCachedOptions = useCallback(() => {\n        if (disableCache || !cacheKey) {\n            return null;\n        }\n\n        const cached = optionsCache.get(cacheKey);\n        if (!cached) {\n            return null;\n        }\n\n        if (cached.expiresAt <= Date.now()) {\n            optionsCache.delete(cacheKey);\n            return null;\n        }\n\n        return cached.options;\n    }, [cacheKey, disableCache]);\n\n    const persistCachedOptions = useCallback((nextOptions: ComboboxInputOption[]) => {\n        if (disableCache || !cacheKey) {\n            return;\n        }\n\n        optionsCache.set(cacheKey, {\n            options: nextOptions,\n            expiresAt: Date.now() + cacheTtlMs,\n        });\n    }, [cacheKey, cacheTtlMs, disableCache]);\n\n    useEffect(() => {\n        if (!fetchOptions || !isOpen) {\n            return;\n        }\n\n        const cachedOptions = resolveCachedOptions();\n        if (cachedOptions) {\n            setFetchedOptions(cachedOptions);\n            hasLoadedRef.current = true;\n            return;\n        }\n\n        if (hasLoadedRef.current && fetchedOptions) {\n            return;\n        }\n\n        let isMounted = true;\n\n        const loadOptions = async() => {\n            setLoading(true);\n\n            try {\n                const fetchedOptions = await fetchOptions();\n\n                if (isMounted) {\n                    setFetchedOptions(fetchedOptions);\n                    persistCachedOptions(fetchedOptions);\n                    hasLoadedRef.current = true;\n                }\n            } catch (error) {\n                console.error('Failed to load combobox options:', error);\n            } finally {\n                if (isMounted) {\n                    setLoading(false);\n                }\n            }\n        };\n\n        loadOptions();\n\n        return () => {\n            isMounted = false;\n        };\n    }, [fetchOptions, fetchedOptions, isOpen, persistCachedOptions, resolveCachedOptions]);\n\n    const selectedValue = useMemo(() => {\n        if (isMultiple) {\n            const selectedValues = Array.isArray(value) ? new Set(value.map((item) => { return toStringValue(item); })) : new Set<string>();\n            return resolvedOptions.filter((option) => { return selectedValues.has(toStringValue(option.value)); });\n        }\n\n        return resolvedOptions.find((option) => { return toStringValue(option.value) === toStringValue(value); }) ?? null;\n    }, [isMultiple, resolvedOptions, value]);\n\n    const handleChange = (nextValue: unknown) => {\n        if (!onValueChange) {\n            return;\n        }\n\n        if (isMultiple) {\n            const nextItems = Array.isArray(nextValue) ? nextValue : [];\n            onValueChange(nextItems.map((item) => { return item.value; }));\n            return;\n        }\n\n        onValueChange(nextValue?.value ?? null);\n    };\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Combobox\n                multiple={isMultiple}\n                items={resolvedOptions}\n                value={selectedValue as ComponentProps<typeof Combobox>['value']}\n                onValueChange={handleChange}\n                open={open}\n                defaultOpen={defaultOpen}\n                onOpenChange={(nextOpen) => {\n                    setInternalOpen(nextOpen);\n                    onOpenChange?.(nextOpen);\n\n                    if (!nextOpen) {\n                        setSearchValue('');\n                    }\n                }}\n                onInputValueChange={(nextValue) => {\n                    const nextSearchValue = String(nextValue ?? '');\n                    setSearchValue(nextSearchValue);\n                    onInputValueChange?.(nextSearchValue);\n                }}\n                itemToStringLabel={(item) => { return (item as ComboboxInputOption | null)?.label ?? ''; }}\n                itemToStringValue={(item) => { return toStringValue((item as ComboboxInputOption | null)?.value); }}\n                disabled={disabled}\n            >\n                {isMultiple ? (\n                    <ComboboxChips ref={anchor} className={className}>\n                        <ComboboxValue>\n                            {(items) => {\n                                return (\n                                    <Fragment>\n                                        {items.map((item) => {\n                                            return (\n                                                <ComboboxChip key={toStringValue(item.value)}>\n                                                    <OptionIcon icon={item.icon} />\n                                                    {item.label}\n                                                </ComboboxChip>\n                                            );\n                                        })}\n                                        <ComboboxChipsInput placeholder={placeholder} />\n                                    </Fragment>\n                                );\n                            }}\n                        </ComboboxValue>\n                    </ComboboxChips>\n                ) : (\n                    <ComboboxPrimitiveInput\n                        className={className}\n                        placeholder={placeholder}\n                        showClear={showClear}\n                        disabled={disabled}\n                    />\n                )}\n\n                <ComboboxContent\n                    anchor={isMultiple ? anchor : undefined}\n                    className={contentClassName}\n                >\n                    <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n                    <ComboboxList>\n                        {(item) => {\n                            return (\n                                <ComboboxItem key={toStringValue(item.value)} value={item}>\n                                    <span className=\"flex items-center gap-2\">\n                                        <OptionIcon icon={item.icon} />\n                                        <ComboboxHighlightedText text={item.label} search={searchValue} />\n                                    </span>\n                                </ComboboxItem>\n                            );\n                        }}\n                    </ComboboxList>\n                </ComboboxContent>\n            </Combobox>\n\n            {withLoadingIndicator && loading && <Spinner size=\"xs\" />}\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport type { PkCombobox, PkComboboxSize } from '@verbb/plugin-kit-web/components/combobox/pk-combobox.js';\n\nimport { Combobox } from './Combobox.js';\nimport { Option } from './Select.js';\n\nexport interface ComboboxInputOption {\n    value: string | number;\n    label: string;\n    disabled?: boolean;\n    [key: string]: unknown;\n}\n\nexport type ComboboxFetchOptions = (\n    query: string,\n    signal?: AbortSignal,\n) => Promise<ComboboxInputOption[]>;\n\nexport interface ComboboxInputProps {\n    options?: ComboboxInputOption[];\n    fetchOptions?: ComboboxFetchOptions;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    loadingMessage?: string;\n    startTypingMessage?: string;\n    showClear?: boolean;\n    isInvalid?: boolean;\n    size?: PkComboboxSize;\n    /** When `full`, stretch the combobox host to the available width (schema fields, table cells). */\n    width?: 'full';\n    allowCreate?: boolean;\n    onCreate?: (query: string) => void;\n    onOpenChange?: (open: boolean) => void;\n    name?: string;\n    id?: string;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst toStringValue = (value: unknown): string => {\n    return value === undefined || value === null ? '' : String(value);\n};\n\n/**\n * Convenience facade over `<pk-combobox>` mirroring the `plugin-kit-react` `ComboboxInput`\n * contract: `options[]` (or `fetchOptions` for async search), controlled `value`/`onValueChange`,\n * and `multiple`. Unlike the base-ui version, `pk-combobox` owns async fetching, filtering, chips,\n * and empty/loading states internally — this wrapper just maps props/values.\n *\n * `pk-combobox` is string-valued, so values are stringified for the element and mapped back to\n * their original option value on change.\n */\nexport const ComboboxInput = forwardRef<PkCombobox, ComboboxInputProps>(function ComboboxInput(\n    {\n        options,\n        fetchOptions,\n        value = null,\n        onValueChange,\n        multiple = false,\n        disabled = false,\n        placeholder = '',\n        emptyMessage = 'No options found.',\n        loadingMessage = 'Searching…',\n        startTypingMessage = 'Start typing to search…',\n        // Off by default — match pk-combobox `clearable=false` and v1 (None as a list option).\n        showClear = false,\n        isInvalid,\n        size,\n        width,\n        allowCreate,\n        onCreate,\n        onOpenChange,\n        name,\n        id,\n        'aria-label': ariaLabel,\n        'aria-describedby': ariaDescribedBy,\n        'aria-errormessage': ariaErrorMessage,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const usesAsync = Boolean(fetchOptions) && !options?.length;\n\n    const flatOptions = useMemo(() => { return options ?? []; }, [options]);\n\n    const mapBack = (raw: string): string | number => {\n        const match = flatOptions.find((option) => { return toStringValue(option.value) === toStringValue(raw); });\n        return match ? match.value : raw;\n    };\n\n    const adaptedFetch = useMemo(() => {\n        if (!fetchOptions) {\n            return null;\n        }\n\n        return async (query: string, signal: AbortSignal) => {\n            const results = await fetchOptions(query, signal);\n            return results.map((option) => { return { value: toStringValue(option.value), label: option.label }; });\n        };\n    }, [fetchOptions]);\n\n    const handleChange = (event: Event): void => {\n        if (!onValueChange) {\n            return;\n        }\n\n        const detail = (event as CustomEvent<{ value: string | string[] }>).detail;\n        const raw = detail?.value;\n\n        if (multiple) {\n            const arr = Array.isArray(raw) ? raw : raw ? [raw] : [];\n            onValueChange(arr.map((entry) => { return mapBack(entry); }));\n            return;\n        }\n\n        const single = Array.isArray(raw) ? raw[0] : raw;\n        onValueChange(single ? mapBack(single) : null);\n    };\n\n    const valueProps = multiple\n        ? { values: (Array.isArray(value) ? value : []).map((entry) => { return toStringValue(entry); }) }\n        : { value: toStringValue(value) };\n\n    return (\n        <Combobox\n            ref={ref}\n            multiple={multiple}\n            disabled={disabled}\n            placeholder={placeholder}\n            emptyMessage={emptyMessage}\n            loadingMessage={loadingMessage}\n            startTypingMessage={startTypingMessage}\n            clearable={showClear}\n            invalid={isInvalid}\n            size={size}\n            width={width}\n            allowCreate={allowCreate}\n            async={usesAsync}\n            fetchOptions={adaptedFetch}\n            name={name}\n            id={id}\n            onPkChange={handleChange}\n            onPkCreate={onCreate ? (event: Event) => { return onCreate((event as CustomEvent<{ query: string }>).detail?.query ?? ''); } : undefined}\n            onPkOpenChange={onOpenChange ? (event: Event) => { return onOpenChange(Boolean((event as CustomEvent<{ open: boolean }>).detail?.open)); } : undefined}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedBy}\n            aria-errormessage={ariaErrorMessage}\n            aria-labelledby={ariaLabelledBy}\n            {...valueProps}\n        >\n            {!usesAsync\n                && flatOptions.map((option) => {\n                    return (\n                        <Option key={toStringValue(option.value)} value={toStringValue(option.value)} disabled={option.disabled}>\n                            {option.label}\n                        </Option>\n                    );\n                })}\n        </Combobox>\n    );\n});\n"],"mappings":";;;;;AA6CA,IAAM,iBAAiB,UAA2B;AAC9C,QAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,MAAM;;;;;;;;;;;AAYrE,IAAa,gBAAgB,WAA2C,SAAS,cAC7E,EACI,SACA,cACA,QAAQ,MACR,eACA,WAAW,OACX,WAAW,OACX,cAAc,IACd,eAAe,qBACf,iBAAiB,cACjB,qBAAqB,2BAErB,YAAY,OACZ,WACA,MACA,OACA,aACA,UACA,cACA,MACA,IACA,cAAc,WACd,oBAAoB,iBACpB,qBAAqB,kBACrB,mBAAmB,kBAEvB,KACF;CACE,MAAM,YAAY,QAAQ,aAAa,IAAI,CAAC,SAAS;CAErD,MAAM,cAAc,cAAc;AAAE,SAAO,WAAW,EAAE;IAAK,CAAC,QAAQ,CAAC;CAEvE,MAAM,WAAW,QAAiC;EAC9C,MAAM,QAAQ,YAAY,MAAM,WAAW;AAAE,UAAO,cAAc,OAAO,MAAM,KAAK,cAAc,IAAI;IAAI;AAC1G,SAAO,QAAQ,MAAM,QAAQ;;CAGjC,MAAM,eAAe,cAAc;AAC/B,MAAI,CAAC,aACD,QAAO;AAGX,SAAO,OAAO,OAAe,WAAwB;AAEjD,WAAO,MADe,aAAa,OAAO,OAAO,EAClC,KAAK,WAAW;AAAE,WAAO;KAAE,OAAO,cAAc,OAAO,MAAM;KAAE,OAAO,OAAO;KAAO;KAAI;;IAE5G,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAgB,UAAuB;AACzC,MAAI,CAAC,cACD;EAIJ,MAAM,MADU,MAAoD,QAChD;AAEpB,MAAI,UAAU;AAEV,kBADY,MAAM,QAAQ,IAAI,GAAG,MAAM,MAAM,CAAC,IAAI,GAAG,EAAE,EACrC,KAAK,UAAU;AAAE,WAAO,QAAQ,MAAM;KAAI,CAAC;AAC7D;;EAGJ,MAAM,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;AAC7C,gBAAc,SAAS,QAAQ,OAAO,GAAG,KAAK;;CAGlD,MAAM,aAAa,WACb,EAAE,SAAS,MAAM,QAAQ,MAAM,GAAG,QAAQ,EAAE,EAAE,KAAK,UAAU;AAAE,SAAO,cAAc,MAAM;GAAI,EAAE,GAChG,EAAE,OAAO,cAAc,MAAM,EAAE;AAErC,QACI,oBAAC,UAAD;EACS;EACK;EACA;EACG;EACC;EACE;EACI;EACpB,WAAW;EACX,SAAS;EACH;EACC;EACM;EACb,OAAO;EACP,cAAc;EACR;EACF;EACJ,YAAY;EACZ,YAAY,YAAY,UAAiB;AAAE,UAAO,SAAU,MAAyC,QAAQ,SAAS,GAAG;MAAM,KAAA;EAC/H,gBAAgB,gBAAgB,UAAiB;AAAE,UAAO,aAAa,QAAS,MAAyC,QAAQ,KAAK,CAAC;MAAM,KAAA;EAC7I,cAAY;EACZ,oBAAkB;EAClB,qBAAmB;EACnB,mBAAiB;EACjB,GAAI;YAEH,CAAC,aACK,YAAY,KAAK,WAAW;AAC3B,UACI,oBAAC,QAAD;IAA0C,OAAO,cAAc,OAAO,MAAM;IAAE,UAAU,OAAO;cAC1F,OAAO;IACH,EAFI,cAAc,OAAO,MAAM,CAE/B;IAEf;EACC,CAAA;EAEjB"}

package/dist/components/CopyButton.d.ts

@@ -1,9 +1,13 @@
-export declare function copyToClipboardWithMeta(value: any): Promise<void>;
-export declare function CopyButton({ value, className, variant, ...props }: {
-    value: string;
-    className?: string;
-    src?: string;
-    variant?: 'link' | 'none' | 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'ghost';
-    event?: Event;
-}): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+import { PkCopyButton } from '@verbb/plugin-kit-web/components/copy-button/pk-copy-button.js';
+/** React facade over `<pk-copy-button>`. Behavior and styles live in the web component. */
+export declare const PkCopyButtonElement: import('@lit/react').ReactWebComponent<PkCopyButton, {
+    onPkCopy: string;
+    onPkCopyError: string;
+}>;
+export declare const CopyButton: import('@lit/react').ReactWebComponent<PkCopyButton, {
+    onPkCopy: string;
+    onPkCopyError: string;
+}>;
+export type CopyButtonProps = React.ComponentProps<typeof PkCopyButtonElement>;
 //# sourceMappingURL=CopyButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/components/CopyButton.tsx"],"names":[],"mappings":"AAOA,wBAAsB,uBAAuB,CAAC,KAAK,KAAA,iBAElD;AAED,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAuB,EACvB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;IACjH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,2CA+BA"}
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/components/CopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAE9F,2FAA2F;AAC3F,eAAO,MAAM,mBAAmB;;;EAQ9B,CAAC;AAEH,eAAO,MAAM,UAAU;;;EAAsB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/CopyButton.js

@@ -1,40 +1,19 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Button } from "./Button.js";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faClipboard } from "@fortawesome/pro-solid-svg-icons";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkCopyButton } from "@verbb/plugin-kit-web/components/copy-button/pk-copy-button.js";
 //#region src/components/CopyButton.tsx
-async function copyToClipboardWithMeta(value) {
-	await navigator.clipboard.writeText(value);
-}
-function CopyButton({ value, className, variant = "transparent", ...props }) {
-	const [hasCopied, setHasCopied] = useState(false);
-	useEffect(() => {
-		const timeoutId = window.setTimeout(() => {
-			setHasCopied(false);
-		}, 2e3);
-		return () => {
-			window.clearTimeout(timeoutId);
-		};
-	}, [hasCopied]);
-	return /* @__PURE__ */ jsxs(Button, {
-		size: "icon",
-		variant,
-		className: cn(className),
-		onClick: () => {
-			copyToClipboardWithMeta(value);
-			setHasCopied(true);
-		},
-		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Copy"
-		}), hasCopied ? /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faCheck }) : /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faClipboard })]
-	});
-}
+/** React facade over `<pk-copy-button>`. Behavior and styles live in the web component. */
+var PkCopyButtonElement = createPluginKitComponent({
+	tagName: "pk-copy-button",
+	elementClass: PkCopyButton,
+	react: React,
+	events: {
+		onPkCopy: "pk-copy",
+		onPkCopyError: "pk-copy-error"
+	}
+});
+var CopyButton = PkCopyButtonElement;
 //#endregion
-export { CopyButton, copyToClipboardWithMeta };
+export { CopyButton, PkCopyButtonElement };
 
 //# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","names":[],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faClipboard } from '@fortawesome/pro-solid-svg-icons';\n\nimport { Button } from './Button';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nexport async function copyToClipboardWithMeta(value) {\n    await navigator.clipboard.writeText(value);\n}\n\nexport function CopyButton({\n    value,\n    className,\n    variant = 'transparent',\n    ...props\n}: {\n    value: string;\n    className?: string;\n    src?: string;\n    variant?: 'link' | 'none' | 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'ghost';\n    event?: Event;\n}) {\n    const [hasCopied, setHasCopied] = useState(false);\n\n    useEffect(() => {\n        const timeoutId = window.setTimeout(() => {\n            setHasCopied(false);\n        }, 2000);\n\n        return () => {\n            window.clearTimeout(timeoutId);\n        };\n    }, [hasCopied]);\n\n    return (\n        <Button\n            size=\"icon\"\n            variant={variant}\n            className={cn(\n                className,\n            )}\n            onClick={() => {\n                copyToClipboardWithMeta(value);\n\n                setHasCopied(true);\n            }}\n            {...props}\n        >\n            <span className=\"sr-only\">Copy</span>\n            {hasCopied ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faClipboard} />}\n        </Button>\n    );\n}\n"],"mappings":";;;;;;;;AAOA,eAAsB,wBAAwB,OAAO;AACjD,OAAM,UAAU,UAAU,UAAU,MAAM;;AAG9C,SAAgB,WAAW,EACvB,OACA,WACA,UAAU,eACV,GAAG,SAOJ;CACC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,iBAAgB;EACZ,MAAM,YAAY,OAAO,iBAAiB;AACtC,gBAAa,MAAM;KACpB,IAAK;AAER,eAAa;AACT,UAAO,aAAa,UAAU;;IAEnC,CAAC,UAAU,CAAC;AAEf,QACI,qBAAC,QAAD;EACI,MAAK;EACI;EACT,WAAW,GACP,UACH;EACD,eAAe;AACX,2BAAwB,MAAM;AAE9B,gBAAa,KAAK;;EAEtB,GAAI;YAXR,CAaI,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAW,CAAA,EACpC,YAAY,oBAAC,iBAAD,EAAiB,MAAM,SAAW,CAAA,GAAG,oBAAC,iBAAD,EAAiB,MAAM,aAAe,CAAA,CACnF"}
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkCopyButton } from '@verbb/plugin-kit-web/components/copy-button/pk-copy-button.js';\n\n/** React facade over `<pk-copy-button>`. Behavior and styles live in the web component. */\nexport const PkCopyButtonElement = createPluginKitComponent({\n    tagName: 'pk-copy-button',\n    elementClass: PkCopyButton,\n    react: React,\n    events: {\n        onPkCopy: 'pk-copy',\n        onPkCopyError: 'pk-copy-error',\n    },\n});\n\nexport const CopyButton = PkCopyButtonElement;\nexport type CopyButtonProps = React.ComponentProps<typeof PkCopyButtonElement>;\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,yBAAyB;CACxD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,UAAU;EACV,eAAe;EAClB;CACJ,CAAC;AAEF,IAAa,aAAa"}

package/dist/components/DatePicker.d.ts

@@ -1,9 +1,30 @@
-export declare function DatePicker({ value, onValueChange, placeholder, className, disabled, isInvalid, ...props }: {
-    value: Date | string | null;
-    onValueChange?: (value: Date | undefined) => void;
-    placeholder?: string;
-    className?: string;
-    disabled?: boolean;
+import { default as React } from 'react';
+import { PkDatePicker, PkDatePickerMode, PkDatePickerSize } from '@verbb/plugin-kit-web/components/date-picker/pk-date-picker.js';
+declare const PkDatePickerElement: import('@lit/react').ReactWebComponent<PkDatePicker, {
+    onPkChange: string;
+    onPkClear: string;
+    onInput: string;
+    onChange: string;
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+}>;
+type PkDatePickerElementProps = React.ComponentProps<typeof PkDatePickerElement>;
+export type DatePickerProps = Omit<PkDatePickerElementProps, 'value' | 'onPkChange'> & {
+    /** ISO string, Date, or empty — v1 DatePicker accepted Date. */
+    value?: string | Date | null;
+    /** React/Formie alias for the CE `invalid` boolean. */
     isInvalid?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * v1 callback — receives a local `Date` (or `undefined` when cleared).
+     * Prefer `onPkChange` for raw ISO `detail.value` from the CE.
+     */
+    onValueChange?: (value: Date | undefined) => void;
+    onPkChange?: PkDatePickerElementProps['onPkChange'];
+};
+/** 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>>;
+export { PkDatePickerElement };
+export type { PkDatePickerMode, PkDatePickerSize };
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,2CA6EA"}
+{"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"}

package/dist/components/DatePicker.js

@@ -1,60 +1,89 @@
-import { cn } from "../utils/classes.js";
-import { hostFormatDate } from "../utils/hostBridge.js";
-import { parseLocalDate, resolveCalendarMonth } from "../utils/datetime.js";
-import "../utils/index.js";
-import { Calendar } from "./Calendar.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
-import "./index.js";
-import { Button } from "./Button.js";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCalendar } from "@fortawesome/pro-solid-svg-icons";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkDatePicker } from "@verbb/plugin-kit-web/components/date-picker/pk-date-picker.js";
 //#region src/components/DatePicker.tsx
-var toDate = (value) => {
-	return parseLocalDate(value);
-};
-function DatePicker({ value, onValueChange, placeholder = "", className, disabled = false, isInvalid = false, ...props }) {
-	const [open, setOpen] = useState(false);
-	const date = useMemo(() => toDate(value), [value]);
-	const [month, setMonth] = useState(() => resolveCalendarMonth(date));
-	useEffect(() => {
-		if (date) setMonth(resolveCalendarMonth(date));
-	}, [date]);
-	const handleOpenChange = (nextOpen) => {
-		if (nextOpen) setMonth(resolveCalendarMonth(date));
-		setOpen(nextOpen);
-	};
-	const handleSelect = (selectedDate) => {
-		onValueChange?.(selectedDate);
-		setOpen(false);
+var PkDatePickerElement = createPluginKitComponent({
+	tagName: "pk-date-picker",
+	elementClass: PkDatePicker,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onPkClear: "pk-clear",
+		onInput: "input",
+		onChange: "change",
+		onPkShow: "pk-show",
+		onPkAfterShow: "pk-after-show",
+		onPkHide: "pk-hide",
+		onPkAfterHide: "pk-after-hide"
+	}
+});
+/** Local YYYY-MM-DD — keep facade free of non-exported kit util paths. */
+function formatIsoDate(date) {
+	return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function parseIsoDate(value) {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+	if (!match) return null;
+	const year = Number(match[1]);
+	const month = Number(match[2]);
+	const day = Number(match[3]);
+	const date = new Date(year, month - 1, day);
+	if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) return null;
+	return date;
+}
+/** Coerce Formie/v1 Date|string values to the CE’s ISO `YYYY-MM-DD` string. */
+function toIsoValue(value) {
+	if (value == null || value === "") return "";
+	if (value instanceof Date) {
+		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);
+}
+/** 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 resolvedInvalid = Boolean(invalid ?? isInvalid);
+	const isoValue = useMemo(() => toIsoValue(value), [value]);
+	const handlePkChange = (event) => {
+		onPkChange?.(event);
+		if (!onValueChange) return;
+		const next = event.detail?.value;
+		onValueChange(next ? parseIsoDate(next) ?? void 0 : void 0);
 	};
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: handleOpenChange,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
-			variant: "outline",
-			className: cn("min-h-[2.125rem] h-[2.125rem]", "w-[130px] px-[10px] !py-0", "!cursor-default", "justify-start text-left font-normal", "bg-transparent border border-slate-400", "hover:bg-slate-50!", "active:bg-slate-150!", "data-[popup-open]:bg-slate-150!", "[&>svg]:size-[14px]", isInvalid && ["border-rose-600!", "focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!"], className),
+	return /* @__PURE__ */ jsx(PkDatePickerElement, {
+		ref,
+		...rest,
+		value: isoValue,
+		onPkChange: handlePkChange,
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"clearable",
+			"multiple",
+			"open",
+			"disablePast",
+			"disableFuture",
+			"withClear",
+			"required"
+		], {
 			disabled,
-			...props,
-			children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
-				icon: faCalendar,
-				className: cn("mr-1 text-gray-400")
-			}), date ? hostFormatDate(date) : placeholder]
-		}) }), /* @__PURE__ */ jsx(PopoverContent, {
-			className: cn("w-auto p-0!"),
-			children: /* @__PURE__ */ jsx(Calendar, {
-				mode: "single",
-				selected: date,
-				month,
-				onMonthChange: setMonth,
-				captionLayout: "dropdown",
-				onSelect: handleSelect
-			})
-		})]
+			invalid: resolvedInvalid,
+			clearable,
+			multiple,
+			open,
+			disablePast,
+			disableFuture,
+			withClear,
+			required
+		})
 	});
-}
+});
+DatePicker.displayName = "DatePicker";
 //#endregion
-export { DatePicker };
+export { DatePicker, PkDatePickerElement };
 
 //# sourceMappingURL=DatePicker.js.map