@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/SelectInput.js

@@ -1,87 +1,73 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./Select.js";
 import { Status } from "./Status.js";
-import "./index.js";
-import { forwardRef } from "react";
+import { Option, OptionGroup, Select } from "./Select.js";
+import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SelectInput.tsx
-var SelectInput = forwardRef(({ options, placeholder, size, onChange, value, triggerClassName, contentClassName, alignItemWithTrigger = false, isInvalid, id, modal = true, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...selectProps }, ref) => {
-	const handleValueChange = (nextValue) => {
-		if (onChange) onChange(nextValue);
+var isGroup = (option) => {
+	return typeof option === "object" && option !== null && "group" in option;
+};
+var toStringValue = (value) => {
+	return value === void 0 || value === null ? "" : String(value);
+};
+/**
+* Convenience facade over `<pk-select>` matching the `plugin-kit-react` `SelectInput`
+* ergonomics: an `options[]` array plus controlled `value`/`onChange`, instead of the
+* slotted `<pk-option>` children the raw `Select` facade exposes.
+*
+* `pk-select` is string-valued, so option values are stringified for the element and
+* mapped back to their original value on change.
+*/
+var SelectInput = forwardRef(function SelectInput({ options, value, onChange, placeholder, disabled, isInvalid, clearable, size, width, name, id, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-labelledby": ariaLabelledBy }, ref) {
+	const flatOptions = useMemo(() => {
+		return options.flatMap((option) => {
+			return isGroup(option) ? option.options : [option];
+		});
+	}, [options]);
+	const handleChange = (event) => {
+		if (!onChange) return;
+		const detail = event.detail;
+		const raw = Array.isArray(detail?.value) ? detail?.value[0] : detail?.value;
+		const match = flatOptions.find((option) => {
+			return toStringValue(option.value) === toStringValue(raw);
+		});
+		onChange(match ? match.value : raw ?? "");
 	};
-	const hasGroup = (option) => {
-		return typeof option === "object" && option !== null && "group" in option;
+	const renderOption = (option) => {
+		return /* @__PURE__ */ jsxs(Option, {
+			value: toStringValue(option.value),
+			disabled: option.disabled,
+			children: [option.status ? /* @__PURE__ */ jsx(Status, {
+				slot: "start",
+				status: option.status
+			}) : null, option.label]
+		}, toStringValue(option.value));
 	};
-	const groupedOptions = options.map((option, index) => {
-		if (hasGroup(option)) return option;
-		return {
-			group: null,
-			options: [option],
-			_key: `ungrouped-${index}`
-		};
-	});
-	const flatOptions = options.flatMap((option) => {
-		if (hasGroup(option)) return option.options;
-		return [option];
-	});
-	const selectedOption = flatOptions.find((option) => {
-		return String(option.value) === String(value);
-	});
-	const resolvedPlaceholder = placeholder || "";
-	const resolvedIsInvalid = Boolean(isInvalid || ariaInvalid === true || ariaInvalid === "true");
-	return /* @__PURE__ */ jsxs(Select, {
-		value,
-		onValueChange: handleValueChange,
+	return /* @__PURE__ */ jsx(Select, {
+		ref,
+		value: toStringValue(value),
+		placeholder,
+		disabled,
+		invalid: isInvalid,
+		clearable,
 		size,
-		items: flatOptions,
-		modal,
-		...selectProps,
-		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
-			ref,
-			id,
-			"aria-invalid": resolvedIsInvalid,
-			"aria-describedby": ariaDescribedBy,
-			"aria-errormessage": ariaErrorMessage,
-			"aria-label": ariaLabel,
-			"aria-labelledby": ariaLabelledBy,
-			className: cn(selectedOption?.status && "relative [&_[data-slot=select-value]]:pl-5", "[&_[data-slot=select-value]]:overflow-hidden [&_[data-slot=select-value]>span]:block [&_[data-slot=select-value]>span]:min-w-0 [&_[data-slot=select-value]>span]:max-w-full [&_[data-slot=select-value]>span]:truncate", triggerClassName),
-			children: [selectedOption?.status && /* @__PURE__ */ jsx(Status, {
-				status: selectedOption.status,
-				className: "absolute left-2.5 top-1/2 -translate-y-1/2"
-			}), /* @__PURE__ */ jsx(SelectValue, {
-				placeholder,
-				children: selectedOption ? /* @__PURE__ */ jsx("span", {
-					className: "block min-w-0 max-w-full truncate",
-					title: selectedOption.label,
-					children: selectedOption.label
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "block min-w-0 max-w-full truncate text-slate-500",
-					title: resolvedPlaceholder,
-					children: resolvedPlaceholder
-				})
-			})]
-		}), options?.length > 0 && /* @__PURE__ */ jsx(SelectContent, {
-			className: contentClassName,
-			alignItemWithTrigger,
-			children: groupedOptions.map((group) => {
-				return /* @__PURE__ */ jsxs(SelectGroup, { children: [group.group && /* @__PURE__ */ jsx(SelectLabel, { children: group.group }), group.options?.map((option) => {
-					return /* @__PURE__ */ jsxs(SelectItem, {
-						value: option.value,
-						disabled: option.disabled,
-						children: [option.status && /* @__PURE__ */ jsx(Status, { status: option.status }), /* @__PURE__ */ jsx("span", {
-							className: "block min-w-0 flex-1 truncate",
-							title: option.label,
-							children: option.label
-						})]
-					}, String(option.value));
-				})] }, group.group ?? group._key);
-			})
-		})]
+		width,
+		name,
+		id,
+		onPkChange: handleChange,
+		onFocusOut: onBlur,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		"aria-errormessage": ariaErrorMessage,
+		"aria-labelledby": ariaLabelledBy,
+		children: options.map((option) => {
+			return isGroup(option) ? /* @__PURE__ */ jsx(OptionGroup, {
+				label: option.group,
+				children: option.options.map(renderOption)
+			}, option.group) : renderOption(option);
+		})
 	});
 });
-var SelectInput_default = Select;
 //#endregion
-export { SelectInput, SelectInput_default as default };
+export { SelectInput };
 
 //# sourceMappingURL=SelectInput.js.map

package/dist/components/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","names":[],"sources":["../../src/components/SelectInput.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n    SelectLabel,\n} from '@verbb/plugin-kit-react/components';\n\nimport type React from 'react';\nimport { ComponentProps, forwardRef } from 'react';\nimport { Status } from '@verbb/plugin-kit-react/components/Status';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\n\nexport interface Option<T = unknown> {\n    value: T;\n    label: string;\n    disabled?: boolean;\n    status?: string;\n}\n\ntype OptionGroup<T = unknown> = {\n    group: string;\n    options: Option<T>[];\n};\n\n// const valueToString = (val: Option['value']) => {\n//     if (val === null) { return '__null__'; }\n//     if (val === undefined) {\n//         console.error('option value cannot be undefined');\n//         return '__undefined__';\n//     }\n//     if (val === Infinity) { return '__Infinity__'; }\n//     if (val === -Infinity) { return '__-Infinity__'; }\n//     if (Number.isNaN(val)) { return '__NaN__'; }\n//     if (typeof val === 'symbol') { return `__symbol__${val.description}`; }\n//     // console.log(JSON.stringify(val));\n//     return JSON.stringify(val);\n// };\n\n// const stringToValue = (str: string) => {\n//     switch (str) {\n//         case '__null__':\n//             return null;\n//         case '__undefined__':\n//             return undefined;\n//         case '__Infinity__':\n//             return Infinity;\n//         case '__-Infinity__':\n//             return -Infinity;\n//         case '__NaN__':\n//             return NaN;\n//         default:\n//             if (str.startsWith('__symbol__')) {\n//                 return Symbol(str.slice(10));\n//             }\n//             return JSON.parse(str);\n//     }\n// };\n\ntype SelectBaseProps = ComponentProps<typeof Select>;\n\ninterface SelectProps<T = unknown>\n    extends Omit<SelectBaseProps, 'children' | 'value' | 'defaultValue' | 'onValueChange'> {\n    options: Array<Option<T> | OptionGroup<T>>;\n    placeholder?: string;\n    onChange?: (value: T) => void;\n    value?: T;\n    isInvalid?: boolean;\n    onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n    triggerClassName?: string;\n    contentClassName?: string;\n    alignItemWithTrigger?: boolean;\n    id?: string;\n    'aria-invalid'?: boolean | 'true' | 'false';\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nexport const SelectInput = forwardRef<HTMLButtonElement, SelectProps>(({\n    options,\n    placeholder,\n    size,\n    onChange,\n    value,\n    triggerClassName,\n    contentClassName,\n    alignItemWithTrigger = false,\n    isInvalid,\n    id,\n    modal = true,\n    'aria-invalid': ariaInvalid,\n    'aria-describedby': ariaDescribedBy,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...selectProps\n}, ref) => {\n    const handleValueChange = (nextValue: SelectProps['value']) => {\n        if (onChange) {\n            onChange(nextValue);\n        }\n    };\n\n    // const hasEmptyOption = options?.find((option) => { return option.value === ''; });\n\n    // let defaultValue = undefined;\n\n    // // Only show placeholder when value is initially undefined,\n    // // or when the value is an empty string and there's an empty option\n    // if (value === undefined || value === '') {\n    //     if (hasEmptyOption) {\n    //         defaultValue = valueToString('');\n    //     } else {\n    //         defaultValue = undefined;\n    //     }\n    // } else {\n    //     defaultValue = valueToString(value);\n    // }\n\n    const hasGroup = (option: Option<unknown> | OptionGroup<unknown>): option is OptionGroup<unknown> => {\n        return typeof option === 'object' && option !== null && 'group' in option;\n    };\n\n    const groupedOptions = options.map((option, index) => {\n        if (hasGroup(option)) {\n            return option;\n        }\n\n        return {\n            group: null,\n            options: [option],\n            _key: `ungrouped-${index}`,\n        };\n    });\n\n    const flatOptions = options.flatMap((option) => {\n        if (hasGroup(option)) {\n            return option.options;\n        }\n\n        return [option];\n    });\n\n    const selectedOption = flatOptions.find((option) => {\n        return String(option.value) === String(value);\n    });\n    const resolvedPlaceholder = placeholder || '';\n    const resolvedIsInvalid = Boolean(isInvalid || ariaInvalid === true || ariaInvalid === 'true');\n\n    return (\n        <Select\n            value={value}\n            onValueChange={handleValueChange}\n            size={size}\n            items={flatOptions as ComponentProps<typeof Select>['items']}\n            modal={modal}\n            {...selectProps}\n        >\n            <SelectTrigger\n                ref={ref}\n                id={id}\n                aria-invalid={resolvedIsInvalid}\n                aria-describedby={ariaDescribedBy}\n                aria-errormessage={ariaErrorMessage}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                className={cn(\n                    selectedOption?.status && 'relative [&_[data-slot=select-value]]:pl-5',\n                    '[&_[data-slot=select-value]]:overflow-hidden [&_[data-slot=select-value]>span]:block [&_[data-slot=select-value]>span]:min-w-0 [&_[data-slot=select-value]>span]:max-w-full [&_[data-slot=select-value]>span]:truncate',\n                    triggerClassName,\n                )}\n            >\n                {selectedOption?.status && (\n                    <Status\n                        status={selectedOption.status}\n                        className=\"absolute left-2.5 top-1/2 -translate-y-1/2\"\n                    />\n                )}\n                <SelectValue placeholder={placeholder}>\n                    {selectedOption ? (\n                        <span className=\"block min-w-0 max-w-full truncate\" title={selectedOption.label}>\n                            {selectedOption.label}\n                        </span>\n                    ) : (\n                        <span className=\"block min-w-0 max-w-full truncate text-slate-500\" title={resolvedPlaceholder}>\n                            {resolvedPlaceholder}\n                        </span>\n                    )}\n                </SelectValue>\n            </SelectTrigger>\n\n            {options?.length > 0 && (\n                <SelectContent\n                    className={contentClassName}\n                    alignItemWithTrigger={alignItemWithTrigger}\n                >\n                    {groupedOptions.map((group) => {\n                        return (\n                            <SelectGroup key={group.group ?? group._key}>\n                                {group.group && <SelectLabel>{group.group}</SelectLabel>}\n\n                                {group.options?.map((option) => {\n                                    return (\n                                        <SelectItem\n                                            key={String(option.value)}\n                                            value={option.value}\n                                            disabled={option.disabled}\n                                        >\n                                            {option.status && (\n                                                <Status status={option.status} />\n                                            )}\n                                            <span className=\"block min-w-0 flex-1 truncate\" title={option.label}>\n                                                {option.label}\n                                            </span>\n                                        </SelectItem>\n                                    );\n                                })}\n                            </SelectGroup>\n                        );\n                    })}\n                </SelectContent>\n            )}\n        </Select>\n    );\n});\n\nexport default Select;\nexport type { SelectProps };\n"],"mappings":";;;;;;;;AAmFA,IAAa,cAAc,YAA4C,EACnE,SACA,aACA,MACA,UACA,OACA,kBACA,kBACA,uBAAuB,OACvB,WACA,IACA,QAAQ,MACR,gBAAgB,aAChB,oBAAoB,iBACpB,qBAAqB,kBACrB,cAAc,WACd,mBAAmB,gBACnB,GAAG,eACJ,QAAQ;CACP,MAAM,qBAAqB,cAAoC;AAC3D,MAAI,SACA,UAAS,UAAU;;CAoB3B,MAAM,YAAY,WAAmF;AACjG,SAAO,OAAO,WAAW,YAAY,WAAW,QAAQ,WAAW;;CAGvE,MAAM,iBAAiB,QAAQ,KAAK,QAAQ,UAAU;AAClD,MAAI,SAAS,OAAO,CAChB,QAAO;AAGX,SAAO;GACH,OAAO;GACP,SAAS,CAAC,OAAO;GACjB,MAAM,aAAa;GACtB;GACH;CAEF,MAAM,cAAc,QAAQ,SAAS,WAAW;AAC5C,MAAI,SAAS,OAAO,CAChB,QAAO,OAAO;AAGlB,SAAO,CAAC,OAAO;GACjB;CAEF,MAAM,iBAAiB,YAAY,MAAM,WAAW;AAChD,SAAO,OAAO,OAAO,MAAM,KAAK,OAAO,MAAM;GAC/C;CACF,MAAM,sBAAsB,eAAe;CAC3C,MAAM,oBAAoB,QAAQ,aAAa,gBAAgB,QAAQ,gBAAgB,OAAO;AAE9F,QACI,qBAAC,QAAD;EACW;EACP,eAAe;EACT;EACN,OAAO;EACA;EACP,GAAI;YANR,CAQI,qBAAC,eAAD;GACS;GACD;GACJ,gBAAc;GACd,oBAAkB;GAClB,qBAAmB;GACnB,cAAY;GACZ,mBAAiB;GACjB,WAAW,GACP,gBAAgB,UAAU,8CAC1B,0NACA,iBACH;aAZL,CAcK,gBAAgB,UACb,oBAAC,QAAD;IACI,QAAQ,eAAe;IACvB,WAAU;IACZ,CAAA,EAEN,oBAAC,aAAD;IAA0B;cACrB,iBACG,oBAAC,QAAD;KAAM,WAAU;KAAoC,OAAO,eAAe;eACrE,eAAe;KACb,CAAA,GAEP,oBAAC,QAAD;KAAM,WAAU;KAAmD,OAAO;eACrE;KACE,CAAA;IAED,CAAA,CACF;MAEf,SAAS,SAAS,KACf,oBAAC,eAAD;GACI,WAAW;GACW;aAErB,eAAe,KAAK,UAAU;AAC3B,WACI,qBAAC,aAAD,EAAA,UAAA,CACK,MAAM,SAAS,oBAAC,aAAD,EAAA,UAAc,MAAM,OAAoB,CAAA,EAEvD,MAAM,SAAS,KAAK,WAAW;AAC5B,YACI,qBAAC,YAAD;MAEI,OAAO,OAAO;MACd,UAAU,OAAO;gBAHrB,CAKK,OAAO,UACJ,oBAAC,QAAD,EAAQ,QAAQ,OAAO,QAAU,CAAA,EAErC,oBAAC,QAAD;OAAM,WAAU;OAAgC,OAAO,OAAO;iBACzD,OAAO;OACL,CAAA,CACE;QAVJ,OAAO,OAAO,MAAM,CAUhB;MAEnB,CACQ,EAAA,EAnBI,MAAM,SAAS,MAAM,KAmBzB;KAEpB;GACU,CAAA,CAEf;;EAEf;AAEF,IAAA,sBAAe"}
+{"version":3,"file":"SelectInput.js","names":[],"sources":["../../src/components/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport type { PkSelect, PkSelectSize } from '@verbb/plugin-kit-web/components/select/pk-select.js';\nimport type { PkStatusVariant } from '@verbb/plugin-kit-web/components/status/pk-status.js';\n\nimport { Option, OptionGroup, Select } from './Select.js';\nimport { Status } from './Status.js';\n\nexport interface SelectInputOption {\n    value: unknown;\n    label: string;\n    disabled?: boolean;\n    status?: string;\n}\n\nexport interface SelectInputOptionGroup {\n    group: string;\n    options: SelectInputOption[];\n}\n\nexport interface SelectInputProps {\n    options: Array<SelectInputOption | SelectInputOptionGroup>;\n    value?: unknown;\n    onChange?: (value: unknown) => void;\n    placeholder?: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n    clearable?: boolean;\n    size?: PkSelectSize;\n    /** When `full`, stretch the select host to the available width (table cells). */\n    width?: 'full';\n    name?: string;\n    id?: string;\n    onBlur?: (event: Event) => void;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst isGroup = (option: SelectInputOption | SelectInputOptionGroup): option is SelectInputOptionGroup => {\n    return typeof option === 'object' && option !== null && 'group' in option;\n};\n\nconst toStringValue = (value: unknown): string => {\n    return value === undefined || value === null ? '' : String(value);\n};\n\n/**\n * Convenience facade over `<pk-select>` matching the `plugin-kit-react` `SelectInput`\n * ergonomics: an `options[]` array plus controlled `value`/`onChange`, instead of the\n * slotted `<pk-option>` children the raw `Select` facade exposes.\n *\n * `pk-select` is string-valued, so option values are stringified for the element and\n * mapped back to their original value on change.\n */\nexport const SelectInput = forwardRef<PkSelect, SelectInputProps>(function SelectInput(\n    {\n        options,\n        value,\n        onChange,\n        placeholder,\n        disabled,\n        isInvalid,\n        clearable,\n        size,\n        width,\n        name,\n        id,\n        onBlur,\n        'aria-label': ariaLabel,\n        'aria-describedby': ariaDescribedBy,\n        'aria-errormessage': ariaErrorMessage,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const flatOptions = useMemo(() => {\n        return options.flatMap((option) => { return isGroup(option) ? option.options : [option]; });\n    }, [options]);\n\n    const handleChange = (event: Event): void => {\n        if (!onChange) {\n            return;\n        }\n\n        const detail = (event as CustomEvent<{ value: string | string[] }>).detail;\n        const raw = Array.isArray(detail?.value) ? detail?.value[0] : detail?.value;\n        const match = flatOptions.find((option) => { return toStringValue(option.value) === toStringValue(raw); });\n\n        onChange(match ? match.value : raw ?? '');\n    };\n\n    const renderOption = (option: SelectInputOption) => {\n        return (\n            <Option key={toStringValue(option.value)} value={toStringValue(option.value)} disabled={option.disabled}>\n                {option.status ? <Status slot=\"start\" status={option.status as PkStatusVariant} /> : null}\n                {option.label}\n            </Option>\n        );\n    };\n\n    return (\n        <Select\n            ref={ref}\n            value={toStringValue(value)}\n            placeholder={placeholder}\n            disabled={disabled}\n            invalid={isInvalid}\n            clearable={clearable}\n            size={size}\n            width={width}\n            name={name}\n            id={id}\n            onPkChange={handleChange}\n            onFocusOut={onBlur}\n            aria-label={ariaLabel}\n            aria-describedby={ariaDescribedBy}\n            aria-errormessage={ariaErrorMessage}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {options.map((option) => {\n                return isGroup(option) ? (\n                    <OptionGroup key={option.group} label={option.group}>\n                        {option.options.map(renderOption)}\n                    </OptionGroup>\n                ) : (\n                    renderOption(option)\n                );\n            })}\n        </Select>\n    );\n});\n"],"mappings":";;;;;AAuCA,IAAM,WAAW,WAAyF;AACtG,QAAO,OAAO,WAAW,YAAY,WAAW,QAAQ,WAAW;;AAGvE,IAAM,iBAAiB,UAA2B;AAC9C,QAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,MAAM;;;;;;;;;;AAWrE,IAAa,cAAc,WAAuC,SAAS,YACvE,EACI,SACA,OACA,UACA,aACA,UACA,WACA,WACA,MACA,OACA,MACA,IACA,QACA,cAAc,WACd,oBAAoB,iBACpB,qBAAqB,kBACrB,mBAAmB,kBAEvB,KACF;CACE,MAAM,cAAc,cAAc;AAC9B,SAAO,QAAQ,SAAS,WAAW;AAAE,UAAO,QAAQ,OAAO,GAAG,OAAO,UAAU,CAAC,OAAO;IAAI;IAC5F,CAAC,QAAQ,CAAC;CAEb,MAAM,gBAAgB,UAAuB;AACzC,MAAI,CAAC,SACD;EAGJ,MAAM,SAAU,MAAoD;EACpE,MAAM,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,QAAQ,MAAM,KAAK,QAAQ;EACtE,MAAM,QAAQ,YAAY,MAAM,WAAW;AAAE,UAAO,cAAc,OAAO,MAAM,KAAK,cAAc,IAAI;IAAI;AAE1G,WAAS,QAAQ,MAAM,QAAQ,OAAO,GAAG;;CAG7C,MAAM,gBAAgB,WAA8B;AAChD,SACI,qBAAC,QAAD;GAA0C,OAAO,cAAc,OAAO,MAAM;GAAE,UAAU,OAAO;aAA/F,CACK,OAAO,SAAS,oBAAC,QAAD;IAAQ,MAAK;IAAQ,QAAQ,OAAO;IAA6B,CAAA,GAAG,MACpF,OAAO,MACH;KAHI,cAAc,OAAO,MAAM,CAG/B;;AAIjB,QACI,oBAAC,QAAD;EACS;EACL,OAAO,cAAc,MAAM;EACd;EACH;EACV,SAAS;EACE;EACL;EACC;EACD;EACF;EACJ,YAAY;EACZ,YAAY;EACZ,cAAY;EACZ,oBAAkB;EAClB,qBAAmB;EACnB,mBAAiB;YAEhB,QAAQ,KAAK,WAAW;AACrB,UAAO,QAAQ,OAAO,GAClB,oBAAC,aAAD;IAAgC,OAAO,OAAO;cACzC,OAAO,QAAQ,IAAI,aAAa;IACvB,EAFI,OAAO,MAEX,GAEd,aAAa,OAAO;IAE1B;EACG,CAAA;EAEf"}

package/dist/components/Separator.d.ts

@@ -1,4 +1,8 @@
-import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
-declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react/jsx-runtime").JSX.Element;
-export { Separator };
+import { default as React } from 'react';
+import { PkSeparator, PkSeparatorOrientation } from '@verbb/plugin-kit-web/components/separator/pk-separator.js';
+/** React facade over `<pk-separator>`. Behavior and styles live in the web component. */
+export declare const PkSeparatorElement: import('@lit/react').ReactWebComponent<PkSeparator, {}>;
+export declare const Separator: import('@lit/react').ReactWebComponent<PkSeparator, {}>;
+export type SeparatorProps = React.ComponentProps<typeof PkSeparatorElement>;
+export type { PkSeparatorOrientation };
 //# sourceMappingURL=Separator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,iBAAS,SAAS,CAAC,EACf,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACX,EAAE,kBAAkB,CAAC,KAAK,2CAgB1B;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,KAAK,sBAAsB,EAAE,MAAM,4DAA4D,CAAC;AAEtH,yFAAyF;AACzF,eAAO,MAAM,kBAAkB,yDAI7B,CAAC;AAEH,eAAO,MAAM,SAAS,yDAAqB,CAAC;AAC5C,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAC7E,YAAY,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/Separator.js

@@ -1,17 +1,15 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Separator as Separator$1 } from "@base-ui/react/separator";
-import { jsx } from "react/jsx-runtime";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkSeparator } from "@verbb/plugin-kit-web/components/separator/pk-separator.js";
 //#region src/components/Separator.tsx
-function Separator({ className, orientation = "horizontal", ...props }) {
-	return /* @__PURE__ */ jsx(Separator$1, {
-		"data-slot": "separator",
-		orientation,
-		className: cn("shrink-0 bg-slate-200", "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:w-px data-[orientation=vertical]:h-full", className),
-		...props
-	});
-}
+/** React facade over `<pk-separator>`. Behavior and styles live in the web component. */
+var PkSeparatorElement = createPluginKitComponent({
+	tagName: "pk-separator",
+	elementClass: PkSeparator,
+	react: React
+});
+var Separator = PkSeparatorElement;
 //#endregion
-export { Separator };
+export { PkSeparatorElement, Separator };
 
 //# sourceMappingURL=Separator.js.map

package/dist/components/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../src/components/Separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Separator({\n    className,\n    orientation = 'horizontal',\n    ...props\n}: SeparatorPrimitive.Props) {\n    return (\n        <SeparatorPrimitive\n            data-slot=\"separator\"\n            orientation={orientation}\n            className={cn(\n                'shrink-0 bg-slate-200',\n\n                'data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',\n                'data-[orientation=vertical]:w-px data-[orientation=vertical]:h-full',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport { Separator };\n"],"mappings":";;;;;AAIA,SAAS,UAAU,EACf,WACA,cAAc,cACd,GAAG,SACsB;AACzB,QACI,oBAAC,aAAD;EACI,aAAU;EACG;EACb,WAAW,GACP,yBAEA,2EACA,uEAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../src/components/Separator.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkSeparator, type PkSeparatorOrientation } from '@verbb/plugin-kit-web/components/separator/pk-separator.js';\n\n/** React facade over `<pk-separator>`. Behavior and styles live in the web component. */\nexport const PkSeparatorElement = createPluginKitComponent({\n    tagName: 'pk-separator',\n    elementClass: PkSeparator,\n    react: React,\n});\n\nexport const Separator = PkSeparatorElement;\nexport type SeparatorProps = React.ComponentProps<typeof PkSeparatorElement>;\nexport type { PkSeparatorOrientation };\n"],"mappings":";;;;;AAKA,IAAa,qBAAqB,yBAAyB;CACvD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,YAAY"}

package/dist/components/Spinner.d.ts

@@ -1,9 +1,13 @@
-import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
-declare const spinnerVariants: (props?: ({
-    variant?: "default" | "primary" | "secondary" | "dashed" | "outline" | "transparent" | null | undefined;
-    size?: "xxs" | "xs" | "sm" | "lg" | "xl" | "md" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Spinner({ className, variant, size, ...props }: ComponentProps<'div'> & VariantProps<typeof spinnerVariants>): import("react/jsx-runtime").JSX.Element;
-export { Spinner };
+import { default as React } from 'react';
+import { PkSpinner, PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '@verbb/plugin-kit-web/components/spinner/pk-spinner.js';
+declare const PkSpinnerElement: import('@lit/react').ReactWebComponent<PkSpinner, {}>;
+export type SpinnerProps = React.ComponentProps<typeof PkSpinnerElement> & {
+    variant?: PkSpinnerVariant;
+    size?: PkSpinnerSize;
+    tone?: PkSpinnerTone;
+    centered?: boolean;
+};
+/** React facade over `<pk-spinner>`. Behavior and styles live in the web component. */
+export declare function Spinner({ variant, size, tone, centered, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export { PkSpinnerElement };
 //# sourceMappingURL=Spinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,QAAA,MAAM,eAAe;;;8EAwCnB,CAAC;AAEH,iBAAS,OAAO,CAAC,EACb,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,2CAW9D;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACH,SAAS,EACT,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACxB,MAAM,wDAAwD,CAAC;AAEhE,QAAA,MAAM,gBAAgB,uDAIpB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACvE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,uFAAuF;AACvF,wBAAgB,OAAO,CAAC,EACpB,OAAmB,EACnB,IAAW,EACX,IAAI,EACJ,QAAgB,EAChB,GAAG,KAAK,EACX,EAAE,YAAY,2CAUd;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/Spinner.js

@@ -1,43 +1,24 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { cva } from "class-variance-authority";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
+import { PkSpinner } from "@verbb/plugin-kit-web/components/spinner/pk-spinner.js";
 //#region src/components/Spinner.tsx
-var spinnerVariants = cva("", {
-	variants: {
-		variant: {
-			default: ["border-t-red-500 border-r-red-500"],
-			primary: ["border-t-white border-r-white"],
-			secondary: ["border-t-white border-r-white"],
-			dashed: ["border-t-gray-700 border-r-gray-700"],
-			outline: ["border-t-gray-700 border-r-gray-700"],
-			transparent: ["border-t-gray-700 border-r-gray-700"]
-		},
-		size: {
-			xxs: "size-3 border-1",
-			xs: "size-4 border-2",
-			sm: "size-6 border-2",
-			md: "size-8 border-2",
-			lg: "size-12 border-2",
-			xl: "size-16 border-2"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "sm"
-	}
+var PkSpinnerElement = createPluginKitComponent({
+	tagName: "pk-spinner",
+	elementClass: PkSpinner,
+	react: React
 });
-function Spinner({ className, variant, size, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("mx-auto border-2 border-b-transparent border-l-transparent rounded-full animate-spin", spinnerVariants({
-			variant,
-			size,
-			className
-		})),
+/** React facade over `<pk-spinner>`. Behavior and styles live in the web component. */
+function Spinner({ variant = "default", size = "sm", tone, centered = false, ...props }) {
+	return /* @__PURE__ */ jsx(PkSpinnerElement, {
+		variant,
+		size,
+		...tone ? { tone } : {},
+		...centered ? { centered: true } : {},
 		...props
 	});
 }
 //#endregion
-export { Spinner };
+export { PkSpinnerElement, Spinner };
 
 //# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":[],"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst spinnerVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'border-t-red-500 border-r-red-500',\n            ],\n\n            primary: [\n                'border-t-white border-r-white',\n            ],\n\n            secondary: [\n                'border-t-white border-r-white',\n            ],\n\n            dashed: [\n                'border-t-gray-700 border-r-gray-700',\n            ],\n\n            outline: [\n                'border-t-gray-700 border-r-gray-700',\n            ],\n\n            transparent: [\n                'border-t-gray-700 border-r-gray-700',\n            ],\n        },\n        size: {\n            xxs: 'size-3 border-1',\n            xs: 'size-4 border-2',\n            sm: 'size-6 border-2',\n            md: 'size-8 border-2',\n            lg: 'size-12 border-2',\n            xl: 'size-16 border-2',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'sm',\n    },\n});\n\nfunction Spinner({\n    className,\n    variant,\n    size,\n    ...props\n}: ComponentProps<'div'> & VariantProps<typeof spinnerVariants>) {\n    return <div\n        className={cn(\n            'mx-auto border-2 border-b-transparent border-l-transparent rounded-full animate-spin',\n\n            spinnerVariants({\n                variant, size, className,\n            }),\n        )}\n        {...props}\n    />;\n};\n\nexport { Spinner };\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,IAAI,IAAI;CAC5B,UAAU;EACN,SAAS;GACL,SAAS,CACL,oCACH;GAED,SAAS,CACL,gCACH;GAED,WAAW,CACP,gCACH;GAED,QAAQ,CACJ,sCACH;GAED,SAAS,CACL,sCACH;GAED,aAAa,CACT,sCACH;GACJ;EACD,MAAM;GACF,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACP;EACJ;CACD,iBAAiB;EACb,SAAS;EACT,MAAM;EACT;CACJ,CAAC;AAEF,SAAS,QAAQ,EACb,WACA,SACA,MACA,GAAG,SAC0D;AAC7D,QAAO,oBAAC,OAAD;EACH,WAAW,GACP,wFAEA,gBAAgB;GACZ;GAAS;GAAM;GAClB,CAAC,CACL;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport {\n    PkSpinner,\n    type PkSpinnerSize,\n    type PkSpinnerTone,\n    type PkSpinnerVariant,\n} from '@verbb/plugin-kit-web/components/spinner/pk-spinner.js';\n\nconst PkSpinnerElement = createPluginKitComponent({\n    tagName: 'pk-spinner',\n    elementClass: PkSpinner,\n    react: React,\n});\n\nexport type SpinnerProps = React.ComponentProps<typeof PkSpinnerElement> & {\n    variant?: PkSpinnerVariant;\n    size?: PkSpinnerSize;\n    tone?: PkSpinnerTone;\n    centered?: boolean;\n};\n\n/** React facade over `<pk-spinner>`. Behavior and styles live in the web component. */\nexport function Spinner({\n    variant = 'default',\n    size = 'sm',\n    tone,\n    centered = false,\n    ...props\n}: SpinnerProps) {\n    return (\n        <PkSpinnerElement\n            variant={variant}\n            size={size}\n            {...(tone ? { tone } : {})}\n            {...(centered ? { centered: true } : {})}\n            {...props}\n        />\n    );\n}\n\nexport { PkSpinnerElement };\n"],"mappings":";;;;;AASA,IAAM,mBAAmB,yBAAyB;CAC9C,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;;AAUF,SAAgB,QAAQ,EACpB,UAAU,WACV,OAAO,MACP,MACA,WAAW,OACX,GAAG,SACU;AACb,QACI,oBAAC,kBAAD;EACa;EACH;EACN,GAAK,OAAO,EAAE,MAAM,GAAG,EAAE;EACzB,GAAK,WAAW,EAAE,UAAU,MAAM,GAAG,EAAE;EACvC,GAAI;EACN,CAAA"}

package/dist/components/Status.d.ts

@@ -1,8 +1,8 @@
-type StatusProps = {
-    status?: string;
-    label?: string;
-    className?: string;
-};
-declare const Status: ({ status, label, className }: StatusProps) => import("react/jsx-runtime").JSX.Element;
-export { Status };
+import { default as React } from 'react';
+import { PkStatus, PkStatusVariant } from '@verbb/plugin-kit-web/components/status/pk-status.js';
+/** React facade over `<pk-status>`. Behavior and styles live in the web component. */
+export declare const PkStatusElement: import('@lit/react').ReactWebComponent<PkStatus, {}>;
+export declare const Status: import('@lit/react').ReactWebComponent<PkStatus, {}>;
+export type StatusProps = React.ComponentProps<typeof PkStatusElement>;
+export type { PkStatusVariant };
 //# sourceMappingURL=Status.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../src/components/Status.tsx"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAwCF,QAAA,MAAM,MAAM,GAAI,8BAAqC,WAAW,4CAiB/D,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../src/components/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAEtG,sFAAsF;AACtF,eAAO,MAAM,eAAe,sDAI1B,CAAC;AAEH,eAAO,MAAM,MAAM,sDAAkB,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/Status.js

@@ -1,55 +1,15 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { jsx } from "react/jsx-runtime";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkStatus } from "@verbb/plugin-kit-web/components/status/pk-status.js";
 //#region src/components/Status.tsx
-var STATUS_CLASSES = {
-	all: "bg-[linear-gradient(60deg,#184cef,#e5422b)]",
-	on: "bg-[var(--color-teal-550)]",
-	live: "bg-[var(--color-teal-550)]",
-	active: "bg-[var(--color-teal-550)]",
-	enabled: "bg-[var(--color-teal-550)]",
-	off: "bg-[var(--color-red-600)]",
-	suspended: "bg-[var(--color-red-600)]",
-	expired: "bg-[var(--color-red-600)]",
-	warning: "bg-[var(--color-amber-100)]",
-	pending: "bg-[var(--color-orange-400)]",
-	red: "bg-[var(--color-red-600)]",
-	orange: "bg-[var(--color-orange-400)]",
-	amber: "bg-[var(--color-amber-500)]",
-	yellow: "bg-[var(--color-yellow-500)]",
-	lime: "bg-[var(--color-lime-500)]",
-	green: "bg-[var(--color-green-600)]",
-	emerald: "bg-[var(--color-emerald-500)]",
-	teal: "bg-[var(--color-teal-550)]",
-	turquoise: "bg-[var(--color-teal-550)]",
-	cyan: "bg-[var(--color-cyan-500)]",
-	sky: "bg-[var(--color-sky-500)]",
-	blue: "bg-[var(--color-blue-600)]",
-	indigo: "bg-[var(--color-indigo-500)]",
-	violet: "bg-[var(--color-violet-500)]",
-	purple: "bg-[var(--color-purple-500)]",
-	fuchsia: "bg-[var(--color-fuchsia-500)]",
-	pink: "bg-[var(--color-pink-500)]",
-	rose: "bg-[var(--color-rose-500)]",
-	light: "bg-[var(--color-gray-100)]",
-	gray: "bg-[var(--color-gray-300)]",
-	grey: "bg-[var(--color-gray-300)]",
-	white: "bg-[var(--color-white)]",
-	black: "bg-[var(--color-gray-800)]",
-	disabled: "shadow-[inset_0_0_0_2px_var(--color-gray-500)]",
-	inactive: "shadow-[inset_0_0_0_2px_var(--color-gray-500)]"
-};
-var Status = ({ status = "on", label, className }) => {
-	const ariaLabel = label || status;
-	const statusClass = STATUS_CLASSES[status] || "bg-[var(--color-gray-300)]";
-	return /* @__PURE__ */ jsx("span", {
-		role: "status",
-		"aria-label": ariaLabel,
-		title: label || status,
-		className: cn("inline-block size-3 rounded-full", "shrink-0", statusClass, className)
-	});
-};
+/** React facade over `<pk-status>`. Behavior and styles live in the web component. */
+var PkStatusElement = createPluginKitComponent({
+	tagName: "pk-status",
+	elementClass: PkStatus,
+	react: React
+});
+var Status = PkStatusElement;
 //#endregion
-export { Status };
+export { PkStatusElement, Status };
 
 //# sourceMappingURL=Status.js.map

package/dist/components/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":[],"sources":["../../src/components/Status.tsx"],"sourcesContent":["import { cn } from '@verbb/plugin-kit-react/utils';\n\ntype StatusProps = {\n    status?: string;\n    label?: string;\n    className?: string;\n};\n\nconst STATUS_CLASSES: Record<string, string> = {\n    all: 'bg-[linear-gradient(60deg,#184cef,#e5422b)]',\n    on: 'bg-[var(--color-teal-550)]',\n    live: 'bg-[var(--color-teal-550)]',\n    active: 'bg-[var(--color-teal-550)]',\n    enabled: 'bg-[var(--color-teal-550)]',\n    off: 'bg-[var(--color-red-600)]',\n    suspended: 'bg-[var(--color-red-600)]',\n    expired: 'bg-[var(--color-red-600)]',\n    warning: 'bg-[var(--color-amber-100)]',\n    pending: 'bg-[var(--color-orange-400)]',\n    red: 'bg-[var(--color-red-600)]',\n    orange: 'bg-[var(--color-orange-400)]',\n    amber: 'bg-[var(--color-amber-500)]',\n    yellow: 'bg-[var(--color-yellow-500)]',\n    lime: 'bg-[var(--color-lime-500)]',\n    green: 'bg-[var(--color-green-600)]',\n    emerald: 'bg-[var(--color-emerald-500)]',\n    teal: 'bg-[var(--color-teal-550)]',\n    turquoise: 'bg-[var(--color-teal-550)]',\n    cyan: 'bg-[var(--color-cyan-500)]',\n    sky: 'bg-[var(--color-sky-500)]',\n    blue: 'bg-[var(--color-blue-600)]',\n    indigo: 'bg-[var(--color-indigo-500)]',\n    violet: 'bg-[var(--color-violet-500)]',\n    purple: 'bg-[var(--color-purple-500)]',\n    fuchsia: 'bg-[var(--color-fuchsia-500)]',\n    pink: 'bg-[var(--color-pink-500)]',\n    rose: 'bg-[var(--color-rose-500)]',\n    light: 'bg-[var(--color-gray-100)]',\n    gray: 'bg-[var(--color-gray-300)]',\n    grey: 'bg-[var(--color-gray-300)]',\n    white: 'bg-[var(--color-white)]',\n    black: 'bg-[var(--color-gray-800)]',\n    disabled: 'shadow-[inset_0_0_0_2px_var(--color-gray-500)]',\n    inactive: 'shadow-[inset_0_0_0_2px_var(--color-gray-500)]',\n};\n\nconst Status = ({ status = 'on', label, className }: StatusProps) => {\n    const ariaLabel = label || status;\n    const statusClass = STATUS_CLASSES[status] || 'bg-[var(--color-gray-300)]';\n\n    return (\n        <span\n            role=\"status\"\n            aria-label={ariaLabel}\n            title={label || status}\n            className={cn(\n                'inline-block size-3 rounded-full',\n                'shrink-0',\n                statusClass,\n                className,\n            )}\n        />\n    );\n};\n\nexport { Status };\n"],"mappings":";;;;AAQA,IAAM,iBAAyC;CAC3C,KAAK;CACL,IAAI;CACJ,MAAM;CACN,QAAQ;CACR,SAAS;CACT,KAAK;CACL,WAAW;CACX,SAAS;CACT,SAAS;CACT,SAAS;CACT,KAAK;CACL,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,MAAM;CACN,OAAO;CACP,SAAS;CACT,MAAM;CACN,WAAW;CACX,MAAM;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,UAAU;CACV,UAAU;CACb;AAED,IAAM,UAAU,EAAE,SAAS,MAAM,OAAO,gBAA6B;CACjE,MAAM,YAAY,SAAS;CAC3B,MAAM,cAAc,eAAe,WAAW;AAE9C,QACI,oBAAC,QAAD;EACI,MAAK;EACL,cAAY;EACZ,OAAO,SAAS;EAChB,WAAW,GACP,oCACA,YACA,aACA,UACH;EACH,CAAA"}
+{"version":3,"file":"Status.js","names":[],"sources":["../../src/components/Status.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkStatus, type PkStatusVariant } from '@verbb/plugin-kit-web/components/status/pk-status.js';\n\n/** React facade over `<pk-status>`. Behavior and styles live in the web component. */\nexport const PkStatusElement = createPluginKitComponent({\n    tagName: 'pk-status',\n    elementClass: PkStatus,\n    react: React,\n});\n\nexport const Status = PkStatusElement;\nexport type StatusProps = React.ComponentProps<typeof PkStatusElement>;\nexport type { PkStatusVariant };\n"],"mappings":";;;;;AAKA,IAAa,kBAAkB,yBAAyB;CACpD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,SAAS"}

package/dist/components/Tabs.d.ts

@@ -1,8 +1,32 @@
-import { ComponentProps } from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
-declare function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
-declare function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Tab>): import("react/jsx-runtime").JSX.Element;
-declare function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, };
+import { default as React } from 'react';
+import { PkTab } from '@verbb/plugin-kit-web/components/tabs/pk-tab.js';
+import { PkTabHeading } from '@verbb/plugin-kit-web/components/tabs/pk-tab-heading.js';
+import { PkTabPanel } from '@verbb/plugin-kit-web/components/tabs/pk-tab-panel.js';
+import { PkTabs, PkTabsActivation, PkTabsOrientation, PkTabsPlacement, PkTabsVariant } from '@verbb/plugin-kit-web/components/tabs/pk-tabs.js';
+/** React facades over the `<pk-tabs>` family. Behavior and styles live in the web components. */
+declare const PkTabsElement: import('@lit/react').ReactWebComponent<PkTabs, {
+    onPkChange: string;
+    onPkTabShow: string;
+    onPkTabHide: string;
+}>;
+export declare const PkTabElement: import('@lit/react').ReactWebComponent<PkTab, {
+    onPkTabSelect: string;
+    onPkTabKeydown: string;
+}>;
+export declare const PkTabHeadingElement: import('@lit/react').ReactWebComponent<PkTabHeading, {}>;
+export declare const PkTabPanelElement: import('@lit/react').ReactWebComponent<PkTabPanel, {}>;
+export type TabsProps = React.ComponentProps<typeof PkTabsElement>;
+export type TabProps = React.ComponentProps<typeof PkTabElement>;
+export type TabHeadingProps = React.ComponentProps<typeof PkTabHeadingElement>;
+export type TabPanelProps = React.ComponentProps<typeof PkTabPanelElement>;
+export type { PkTabsActivation, PkTabsOrientation, PkTabsPlacement, PkTabsVariant };
+/** React facade over `<pk-tabs>` — only forwards host-originated tab events. */
+export declare function Tabs({ onPkChange, onPkTabShow, onPkTabHide, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tab: import('@lit/react').ReactWebComponent<PkTab, {
+    onPkTabSelect: string;
+    onPkTabKeydown: string;
+}>;
+export declare const TabHeading: import('@lit/react').ReactWebComponent<PkTabHeading, {}>;
+export declare const TabPanel: import('@lit/react').ReactWebComponent<PkTabPanel, {}>;
+export { PkTabsElement };
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAI5D,iBAAS,IAAI,CAAC,EACV,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQ3C;AAED,iBAAS,QAAQ,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAkB3C;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,GAAG,CAAC,2CA+B1C;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,2CAiB5C;AAED,OAAO,EACH,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,GACd,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,iDAAiD,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,yDAAyD,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,uDAAuD,CAAC;AACnF,OAAO,EACH,MAAM,EACN,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,aAAa,EACrB,MAAM,kDAAkD,CAAC;AAI1D,iGAAiG;AACjG,QAAA,MAAM,aAAa;;;;EASjB,CAAC;AAEH,eAAO,MAAM,YAAY;;;EAQvB,CAAC;AAEH,eAAO,MAAM,mBAAmB,0DAI9B,CAAC;AAEH,eAAO,MAAM,iBAAiB,wDAI5B,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;AACnE,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC3E,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAEpF,gFAAgF;AAChF,wBAAgB,IAAI,CAAC,EACjB,UAAU,EACV,WAAW,EACX,WAAW,EACX,GAAG,KAAK,EACX,EAAE,SAAS,2CA8BX;AAED,eAAO,MAAM,GAAG;;;EAAe,CAAC;AAChC,eAAO,MAAM,UAAU,0DAAsB,CAAC;AAC9C,eAAO,MAAM,QAAQ,wDAAoB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,CAAC"}