@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/CheckboxInput.js

@@ -1,27 +1,47 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
 import { Checkbox } from "./Checkbox.js";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CheckboxInput.tsx
-function CheckboxInput({ label, description, className, checkboxClassName, labelClassName, descriptionClassName, disabled, ...props }) {
+/**
+* Convenience facade pairing `<pk-checkbox>` with a label + optional description, mirroring the
+* `plugin-kit-react` `CheckboxInput`. Layout uses a plain wrapping `<label>` (no Tailwind) — the
+* checkbox itself is styled inside the web component's shadow root.
+*/
+function CheckboxInput({ label, description, className, disabled, ...props }) {
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "checkbox-input",
-		className: cn("flex items-start gap-2 text-sm", disabled ? "cursor-not-allowed" : "cursor-pointer", className),
+		className,
+		style: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: "0.5rem",
+			cursor: disabled ? "not-allowed" : "pointer"
+		},
 		children: [/* @__PURE__ */ jsx(Checkbox, {
-			className: checkboxClassName,
 			disabled,
 			...props
 		}), /* @__PURE__ */ jsxs("span", {
-			className: "min-w-0 peer-disabled:opacity-50 peer-data-disabled:opacity-50",
+			"data-slot": "checkbox-input-body",
+			style: {
+				minWidth: 0,
+				opacity: disabled ? .5 : void 0
+			},
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "checkbox-input-label",
-				className: cn("block leading-4", labelClassName),
+				style: {
+					display: "block",
+					lineHeight: 1.25
+				},
 				children: label
-			}), description && /* @__PURE__ */ jsx("span", {
+			}), description ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "checkbox-input-description",
-				className: cn("mt-1 block text-gray-500", descriptionClassName),
+				style: {
+					display: "block",
+					marginTop: "0.25rem",
+					color: "var(--pk-color-text-muted, #64748b)"
+				},
 				children: description
-			})]
+			}) : null]
 		})]
 	});
 }

package/dist/components/CheckboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.js","names":[],"sources":["../../src/components/CheckboxInput.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode } from 'react';\n\nimport { Checkbox } from '@verbb/plugin-kit-react/components/Checkbox';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype CheckboxInputProps = Omit<ComponentProps<typeof Checkbox>, 'className' | 'children'> & {\n    label: ReactNode;\n    description?: ReactNode;\n    className?: string;\n    checkboxClassName?: string;\n    labelClassName?: string;\n    descriptionClassName?: string;\n};\n\nfunction CheckboxInput({\n    label,\n    description,\n    className,\n    checkboxClassName,\n    labelClassName,\n    descriptionClassName,\n    disabled,\n    ...props\n}: CheckboxInputProps) {\n    return (\n        <label\n            data-slot=\"checkbox-input\"\n            className={cn(\n                'flex items-start gap-2 text-sm',\n                disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n                className,\n            )}\n        >\n            <Checkbox className={checkboxClassName} disabled={disabled} {...props} />\n            <span className=\"min-w-0 peer-disabled:opacity-50 peer-data-disabled:opacity-50\">\n                <span\n                    data-slot=\"checkbox-input-label\"\n                    className={cn('block leading-4', labelClassName)}\n                >\n                    {label}\n                </span>\n                {description && (\n                    <span\n                        data-slot=\"checkbox-input-description\"\n                        className={cn('mt-1 block text-gray-500', descriptionClassName)}\n                    >\n                        {description}\n                    </span>\n                )}\n            </span>\n        </label>\n    );\n}\n\nexport { CheckboxInput };\nexport type { CheckboxInputProps };\n"],"mappings":";;;;;AAcA,SAAS,cAAc,EACnB,OACA,aACA,WACA,mBACA,gBACA,sBACA,UACA,GAAG,SACgB;AACnB,QACI,qBAAC,SAAD;EACI,aAAU;EACV,WAAW,GACP,kCACA,WAAW,uBAAuB,kBAClC,UACH;YANL,CAQI,oBAAC,UAAD;GAAU,WAAW;GAA6B;GAAU,GAAI;GAAS,CAAA,EACzE,qBAAC,QAAD;GAAM,WAAU;aAAhB,CACI,oBAAC,QAAD;IACI,aAAU;IACV,WAAW,GAAG,mBAAmB,eAAe;cAE/C;IACE,CAAA,EACN,eACG,oBAAC,QAAD;IACI,aAAU;IACV,WAAW,GAAG,4BAA4B,qBAAqB;cAE9D;IACE,CAAA,CAER;KACH"}
+{"version":3,"file":"CheckboxInput.js","names":[],"sources":["../../src/components/CheckboxInput.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\n\nimport { Checkbox, type CheckboxProps } from './Checkbox.js';\n\nexport interface CheckboxInputProps extends Omit<CheckboxProps, 'children'> {\n    label: ReactNode;\n    description?: ReactNode;\n    className?: string;\n}\n\n/**\n * Convenience facade pairing `<pk-checkbox>` with a label + optional description, mirroring the\n * `plugin-kit-react` `CheckboxInput`. Layout uses a plain wrapping `<label>` (no Tailwind) — the\n * checkbox itself is styled inside the web component's shadow root.\n */\nexport function CheckboxInput({\n    label,\n    description,\n    className,\n    disabled,\n    ...props\n}: CheckboxInputProps) {\n    return (\n        <label\n            data-slot=\"checkbox-input\"\n            className={className}\n            style={{\n                display: 'flex',\n                alignItems: 'flex-start',\n                gap: '0.5rem',\n                cursor: disabled ? 'not-allowed' : 'pointer',\n            }}\n        >\n            <Checkbox disabled={disabled} {...props} />\n            <span data-slot=\"checkbox-input-body\" style={{ minWidth: 0, opacity: disabled ? 0.5 : undefined }}>\n                <span data-slot=\"checkbox-input-label\" style={{ display: 'block', lineHeight: 1.25 }}>\n                    {label}\n                </span>\n                {description ? (\n                    <span\n                        data-slot=\"checkbox-input-description\"\n                        style={{ display: 'block', marginTop: '0.25rem', color: 'var(--pk-color-text-muted, #64748b)' }}\n                    >\n                        {description}\n                    </span>\n                ) : null}\n            </span>\n        </label>\n    );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,cAAc,EAC1B,OACA,aACA,WACA,UACA,GAAG,SACgB;AACnB,QACI,qBAAC,SAAD;EACI,aAAU;EACC;EACX,OAAO;GACH,SAAS;GACT,YAAY;GACZ,KAAK;GACL,QAAQ,WAAW,gBAAgB;GACtC;YARL,CAUI,oBAAC,UAAD;GAAoB;GAAU,GAAI;GAAS,CAAA,EAC3C,qBAAC,QAAD;GAAM,aAAU;GAAsB,OAAO;IAAE,UAAU;IAAG,SAAS,WAAW,KAAM,KAAA;IAAW;aAAjG,CACI,oBAAC,QAAD;IAAM,aAAU;IAAuB,OAAO;KAAE,SAAS;KAAS,YAAY;KAAM;cAC/E;IACE,CAAA,EACN,cACG,oBAAC,QAAD;IACI,aAAU;IACV,OAAO;KAAE,SAAS;KAAS,WAAW;KAAW,OAAO;KAAuC;cAE9F;IACE,CAAA,GACP,KACD;KACH"}

package/dist/components/CheckboxSelect.d.ts

@@ -1,19 +1,20 @@
-export declare const ALL_VALUE = "*";
-export type CheckboxSelectOption = {
-    label: string;
-    value: string;
+import { default as React } from 'react';
+import { PkCheckboxSelect, PkCheckboxSelectOption, PkCheckboxSelectValue } from '@verbb/plugin-kit-web/components/checkbox-select/pk-checkbox-select.js';
+declare const PkCheckboxSelectElement: import('@lit/react').ReactWebComponent<PkCheckboxSelect, {
+    onPkChange: string;
+    onNativeChange: string;
+}>;
+type PkCheckboxSelectElementProps = React.ComponentProps<typeof PkCheckboxSelectElement>;
+export type CheckboxSelectProps = Omit<PkCheckboxSelectElementProps, 'onChange'> & {
+    /**
+     * Controlled value callback — sugar over `onPkChange` detail.
+     * Prefer this in React apps; `onPkChange` remains for CE parity.
+     */
+    onChange?: (value: PkCheckboxSelectValue) => void;
 };
-export type CheckboxSelectValue = typeof ALL_VALUE | string[];
-type CheckboxSelectProps = {
-    options: CheckboxSelectOption[];
-    value?: CheckboxSelectValue;
-    onChange?: (value: CheckboxSelectValue) => void;
-    showAllOption?: boolean;
-    allLabel?: string;
-    disabled?: boolean;
-    name?: string;
-    className?: string;
-};
-export declare function CheckboxSelect({ options, value, onChange, showAllOption, allLabel, disabled, className, }: CheckboxSelectProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/** React facade over `<pk-checkbox-select>`. Behavior and styles live in the web component. */
+export declare const CheckboxSelect: React.ForwardRefExoticComponent<Omit<CheckboxSelectProps, "ref"> & React.RefAttributes<PkCheckboxSelect>>;
+export { PkCheckboxSelectElement };
+export { ALL_VALUE } from '@verbb/plugin-kit-web/components/checkbox-select/pk-checkbox-select.js';
+export type { PkCheckboxSelectOption, PkCheckboxSelectValue };
 //# sourceMappingURL=CheckboxSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxSelect.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxSelect.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,MAAM,MAAM,oBAAoB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,GAAG,MAAM,EAAE,CAAC;AAE9D,KAAK,mBAAmB,GAAG;IACvB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAU,EACV,QAAQ,EACR,aAAqB,EACrB,QAAgB,EAChB,QAAgB,EAChB,SAAS,GACZ,EAAE,mBAAmB,2CAsErB"}
+{"version":3,"file":"CheckboxSelect.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EACH,gBAAgB,EAChB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,EAC7B,MAAM,wEAAwE,CAAC;AAIhF,QAAA,MAAM,uBAAuB;;;EAU3B,CAAC;AAEH,KAAK,4BAA4B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAEzF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,4BAA4B,EAAE,UAAU,CAAC,GAAG;IAC/E;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,cAAc,2GA2B1B,CAAC;AAIF,OAAO,EAAE,uBAAuB,EAAE,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,wEAAwE,CAAC;AACnG,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/CheckboxSelect.js

@@ -1,63 +1,35 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { CheckboxInput } from "./CheckboxInput.js";
-import { useCallback, useMemo } 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 { ALL_VALUE, PkCheckboxSelect } from "@verbb/plugin-kit-web/components/checkbox-select/pk-checkbox-select.js";
 //#region src/components/CheckboxSelect.tsx
-var ALL_VALUE = "*";
-function CheckboxSelect({ options, value = [], onChange, showAllOption = false, allLabel = "All", disabled = false, className }) {
-	const isAllSelected = value === "*";
-	const selectedArray = useMemo(() => {
-		if (isAllSelected) return options.map((option) => {
-			return option.value;
-		});
-		if (Array.isArray(value)) return value;
-		return [];
-	}, [
-		isAllSelected,
-		options,
-		value
-	]);
-	const handleAllChange = useCallback((checked) => {
-		onChange?.(checked === true ? "*" : []);
-	}, [onChange]);
-	const handleItemChange = useCallback((optionValue, checked) => {
-		if (isAllSelected) return;
-		const next = checked ? [...selectedArray, optionValue] : selectedArray.filter((v) => {
-			return v !== optionValue;
-		});
-		onChange?.(next);
-	}, [
-		isAllSelected,
-		selectedArray,
-		onChange
-	]);
-	return /* @__PURE__ */ jsxs("fieldset", {
-		className: cn("space-y-1", className),
-		disabled,
-		children: [showAllOption && /* @__PURE__ */ jsx(CheckboxInput, {
-			label: allLabel,
-			labelClassName: "font-bold",
-			className: "items-start gap-1.5",
-			checked: isAllSelected,
-			onCheckedChange: handleAllChange,
-			disabled
-		}), options.map((option) => {
-			const isChecked = isAllSelected || selectedArray.includes(option.value);
-			const isItemDisabled = isAllSelected;
-			return /* @__PURE__ */ jsx(CheckboxInput, {
-				label: option.label,
-				className: "items-start gap-1.5",
-				checked: isChecked,
-				onCheckedChange: (checked) => {
-					return handleItemChange(option.value, checked === true);
-				},
-				disabled: disabled || isItemDisabled
-			}, option.value);
-		})]
+var PkCheckboxSelectElement = createPluginKitComponent({
+	tagName: "pk-checkbox-select",
+	elementClass: PkCheckboxSelect,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onNativeChange: "change"
+	}
+});
+/** React facade over `<pk-checkbox-select>`. Behavior and styles live in the web component. */
+var CheckboxSelect = forwardRef(function CheckboxSelect({ disabled, onChange, onPkChange, ...rest }, ref) {
+	const handlePkChange = useCallback((event) => {
+		onPkChange?.(event);
+		if (!onChange) return;
+		const detail = event.detail;
+		if (detail && "value" in detail) onChange(detail.value);
+	}, [onChange, onPkChange]);
+	return /* @__PURE__ */ jsx(PkCheckboxSelectElement, {
+		ref,
+		...rest,
+		...trueBooleanProps(["disabled"], { disabled }),
+		...onChange || onPkChange ? { onPkChange: handlePkChange } : {}
 	});
-}
+});
+CheckboxSelect.displayName = "CheckboxSelect";
 //#endregion
-export { ALL_VALUE, CheckboxSelect };
+export { ALL_VALUE, CheckboxSelect, PkCheckboxSelectElement };
 
 //# sourceMappingURL=CheckboxSelect.js.map

package/dist/components/CheckboxSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../src/components/CheckboxSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { CheckboxInput } from '@verbb/plugin-kit-react/components/CheckboxInput';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nexport const ALL_VALUE = '*';\n\nexport type CheckboxSelectOption = {\n    label: string;\n    value: string;\n};\n\nexport type CheckboxSelectValue = typeof ALL_VALUE | string[];\n\ntype CheckboxSelectProps = {\n    options: CheckboxSelectOption[];\n    value?: CheckboxSelectValue;\n    onChange?: (value: CheckboxSelectValue) => void;\n    showAllOption?: boolean;\n    allLabel?: string;\n    disabled?: boolean;\n    name?: string;\n    className?: string;\n};\n\nexport function CheckboxSelect({\n    options,\n    value = [],\n    onChange,\n    showAllOption = false,\n    allLabel = 'All',\n    disabled = false,\n    className,\n}: CheckboxSelectProps) {\n    const isAllSelected = value === ALL_VALUE;\n    const selectedArray = useMemo(() => {\n        if (isAllSelected) {\n            return options.map((option) => {\n                return option.value;\n            });\n        }\n\n        if (Array.isArray(value)) {\n            return value;\n        }\n\n        return [];\n    }, [isAllSelected, options, value]);\n\n    const handleAllChange = useCallback(\n        (checked: boolean | 'indeterminate') => {\n            onChange?.(checked === true ? ALL_VALUE : []);\n        },\n        [onChange],\n    );\n\n    const handleItemChange = useCallback(\n        (optionValue: string, checked: boolean) => {\n            if (isAllSelected) {\n                return;\n            }\n            const next = checked\n                ? [...selectedArray, optionValue]\n                : selectedArray.filter((v) => { return v !== optionValue; });\n            onChange?.(next);\n        },\n        [isAllSelected, selectedArray, onChange],\n    );\n\n    return (\n        <fieldset\n            className={cn('space-y-1', className)}\n            disabled={disabled}\n        >\n            {showAllOption && (\n                <CheckboxInput\n                    label={allLabel}\n                    labelClassName=\"font-bold\"\n                    className=\"items-start gap-1.5\"\n                    checked={isAllSelected}\n                    onCheckedChange={handleAllChange}\n                    disabled={disabled}\n                />\n            )}\n            {options.map((option) => {\n                const isChecked = isAllSelected || selectedArray.includes(option.value);\n                const isItemDisabled = isAllSelected;\n\n                return (\n                    <CheckboxInput\n                        key={option.value}\n                        label={option.label}\n                        className=\"items-start gap-1.5\"\n                        checked={isChecked}\n                        onCheckedChange={(checked) => {\n                            return handleItemChange(option.value, checked === true);\n                        }}\n                        disabled={disabled || isItemDisabled}\n                    />\n                );\n            })}\n        </fieldset>\n    );\n}\n"],"mappings":";;;;;;AAIA,IAAa,YAAY;AAoBzB,SAAgB,eAAe,EAC3B,SACA,QAAQ,EAAE,EACV,UACA,gBAAgB,OAChB,WAAW,OACX,WAAW,OACX,aACoB;CACpB,MAAM,gBAAgB,UAAA;CACtB,MAAM,gBAAgB,cAAc;AAChC,MAAI,cACA,QAAO,QAAQ,KAAK,WAAW;AAC3B,UAAO,OAAO;IAChB;AAGN,MAAI,MAAM,QAAQ,MAAM,CACpB,QAAO;AAGX,SAAO,EAAE;IACV;EAAC;EAAe;EAAS;EAAM,CAAC;CAEnC,MAAM,kBAAkB,aACnB,YAAuC;AACpC,aAAW,YAAY,OAAA,MAAmB,EAAE,CAAC;IAEjD,CAAC,SAAS,CACb;CAED,MAAM,mBAAmB,aACpB,aAAqB,YAAqB;AACvC,MAAI,cACA;EAEJ,MAAM,OAAO,UACP,CAAC,GAAG,eAAe,YAAY,GAC/B,cAAc,QAAQ,MAAM;AAAE,UAAO,MAAM;IAAe;AAChE,aAAW,KAAK;IAEpB;EAAC;EAAe;EAAe;EAAS,CAC3C;AAED,QACI,qBAAC,YAAD;EACI,WAAW,GAAG,aAAa,UAAU;EAC3B;YAFd,CAIK,iBACG,oBAAC,eAAD;GACI,OAAO;GACP,gBAAe;GACf,WAAU;GACV,SAAS;GACT,iBAAiB;GACP;GACZ,CAAA,EAEL,QAAQ,KAAK,WAAW;GACrB,MAAM,YAAY,iBAAiB,cAAc,SAAS,OAAO,MAAM;GACvE,MAAM,iBAAiB;AAEvB,UACI,oBAAC,eAAD;IAEI,OAAO,OAAO;IACd,WAAU;IACV,SAAS;IACT,kBAAkB,YAAY;AAC1B,YAAO,iBAAiB,OAAO,OAAO,YAAY,KAAK;;IAE3D,UAAU,YAAY;IACxB,EARO,OAAO,MAQd;IAER,CACK"}
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../src/components/CheckboxSelect.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport {\n    PkCheckboxSelect,\n    type PkCheckboxSelectOption,\n    type PkCheckboxSelectValue,\n} from '@verbb/plugin-kit-web/components/checkbox-select/pk-checkbox-select.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkCheckboxSelectElement = createPluginKitComponent({\n    tagName: 'pk-checkbox-select',\n    elementClass: PkCheckboxSelect,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        // Keep native `change` available as `onNativeChange` if needed; React `onChange`\n        // is value sugar (see EditableTable) so `onChange={setValue}` works.\n        onNativeChange: 'change',\n    },\n});\n\ntype PkCheckboxSelectElementProps = React.ComponentProps<typeof PkCheckboxSelectElement>;\n\nexport type CheckboxSelectProps = Omit<PkCheckboxSelectElementProps, 'onChange'> & {\n    /**\n     * Controlled value callback — sugar over `onPkChange` detail.\n     * Prefer this in React apps; `onPkChange` remains for CE parity.\n     */\n    onChange?: (value: PkCheckboxSelectValue) => void;\n};\n\n/** React facade over `<pk-checkbox-select>`. Behavior and styles live in the web component. */\nexport const CheckboxSelect = forwardRef<PkCheckboxSelect, CheckboxSelectProps>(\n    function CheckboxSelect({ disabled, onChange, onPkChange, ...rest }, ref) {\n        const handlePkChange = useCallback(\n            (event: Event) => {\n                onPkChange?.(event as Parameters<NonNullable<PkCheckboxSelectElementProps['onPkChange']>>[0]);\n\n                if (!onChange) {\n                    return;\n                }\n\n                const detail = (event as CustomEvent<{ value: PkCheckboxSelectValue }>).detail;\n                if (detail && 'value' in detail) {\n                    onChange(detail.value);\n                }\n            },\n            [onChange, onPkChange],\n        );\n\n        return (\n            <PkCheckboxSelectElement\n                ref={ref}\n                {...rest}\n                {...trueBooleanProps(['disabled'], { disabled })}\n                {...(onChange || onPkChange ? { onPkChange: handlePkChange } : {})}\n            />\n        );\n    },\n);\n\nCheckboxSelect.displayName = 'CheckboxSelect';\n\nexport { PkCheckboxSelectElement };\nexport { ALL_VALUE } from '@verbb/plugin-kit-web/components/checkbox-select/pk-checkbox-select.js';\nexport type { PkCheckboxSelectOption, PkCheckboxSelectValue };\n"],"mappings":";;;;;;AAUA,IAAM,0BAA0B,yBAAyB;CACrD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EAGZ,gBAAgB;EACnB;CACJ,CAAC;;AAaF,IAAa,iBAAiB,WAC1B,SAAS,eAAe,EAAE,UAAU,UAAU,YAAY,GAAG,QAAQ,KAAK;CACtE,MAAM,iBAAiB,aAClB,UAAiB;AACd,eAAa,MAAgF;AAE7F,MAAI,CAAC,SACD;EAGJ,MAAM,SAAU,MAAwD;AACxE,MAAI,UAAU,WAAW,OACrB,UAAS,OAAO,MAAM;IAG9B,CAAC,UAAU,WAAW,CACzB;AAED,QACI,oBAAC,yBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC;EAChD,GAAK,YAAY,aAAa,EAAE,YAAY,gBAAgB,GAAG,EAAE;EACnE,CAAA;EAGb;AAED,eAAe,cAAc"}

package/dist/components/CodeEditor.d.ts

@@ -1,13 +1,19 @@
-import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-type CodeEditorLanguage = 'html' | 'text';
-type CodeEditorProps = Omit<ReactCodeMirrorProps, 'value' | 'onChange'> & {
-    value: string;
-    onChange: (value: string) => void;
-    language?: CodeEditorLanguage;
-    tabSize?: number;
-    lineNumbers?: boolean;
+import { default as React } from 'react';
+import { PkCodeEditor } from '@verbb/plugin-kit-web/components/code-editor/pk-code-editor.js';
+declare const PkCodeEditorElement: import('@lit/react').ReactWebComponent<PkCodeEditor, {
+    onPkChange: string;
+    onInput: string;
+    onChange: string;
+    onBlur: string;
+}>;
+type PkCodeEditorElementProps = React.ComponentProps<typeof PkCodeEditorElement>;
+export type CodeEditorProps = PkCodeEditorElementProps & {
+    /** React alias for the CE `invalid` boolean attribute. */
     isInvalid?: boolean;
+    /** React/Formie alias for the Lit `readonly` property. */
+    readOnly?: boolean;
 };
-export declare const CodeEditor: ({ value, onChange, language, tabSize, lineNumbers, rows, disabled, readOnly, isInvalid, className, ...props }: CodeEditorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+/** React facade over `<pk-code-editor>`. Behavior and styles live in the web component. */
+export declare const CodeEditor: React.ForwardRefExoticComponent<Omit<CodeEditorProps, "ref"> & React.RefAttributes<PkCodeEditor>>;
+export { PkCodeEditorElement };
 //# sourceMappingURL=CodeEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAGA,OAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAK9E,KAAK,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1C,KAAK,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAsCF,eAAO,MAAM,UAAU,GAAI,+GAYxB,eAAe,4CAqDjB,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../src/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAI9F,QAAA,MAAM,mBAAmB;;;;;EAWvB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjF,MAAM,MAAM,eAAe,GAAG,wBAAwB,GAAG;IACrD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,2FAA2F;AAC3F,eAAO,MAAM,UAAU,mGA0BrB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/CodeEditor.js

@@ -1,79 +1,40 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { useMemo } from "react";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { html } from "@codemirror/lang-html";
-import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import CodeMirror from "@uiw/react-codemirror";
+import { PkCodeEditor } from "@verbb/plugin-kit-web/components/code-editor/pk-code-editor.js";
 //#region src/components/CodeEditor.tsx
-var LINE_HEIGHT_PX = 18;
-var editorTheme = EditorView.theme({
-	"&": {
-		backgroundColor: "rgb(251, 252, 254)",
-		color: "rgb(31, 41, 51)",
-		fontSize: "12px"
-	},
-	"&.cm-focused": { outline: "none" },
-	".cm-scroller": {
-		fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-		lineHeight: `${LINE_HEIGHT_PX}px`
-	},
-	".cm-content": {
-		padding: "6px 8px",
-		caretColor: "rgb(31, 41, 51)"
-	},
-	".cm-gutters": {
-		backgroundColor: "rgb(245, 247, 250)",
-		borderRight: "1px solid rgba(96, 125, 159, 0.2)",
-		color: "#7c8793"
-	},
-	".cm-gutter.cm-lineNumbers .cm-gutterElement": {
-		padding: "0 8px",
-		minWidth: "3rem"
-	},
-	".cm-activeLine": { backgroundColor: "rgba(96, 125, 159, 0.06)" },
-	".cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection": { backgroundColor: "rgba(59, 130, 246, 0.35) !important" }
+var PkCodeEditorElement = createPluginKitComponent({
+	tagName: "pk-code-editor",
+	elementClass: PkCodeEditor,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onInput: "input",
+		onChange: "input",
+		onBlur: "blur"
+	}
 });
-var CodeEditor = ({ value, onChange, language = "html", tabSize = 4, lineNumbers = true, rows = 12, disabled = false, readOnly = false, isInvalid = false, className, ...props }) => {
-	const extensions = useMemo(() => {
-		const next = [
-			editorTheme,
-			EditorState.tabSize.of(Math.max(1, tabSize)),
-			EditorView.lineWrapping
-		];
-		if (language === "html") next.push(html());
-		return next;
-	}, [language, tabSize]);
-	const minHeight = `${Math.max(Number(rows) || 12, 4) * LINE_HEIGHT_PX + 12}px`;
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("overflow-hidden rounded-sm border border-[rgba(96,125,159,0.4)] bg-[rgb(251,252,254)]", "focus-within:border-sky-600 focus-within:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "[&_.cm-editor]:min-h-[var(--formie-code-editor-min-height)]", isInvalid && "border-rose-600 focus-within:border-rose-600 focus-within:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]", (disabled || readOnly) && "opacity-70", className),
-		style: { "--formie-code-editor-min-height": minHeight },
-		"data-slot": "code-editor",
-		children: /* @__PURE__ */ jsx(CodeMirror, {
-			value: value ?? "",
-			onChange,
-			extensions,
-			editable: !disabled && !readOnly,
-			readOnly: disabled || readOnly,
-			basicSetup: {
-				lineNumbers,
-				foldGutter: false,
-				dropCursor: false,
-				allowMultipleSelections: false,
-				indentOnInput: true,
-				bracketMatching: language === "html",
-				closeBrackets: language === "html",
-				autocompletion: false,
-				highlightSelectionMatches: false,
-				searchKeymap: false,
-				tabSize
-			},
-			...props
+/** React facade over `<pk-code-editor>`. Behavior and styles live in the web component. */
+var CodeEditor = forwardRef(function CodeEditor({ disabled, readonly, readOnly, invalid, isInvalid, ...rest }, ref) {
+	const resolvedInvalid = Boolean(invalid ?? isInvalid);
+	const resolvedReadonly = Boolean(readonly ?? readOnly);
+	return /* @__PURE__ */ jsx(PkCodeEditorElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"readonly",
+			"invalid"
+		], {
+			disabled,
+			readonly: resolvedReadonly,
+			invalid: resolvedInvalid
 		})
 	});
-};
+});
+CodeEditor.displayName = "CodeEditor";
 //#endregion
-export { CodeEditor };
+export { CodeEditor, PkCodeEditorElement };
 
 //# sourceMappingURL=CodeEditor.js.map

package/dist/components/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.js","names":[],"sources":["../../src/components/CodeEditor.tsx"],"sourcesContent":["import { html } from '@codemirror/lang-html';\nimport { EditorState } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport CodeMirror, { type ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { useMemo } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\ntype CodeEditorLanguage = 'html' | 'text';\n\ntype CodeEditorProps = Omit<ReactCodeMirrorProps, 'value' | 'onChange'> & {\n    value: string;\n    onChange: (value: string) => void;\n    language?: CodeEditorLanguage;\n    tabSize?: number;\n    lineNumbers?: boolean;\n    isInvalid?: boolean;\n};\n\nconst LINE_HEIGHT_PX = 18;\n\nconst editorTheme = EditorView.theme({\n    '&': {\n        backgroundColor: 'rgb(251, 252, 254)',\n        color: 'rgb(31, 41, 51)',\n        fontSize: '12px',\n    },\n    '&.cm-focused': {\n        outline: 'none',\n    },\n    '.cm-scroller': {\n        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',\n        lineHeight: `${LINE_HEIGHT_PX}px`,\n    },\n    '.cm-content': {\n        padding: '6px 8px',\n        caretColor: 'rgb(31, 41, 51)',\n    },\n    '.cm-gutters': {\n        backgroundColor: 'rgb(245, 247, 250)',\n        borderRight: '1px solid rgba(96, 125, 159, 0.2)',\n        color: '#7c8793',\n    },\n    '.cm-gutter.cm-lineNumbers .cm-gutterElement': {\n        padding: '0 8px',\n        minWidth: '3rem',\n    },\n    '.cm-activeLine': {\n        backgroundColor: 'rgba(96, 125, 159, 0.06)',\n    },\n    '.cm-selectionBackground, &.cm-focused .cm-selectionBackground, ::selection': {\n        backgroundColor: 'rgba(59, 130, 246, 0.35) !important',\n    },\n});\n\nexport const CodeEditor = ({\n    value,\n    onChange,\n    language = 'html',\n    tabSize = 4,\n    lineNumbers = true,\n    rows = 12,\n    disabled = false,\n    readOnly = false,\n    isInvalid = false,\n    className,\n    ...props\n}: CodeEditorProps) => {\n    const extensions = useMemo(() => {\n        const next = [\n            editorTheme,\n            EditorState.tabSize.of(Math.max(1, tabSize)),\n            EditorView.lineWrapping,\n        ];\n\n        if (language === 'html') {\n            next.push(html());\n        }\n\n        return next;\n    }, [language, tabSize]);\n\n    const minHeight = `${Math.max(Number(rows) || 12, 4) * LINE_HEIGHT_PX + 12}px`;\n\n    return (\n        <div\n            className={cn(\n                'overflow-hidden rounded-sm border border-[rgba(96,125,159,0.4)] bg-[rgb(251,252,254)]',\n                'focus-within:border-sky-600 focus-within:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                '[&_.cm-editor]:min-h-[var(--formie-code-editor-min-height)]',\n                isInvalid && 'border-rose-600 focus-within:border-rose-600 focus-within:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]',\n                (disabled || readOnly) && 'opacity-70',\n                className,\n            )}\n            style={{ '--formie-code-editor-min-height': minHeight }}\n            data-slot=\"code-editor\"\n        >\n            <CodeMirror\n                value={value ?? ''}\n                onChange={onChange}\n                extensions={extensions}\n                editable={!disabled && !readOnly}\n                readOnly={disabled || readOnly}\n                basicSetup={{\n                    lineNumbers,\n                    foldGutter: false,\n                    dropCursor: false,\n                    allowMultipleSelections: false,\n                    indentOnInput: true,\n                    bracketMatching: language === 'html',\n                    closeBrackets: language === 'html',\n                    autocompletion: false,\n                    highlightSelectionMatches: false,\n                    searchKeymap: false,\n                    tabSize,\n                }}\n                {...props}\n            />\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAiB;AAEvB,IAAM,cAAc,WAAW,MAAM;CACjC,KAAK;EACD,iBAAiB;EACjB,OAAO;EACP,UAAU;EACb;CACD,gBAAgB,EACZ,SAAS,QACZ;CACD,gBAAgB;EACZ,YAAY;EACZ,YAAY,GAAG,eAAe;EACjC;CACD,eAAe;EACX,SAAS;EACT,YAAY;EACf;CACD,eAAe;EACX,iBAAiB;EACjB,aAAa;EACb,OAAO;EACV;CACD,+CAA+C;EAC3C,SAAS;EACT,UAAU;EACb;CACD,kBAAkB,EACd,iBAAiB,4BACpB;CACD,8EAA8E,EAC1E,iBAAiB,uCACpB;CACJ,CAAC;AAEF,IAAa,cAAc,EACvB,OACA,UACA,WAAW,QACX,UAAU,GACV,cAAc,MACd,OAAO,IACP,WAAW,OACX,WAAW,OACX,YAAY,OACZ,WACA,GAAG,YACgB;CACnB,MAAM,aAAa,cAAc;EAC7B,MAAM,OAAO;GACT;GACA,YAAY,QAAQ,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;GAC5C,WAAW;GACd;AAED,MAAI,aAAa,OACb,MAAK,KAAK,MAAM,CAAC;AAGrB,SAAO;IACR,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,YAAY,GAAG,KAAK,IAAI,OAAO,KAAK,IAAI,IAAI,EAAE,GAAG,iBAAiB,GAAG;AAE3E,QACI,oBAAC,OAAD;EACI,WAAW,GACP,yFACA,uIACA,+DACA,aAAa,2JACZ,YAAY,aAAa,cAC1B,UACH;EACD,OAAO,EAAE,mCAAmC,WAAW;EACvD,aAAU;YAEV,oBAAC,YAAD;GACI,OAAO,SAAS;GACN;GACE;GACZ,UAAU,CAAC,YAAY,CAAC;GACxB,UAAU,YAAY;GACtB,YAAY;IACR;IACA,YAAY;IACZ,YAAY;IACZ,yBAAyB;IACzB,eAAe;IACf,iBAAiB,aAAa;IAC9B,eAAe,aAAa;IAC5B,gBAAgB;IAChB,2BAA2B;IAC3B,cAAc;IACd;IACH;GACD,GAAI;GACN,CAAA;EACA,CAAA"}
+{"version":3,"file":"CodeEditor.js","names":[],"sources":["../../src/components/CodeEditor.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkCodeEditor } from '@verbb/plugin-kit-web/components/code-editor/pk-code-editor.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkCodeEditorElement = createPluginKitComponent({\n    tagName: 'pk-code-editor',\n    elementClass: PkCodeEditor,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        // React `onChange` is live; native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n        onBlur: 'blur',\n    },\n});\n\ntype PkCodeEditorElementProps = React.ComponentProps<typeof PkCodeEditorElement>;\n\nexport type CodeEditorProps = PkCodeEditorElementProps & {\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\n/** React facade over `<pk-code-editor>`. Behavior and styles live in the web component. */\nexport const CodeEditor = forwardRef<PkCodeEditor, CodeEditorProps>(function CodeEditor(\n    {\n        disabled,\n        readonly,\n        readOnly,\n        invalid,\n        isInvalid,\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\n    return (\n        <PkCodeEditorElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid'], {\n                disabled,\n                readonly: resolvedReadonly,\n                invalid: resolvedInvalid,\n            })}\n        />\n    );\n});\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport { PkCodeEditorElement };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EAEZ,SAAS;EACT,UAAU;EACV,QAAQ;EACX;CACJ,CAAC;;AAYF,IAAa,aAAa,WAA0C,SAAS,WACzE,EACI,UACA,UACA,UACA,SACA,WACA,GAAG,QAEP,KACF;CAEE,MAAM,kBAAkB,QAAQ,WAAW,UAAU;CACrD,MAAM,mBAAmB,QAAQ,YAAY,SAAS;AAEtD,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAU,EAAE;GACtD;GACA,UAAU;GACV,SAAS;GACZ,CAAC;EACJ,CAAA;EAER;AAEF,WAAW,cAAc"}

package/dist/components/ColorInput.d.ts

@@ -1,14 +1,27 @@
-type ColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
-export declare function ColorInput({ value, onValueChange, onBlur, className, size, fitCell, disabled, isInvalid, ...props }: {
-    value?: string;
-    onValueChange?: (value: string) => void;
-    onBlur?: () => void;
-    className?: string;
-    size?: ColorInputSize;
-    fitCell?: boolean;
-    disabled?: boolean;
+import { default as React } from 'react';
+import { PkColorInput, PkColorInputSize } from '@verbb/plugin-kit-web/components/color-input/pk-color-input.js';
+declare const PkColorInputElement: import('@lit/react').ReactWebComponent<PkColorInput, {
+    onPkChange: string;
+    onInput: string;
+    onNativeChange: string;
+    onBlur: string;
+}>;
+type PkColorInputElementProps = React.ComponentProps<typeof PkColorInputElement>;
+export type ColorInputProps = Omit<PkColorInputElementProps, 'onChange'> & {
+    /** React alias for the CE `invalid` boolean attribute. */
     isInvalid?: boolean;
-    [x: string]: unknown;
-}): import("react/jsx-runtime").JSX.Element;
-export {};
+    /** React/Formie alias for the Lit `readonly` property. */
+    readOnly?: boolean;
+    /**
+     * Controlled value callback — sugar over `onPkChange` detail.
+     * Also accepts legacy docs name `onValueChange`.
+     */
+    onChange?: (value: string) => void;
+    /** @deprecated Prefer `onChange` — kept for docs examples that still use this name. */
+    onValueChange?: (value: string) => void;
+};
+/** React facade over `<pk-color-input>`. Behavior and styles live in the web component. */
+export declare const ColorInput: React.ForwardRefExoticComponent<Omit<ColorInputProps, "ref"> & React.RefAttributes<PkColorInput>>;
+export { PkColorInputElement };
+export type { PkColorInputSize };
 //# sourceMappingURL=ColorInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../src/components/ColorInput.tsx"],"names":[],"mappings":"AAKA,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAoE5D,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAsHA"}
+{"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"}