@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/Tabs.js

@@ -1,37 +1,64 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { isHostEvent } from "../utils/isHostEvent.js";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
-import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+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 } from "@verbb/plugin-kit-web/components/tabs/pk-tabs.js";
 //#region src/components/Tabs.tsx
-function Tabs({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs$1.Root, {
-		"data-slot": "tabs",
-		className: cn("flex flex-col gap-3", className),
-		...props
-	});
-}
-function TabsList({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs$1.List, {
-		"data-slot": "tabs-list",
-		className: cn("inline-flex w-fit self-start items-center justify-center", "rounded-md p-0.5", "border border-gray-150 bg-gray-100/90 text-gray-500", "shadow-[0_1px_2px_rgba(31,41,51,0.06)]", className),
-		...props
-	});
-}
-function TabsTrigger({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
-		"data-slot": "tabs-trigger",
-		className: cn("inline-flex items-center justify-center whitespace-nowrap cursor-pointer outline-none", "min-h-8 rounded-sm px-3 py-1.5 text-[13px] font-medium", "transition-[background-color,color,box-shadow]", "text-gray-500", "hover:bg-white/70 hover:text-gray-700", "focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]", "disabled:pointer-events-none disabled:opacity-50", "data-[active]:bg-white data-[active]:text-gray-800", "data-[active]:shadow-[0_1px_2px_rgba(31,41,51,0.12)]", className),
-		...props
-	});
-}
-function TabsContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
-		"data-slot": "tabs-content",
-		className: cn("outline-none", "mt-2", "focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]", className),
-		...props
+/** React facades over the `<pk-tabs>` family. Behavior and styles live in the web components. */
+var PkTabsElement = createPluginKitComponent({
+	tagName: "pk-tabs",
+	elementClass: PkTabs,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onPkTabShow: "pk-tab-show",
+		onPkTabHide: "pk-tab-hide"
+	}
+});
+var PkTabElement = createPluginKitComponent({
+	tagName: "pk-tab",
+	elementClass: PkTab,
+	react: React,
+	events: {
+		onPkTabSelect: "pk-tab-select",
+		onPkTabKeydown: "pk-tab-keydown"
+	}
+});
+var PkTabHeadingElement = createPluginKitComponent({
+	tagName: "pk-tab-heading",
+	elementClass: PkTabHeading,
+	react: React
+});
+var PkTabPanelElement = createPluginKitComponent({
+	tagName: "pk-tab-panel",
+	elementClass: PkTabPanel,
+	react: React
+});
+/** React facade over `<pk-tabs>` — only forwards host-originated tab events. */
+function Tabs({ onPkChange, onPkTabShow, onPkTabHide, ...props }) {
+	return /* @__PURE__ */ jsx(PkTabsElement, {
+		...props,
+		...onPkChange ? { onPkChange: (event) => {
+			if (!isHostEvent(event)) return;
+			onPkChange(event);
+		} } : {},
+		...onPkTabShow ? { onPkTabShow: (event) => {
+			if (!isHostEvent(event)) return;
+			onPkTabShow(event);
+		} } : {},
+		...onPkTabHide ? { onPkTabHide: (event) => {
+			if (!isHostEvent(event)) return;
+			onPkTabHide(event);
+		} } : {}
 	});
 }
+var Tab = PkTabElement;
+var TabHeading = PkTabHeadingElement;
+var TabPanel = PkTabPanelElement;
 //#endregion
-export { Tabs, TabsContent, TabsList, TabsTrigger };
+export { PkTabElement, PkTabHeadingElement, PkTabPanelElement, PkTabsElement, Tab, TabHeading, TabPanel, Tabs };
 
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/components/Tabs.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Tabs({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Root>) {\n    return (\n        <TabsPrimitive.Root\n            data-slot=\"tabs\"\n            className={cn('flex flex-col gap-3', className)}\n            {...props}\n        />\n    );\n}\n\nfunction TabsList({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.List>) {\n    return (\n        <TabsPrimitive.List\n            data-slot=\"tabs-list\"\n            className={cn(\n                // Reset and layout\n                'inline-flex w-fit self-start items-center justify-center',\n                'rounded-md p-0.5',\n\n                // Themes\n                'border border-gray-150 bg-gray-100/90 text-gray-500',\n                'shadow-[0_1px_2px_rgba(31,41,51,0.06)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TabsTrigger({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Tab>) {\n    return (\n        <TabsPrimitive.Tab\n            data-slot=\"tabs-trigger\"\n            className={cn(\n                // Reset and layout\n                'inline-flex items-center justify-center whitespace-nowrap cursor-pointer outline-none',\n                'min-h-8 rounded-sm px-3 py-1.5 text-[13px] font-medium',\n\n                // Transitions\n                'transition-[background-color,color,box-shadow]',\n\n                // Default state\n                'text-gray-500',\n                'hover:bg-white/70 hover:text-gray-700',\n\n                // Accessibility\n                'focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]',\n\n                // Disabled state\n                'disabled:pointer-events-none disabled:opacity-50',\n\n                // Active state\n                'data-[active]:bg-white data-[active]:text-gray-800',\n                'data-[active]:shadow-[0_1px_2px_rgba(31,41,51,0.12)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TabsContent({\n    className,\n    ...props\n}: ComponentProps<typeof TabsPrimitive.Panel>) {\n    return (\n        <TabsPrimitive.Panel\n            data-slot=\"tabs-content\"\n            className={cn(\n                // Reset and layout\n                'outline-none',\n                'mt-2',\n\n                // Accessibility\n                'focus-visible:shadow-[inset_0_0_0_2px_var(--color-sky-600)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    Tabs,\n    TabsList,\n    TabsTrigger,\n    TabsContent,\n};\n"],"mappings":";;;;;AAKA,SAAS,KAAK,EACV,WACA,GAAG,SACuC;AAC1C,QACI,oBAAC,OAAc,MAAf;EACI,aAAU;EACV,WAAW,GAAG,uBAAuB,UAAU;EAC/C,GAAI;EACN,CAAA;;AAIV,SAAS,SAAS,EACd,WACA,GAAG,SACuC;AAC1C,QACI,oBAAC,OAAc,MAAf;EACI,aAAU;EACV,WAAW,GAEP,4DACA,oBAGA,uDACA,0CAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,YAAY,EACjB,WACA,GAAG,SACsC;AACzC,QACI,oBAAC,OAAc,KAAf;EACI,aAAU;EACV,WAAW,GAEP,yFACA,0DAGA,kDAGA,iBACA,yCAGA,+DAGA,oDAGA,sDACA,wDAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,YAAY,EACjB,WACA,GAAG,SACwC;AAC3C,QACI,oBAAC,OAAc,OAAf;EACI,aAAU;EACV,WAAW,GAEP,gBACA,QAGA,+DAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/components/Tabs.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkTab } from '@verbb/plugin-kit-web/components/tabs/pk-tab.js';\nimport { PkTabHeading } from '@verbb/plugin-kit-web/components/tabs/pk-tab-heading.js';\nimport { PkTabPanel } from '@verbb/plugin-kit-web/components/tabs/pk-tab-panel.js';\nimport {\n    PkTabs,\n    type PkTabsActivation,\n    type PkTabsOrientation,\n    type PkTabsPlacement,\n    type PkTabsVariant,\n} from '@verbb/plugin-kit-web/components/tabs/pk-tabs.js';\n\nimport { isHostEvent } from '../utils/isHostEvent.js';\n\n/** React facades over the `<pk-tabs>` family. Behavior and styles live in the web components. */\nconst PkTabsElement = createPluginKitComponent({\n    tagName: 'pk-tabs',\n    elementClass: PkTabs,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkTabShow: 'pk-tab-show',\n        onPkTabHide: 'pk-tab-hide',\n    },\n});\n\nexport const PkTabElement = createPluginKitComponent({\n    tagName: 'pk-tab',\n    elementClass: PkTab,\n    react: React,\n    events: {\n        onPkTabSelect: 'pk-tab-select',\n        onPkTabKeydown: 'pk-tab-keydown',\n    },\n});\n\nexport const PkTabHeadingElement = createPluginKitComponent({\n    tagName: 'pk-tab-heading',\n    elementClass: PkTabHeading,\n    react: React,\n});\n\nexport const PkTabPanelElement = createPluginKitComponent({\n    tagName: 'pk-tab-panel',\n    elementClass: PkTabPanel,\n    react: React,\n});\n\nexport type TabsProps = React.ComponentProps<typeof PkTabsElement>;\nexport type TabProps = React.ComponentProps<typeof PkTabElement>;\nexport type TabHeadingProps = React.ComponentProps<typeof PkTabHeadingElement>;\nexport type TabPanelProps = React.ComponentProps<typeof PkTabPanelElement>;\nexport type { PkTabsActivation, PkTabsOrientation, PkTabsPlacement, PkTabsVariant };\n\n/** React facade over `<pk-tabs>` — only forwards host-originated tab events. */\nexport function Tabs({\n    onPkChange,\n    onPkTabShow,\n    onPkTabHide,\n    ...props\n}: TabsProps) {\n    return (\n        <PkTabsElement\n            {...props}\n            {...(onPkChange ? {\n                onPkChange: (event: Event) => {\n                    if (!isHostEvent(event)) {\n                        return;\n                    }\n                    onPkChange(event as Parameters<NonNullable<TabsProps['onPkChange']>>[0]);\n                },\n            } : {})}\n            {...(onPkTabShow ? {\n                onPkTabShow: (event: Event) => {\n                    if (!isHostEvent(event)) {\n                        return;\n                    }\n                    onPkTabShow(event as Parameters<NonNullable<TabsProps['onPkTabShow']>>[0]);\n                },\n            } : {})}\n            {...(onPkTabHide ? {\n                onPkTabHide: (event: Event) => {\n                    if (!isHostEvent(event)) {\n                        return;\n                    }\n                    onPkTabHide(event as Parameters<NonNullable<TabsProps['onPkTabHide']>>[0]);\n                },\n            } : {})}\n        />\n    );\n}\n\nexport const Tab = PkTabElement;\nexport const TabHeading = PkTabHeadingElement;\nexport const TabPanel = PkTabPanelElement;\nexport { PkTabsElement };\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,gBAAgB,yBAAyB;CAC3C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,aAAa;EACb,aAAa;EAChB;CACJ,CAAC;AAEF,IAAa,eAAe,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,eAAe;EACf,gBAAgB;EACnB;CACJ,CAAC;AAEF,IAAa,sBAAsB,yBAAyB;CACxD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,oBAAoB,yBAAyB;CACtD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;;AASF,SAAgB,KAAK,EACjB,YACA,aACA,aACA,GAAG,SACO;AACV,QACI,oBAAC,eAAD;EACI,GAAI;EACJ,GAAK,aAAa,EACd,aAAa,UAAiB;AAC1B,OAAI,CAAC,YAAY,MAAM,CACnB;AAEJ,cAAW,MAA6D;KAE/E,GAAG,EAAE;EACN,GAAK,cAAc,EACf,cAAc,UAAiB;AAC3B,OAAI,CAAC,YAAY,MAAM,CACnB;AAEJ,eAAY,MAA8D;KAEjF,GAAG,EAAE;EACN,GAAK,cAAc,EACf,cAAc,UAAiB;AAC3B,OAAI,CAAC,YAAY,MAAM,CACnB;AAEJ,eAAY,MAA8D;KAEjF,GAAG,EAAE;EACR,CAAA;;AAIV,IAAa,MAAM;AACnB,IAAa,aAAa;AAC1B,IAAa,WAAW"}

package/dist/components/Textarea.d.ts

@@ -1,8 +1,19 @@
-import { ComponentProps } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const textareaVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Textarea({ className, size, ...props }: ComponentProps<'textarea'> & VariantProps<typeof textareaVariants>): import("react/jsx-runtime").JSX.Element;
-export { Textarea };
+import { default as React } from 'react';
+import { PkTextarea, PkTextareaSize } from '@verbb/plugin-kit-web/components/textarea/pk-textarea.js';
+declare const PkTextareaElement: import('@lit/react').ReactWebComponent<PkTextarea, {
+    onInput: string;
+    onChange: string;
+    onFocus: string;
+    onBlur: string;
+}>;
+type PkTextareaElementProps = React.ComponentProps<typeof PkTextareaElement>;
+/** React facade over `<pk-textarea>`. Behavior and styles live in the web component. */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkTextarea>, "defaultValue" | "onFocus" | "onBlur" | "onChange" | "onInput" | "form" | "input" | "label" | "value" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "instructions" | "required" | "name" | "size" | "placeholder" | "readonly" | "invalid" | "rows" | "assumeInteractionOn" | "validators" | "customError" | "valueHasChanged" | "hasInteracted" | "formResetCallback" | "formDisabledCallback" | "formStateRestoreCallback" | "labels" | "validity" | "willValidate" | "validationMessage" | "getForm" | "checkValidity" | "reportValidity" | "resetValidity" | "setCustomValidity" | "fitCell" | "withLabel" | "withInstructions" | "maxlength"> & {
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+    onFocus?: ((e: Event) => void) | undefined;
+    onBlur?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkTextarea, keyof HTMLElement>> & React.RefAttributes<PkTextarea>, "ref"> & React.RefAttributes<PkTextarea>>;
+export type TextareaProps = PkTextareaElementProps;
+export type { PkTextareaSize };
 //# sourceMappingURL=Textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,gBAAgB;;8EAapB,CAAC;AAEH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,2CA0BlH;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAI3G,QAAA,MAAM,iBAAiB;;;;;EAWrB,CAAC;AAEH,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE7E,wFAAwF;AACxF,eAAO,MAAM,QAAQ;;;;;6HAcnB,CAAC;AAIH,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Textarea.js

@@ -1,25 +1,40 @@
-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 { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { PkTextarea } from "@verbb/plugin-kit-web/components/textarea/pk-textarea.js";
 //#region src/components/Textarea.tsx
-var textareaVariants = cva("", {
-	variants: { size: {
-		xs: "px-1.5 py-1 text-[11px]",
-		sm: "px-2 py-1 text-[12px]",
-		default: "px-2 py-1.5 text-sm",
-		lg: "px-3 py-2 text-sm",
-		xl: "px-4 py-2.5 text-base"
-	} },
-	defaultVariants: { size: "default" }
+var PkTextareaElement = createPluginKitComponent({
+	tagName: "pk-textarea",
+	elementClass: PkTextarea,
+	react: React,
+	events: {
+		onInput: "input",
+		onChange: "input",
+		onFocus: "focus",
+		onBlur: "blur"
+	}
 });
-function Textarea({ className, size, ...props }) {
-	return /* @__PURE__ */ jsx("textarea", {
-		"data-slot": "textarea",
-		className: cn("flex outline-none bg-clip-padding resize-y", "min-h-[80px] w-full", "rounded-sm", "border border-[rgba(96,125,159,0.4)]", "bg-[rgb(251,252,254)]", textareaVariants({ size }), "placeholder:text-[#7c8793]", "focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "aria-invalid:border-rose-600 aria-invalid: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),
-		...props
+/** React facade over `<pk-textarea>`. Behavior and styles live in the web component. */
+var Textarea = forwardRef(function Textarea(props, ref) {
+	const { disabled, readonly, invalid, fitCell, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkTextareaElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"readonly",
+			"invalid",
+			"fitCell"
+		], {
+			disabled,
+			readonly,
+			invalid,
+			fitCell
+		})
 	});
-}
+});
+Textarea.displayName = "Textarea";
 //#endregion
 export { Textarea };
 

package/dist/components/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst textareaVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-1.5 py-1 text-[11px]',\n            sm: 'px-2 py-1 text-[12px]',\n            default: 'px-2 py-1.5 text-sm',\n            lg: 'px-3 py-2 text-sm',\n            xl: 'px-4 py-2.5 text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nfunction Textarea({ className, size, ...props }: ComponentProps<'textarea'> & VariantProps<typeof textareaVariants>) {\n    return (\n        <textarea\n            data-slot=\"textarea\"\n            className={cn(\n                // Reset\n                'flex outline-none bg-clip-padding resize-y',\n\n                'min-h-[80px] w-full',\n                'rounded-sm',\n                'border border-[rgba(96,125,159,0.4)]',\n                'bg-[rgb(251,252,254)]',\n\n                // Themes\n                textareaVariants({ size }),\n\n                // Hover & Focus\n                'placeholder:text-[#7c8793]',\n                'focus-visible:border-sky-600 focus-visible: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                'aria-invalid:border-rose-600 aria-invalid: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)]',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport { Textarea };\n"],"mappings":";;;;;AAKA,IAAM,mBAAmB,IAAI,IAAI;CAC7B,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACP,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,SAAS,SAAS,EAAE,WAAW,MAAM,GAAG,SAA6E;AACjH,QACI,oBAAC,YAAD;EACI,aAAU;EACV,WAAW,GAEP,8CAEA,uBACA,cACA,wCACA,yBAGA,iBAAiB,EAAE,MAAM,CAAC,EAG1B,8BACA,yIACA,yJAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../src/components/Textarea.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkTextarea, type PkTextareaSize } from '@verbb/plugin-kit-web/components/textarea/pk-textarea.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkTextareaElement = createPluginKitComponent({\n    tagName: 'pk-textarea',\n    elementClass: PkTextarea,\n    react: React,\n    events: {\n        // React `onChange` is live (every keystroke); native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n        onFocus: 'focus',\n        onBlur: 'blur',\n    },\n});\n\ntype PkTextareaElementProps = React.ComponentProps<typeof PkTextareaElement>;\n\n/** React facade over `<pk-textarea>`. Behavior and styles live in the web component. */\nexport const Textarea = forwardRef<PkTextarea, PkTextareaElementProps>(function Textarea(props, ref) {\n    const {\n        disabled, readonly, invalid, fitCell, ...rest\n    } = props;\n\n    return (\n        <PkTextareaElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid', 'fitCell'], {\n                disabled, readonly, invalid, fitCell,\n            })}\n        />\n    );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport type TextareaProps = PkTextareaElementProps;\nexport type { PkTextareaSize };\n"],"mappings":";;;;;;AAMA,IAAM,oBAAoB,yBAAyB;CAC/C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EAEJ,SAAS;EACT,UAAU;EACV,SAAS;EACT,QAAQ;EACX;CACJ,CAAC;;AAKF,IAAa,WAAW,WAA+C,SAAS,SAAS,OAAO,KAAK;CACjG,MAAM,EACF,UAAU,UAAU,SAAS,SAAS,GAAG,SACzC;AAEJ,QACI,oBAAC,mBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAW;GAAU,EAAE;GACjE;GAAU;GAAU;GAAS;GAChC,CAAC;EACJ,CAAA;EAER;AAEF,SAAS,cAAc"}

package/dist/components/TimePicker.d.ts

@@ -1,9 +1,19 @@
-export declare function TimePicker({ value, onValueChange, placeholder, className, disabled, isInvalid, ...props }: {
-    value: string;
-    onValueChange?: (value: string) => void;
-    placeholder?: string;
-    className?: string;
-    disabled?: boolean;
-    isInvalid?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+import { default as React } from 'react';
+import { PkTimePicker } from '@verbb/plugin-kit-web/components/time-picker/pk-time-picker.js';
+declare const PkTimePickerElement: import('@lit/react').ReactWebComponent<PkTimePicker, {
+    onPkChange: string;
+    onPkClear: string;
+    onInput: string;
+    onChange: string;
+}>;
+type PkTimePickerElementProps = React.ComponentProps<typeof PkTimePickerElement>;
+/** React facade over `<pk-time-picker>`. Behavior and styles live in the web component. */
+export declare const TimePicker: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkTimePicker>, "defaultValue" | "onChange" | "onInput" | "form" | "show" | "hide" | "open" | "input" | "values" | "value" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "required" | "name" | "size" | "placeholder" | "invalid" | "placement" | "sideOffset" | "multiple" | "onPkChange" | "assumeInteractionOn" | "validators" | "customError" | "valueHasChanged" | "hasInteracted" | "formResetCallback" | "formDisabledCallback" | "formStateRestoreCallback" | "labels" | "validity" | "willValidate" | "validationMessage" | "getForm" | "checkValidity" | "reportValidity" | "resetValidity" | "setCustomValidity" | "onPkClear" | "withClear" | "width" | "clearable" | "defaultValues" | "loopFocus"> & {
+    onPkChange?: ((e: Event) => void) | undefined;
+    onPkClear?: ((e: Event) => void) | undefined;
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkTimePicker, keyof HTMLElement>> & React.RefAttributes<PkTimePicker>, "ref"> & React.RefAttributes<PkTimePicker>>;
+export { PkTimePickerElement };
+export type TimePickerProps = PkTimePickerElementProps;
 //# sourceMappingURL=TimePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../src/components/TimePicker.tsx"],"names":[],"mappings":"AAaA,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,2CAiDA"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../src/components/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAI9F,QAAA,MAAM,mBAAmB;;;;;EAUvB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjF,2FAA2F;AAC3F,eAAO,MAAM,UAAU;;;;;mIAiBrB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC"}

package/dist/components/TimePicker.js

@@ -1,41 +1,43 @@
-import { cn } from "../utils/classes.js";
-import { generateTimeOptions } from "../utils/timeOptions.js";
-import "../utils/index.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./Select.js";
-import "./index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClock } 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 } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkTimePicker } from "@verbb/plugin-kit-web/components/time-picker/pk-time-picker.js";
 //#region src/components/TimePicker.tsx
-function TimePicker({ value, onValueChange, placeholder = "", className, disabled = false, isInvalid = false, ...props }) {
-	const timeOptions = generateTimeOptions();
-	return /* @__PURE__ */ jsxs(Select, {
-		value,
-		onValueChange: (nextValue) => {
-			onValueChange?.(String(nextValue ?? ""));
-		},
-		disabled,
-		...props,
-		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
-			"aria-invalid": isInvalid,
-			className: cn("min-w-[7rem] min-h-[2.125rem]! h-[2.125rem]!", "w-[130px] 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!", className),
-			children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
-				icon: faClock,
-				className: cn("mr-1 text-gray-400")
-			}), /* @__PURE__ */ jsx(SelectValue, { placeholder })]
-		}), /* @__PURE__ */ jsx(SelectContent, {
-			alignItemWithTrigger: false,
-			className: cn("max-h-[15rem] min-w-[8rem]"),
-			children: timeOptions.map((option) => {
-				return /* @__PURE__ */ jsx(SelectItem, {
-					value: option.value,
-					children: option.label
-				}, option.value);
-			})
-		})]
+var PkTimePickerElement = createPluginKitComponent({
+	tagName: "pk-time-picker",
+	elementClass: PkTimePicker,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onPkClear: "pk-clear",
+		onInput: "input",
+		onChange: "change"
+	}
+});
+/** React facade over `<pk-time-picker>`. Behavior and styles live in the web component. */
+var TimePicker = forwardRef(function TimePicker(props, ref) {
+	const { disabled, invalid, clearable, multiple, open, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkTimePickerElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"clearable",
+			"multiple",
+			"open"
+		], {
+			disabled,
+			invalid,
+			clearable,
+			multiple,
+			open
+		})
 	});
-}
+});
+TimePicker.displayName = "TimePicker";
 //#endregion
-export { TimePicker };
+export { PkTimePickerElement, TimePicker };
 
 //# sourceMappingURL=TimePicker.js.map

package/dist/components/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/TimePicker.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n} from '@verbb/plugin-kit-react/components';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faClock } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, generateTimeOptions } from '@verbb/plugin-kit-react/utils';\n\nexport function TimePicker({\n    value,\n    onValueChange,\n    placeholder = '',\n    className,\n    disabled = false,\n    isInvalid = false,\n    ...props\n}: {\n    value: string;\n    onValueChange?: (value: string) => void;\n    placeholder?: string;\n    className?: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n}) {\n    // Use cached time options instead of generating on every render\n    const timeOptions = generateTimeOptions();\n\n    return (\n        <Select\n            value={value}\n            onValueChange={(nextValue) => { onValueChange?.(String(nextValue ?? '')); }}\n            disabled={disabled}\n            {...props}\n        >\n            <SelectTrigger\n                aria-invalid={isInvalid}\n                className={cn(\n                    'min-w-[7rem] min-h-[2.125rem]! h-[2.125rem]!',\n                    'w-[130px] justify-start text-left font-normal',\n                    'bg-transparent border border-slate-400!',\n                    'hover:bg-slate-50!',\n                    'active:bg-slate-150!',\n                    'data-[popup-open]:bg-slate-150!',\n                    className,\n                )}>\n                <FontAwesomeIcon\n                    icon={faClock}\n                    className={cn(\n                        'mr-1 text-gray-400',\n                    )}\n                />\n                <SelectValue placeholder={placeholder} />\n            </SelectTrigger>\n            <SelectContent\n                alignItemWithTrigger={false}\n                className={cn(\n                    'max-h-[15rem] min-w-[8rem]',\n                )}\n            >\n                {timeOptions.map((option) => {\n                    return (\n                        <SelectItem\n                            key={option.value}\n                            value={option.value}\n                        >\n                            {option.label}\n                        </SelectItem>\n                    );\n                })}\n            </SelectContent>\n        </Select>\n    );\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,WAAW,EACvB,OACA,eACA,cAAc,IACd,WACA,WAAW,OACX,YAAY,OACZ,GAAG,SAQJ;CAEC,MAAM,cAAc,qBAAqB;AAEzC,QACI,qBAAC,QAAD;EACW;EACP,gBAAgB,cAAc;AAAE,mBAAgB,OAAO,aAAa,GAAG,CAAC;;EAC9D;EACV,GAAI;YAJR,CAMI,qBAAC,eAAD;GACI,gBAAc;GACd,WAAW,GACP,gDACA,iDACA,2CACA,sBACA,wBACA,mCACA,UACH;aAVL,CAWI,oBAAC,iBAAD;IACI,MAAM;IACN,WAAW,GACP,qBACH;IACH,CAAA,EACF,oBAAC,aAAD,EAA0B,aAAe,CAAA,CAC7B;MAChB,oBAAC,eAAD;GACI,sBAAsB;GACtB,WAAW,GACP,6BACH;aAEA,YAAY,KAAK,WAAW;AACzB,WACI,oBAAC,YAAD;KAEI,OAAO,OAAO;eAEb,OAAO;KACC,EAJJ,OAAO,MAIH;KAEnB;GACU,CAAA,CACX"}
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/TimePicker.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkTimePicker } from '@verbb/plugin-kit-web/components/time-picker/pk-time-picker.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkTimePickerElement = createPluginKitComponent({\n    tagName: 'pk-time-picker',\n    elementClass: PkTimePicker,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkClear: 'pk-clear',\n        onInput: 'input',\n        onChange: 'change',\n    },\n});\n\ntype PkTimePickerElementProps = React.ComponentProps<typeof PkTimePickerElement>;\n\n/** React facade over `<pk-time-picker>`. Behavior and styles live in the web component. */\nexport const TimePicker = forwardRef<PkTimePicker, PkTimePickerElementProps>(function TimePicker(props, ref) {\n    const {\n        disabled, invalid, clearable, multiple, open, ...rest\n    } = props;\n\n    return (\n        <PkTimePickerElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(\n                ['disabled', 'invalid', 'clearable', 'multiple', 'open'],\n                {\n                    disabled, invalid, clearable, multiple, open,\n                },\n            )}\n        />\n    );\n});\n\nTimePicker.displayName = 'TimePicker';\n\nexport { PkTimePickerElement };\nexport type TimePickerProps = PkTimePickerElementProps;\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,UAAU;EACb;CACJ,CAAC;;AAKF,IAAa,aAAa,WAAmD,SAAS,WAAW,OAAO,KAAK;CACzG,MAAM,EACF,UAAU,SAAS,WAAW,UAAU,MAAM,GAAG,SACjD;AAEJ,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBACA;GAAC;GAAY;GAAW;GAAa;GAAY;GAAO,EACxD;GACI;GAAU;GAAS;GAAW;GAAU;GAC3C,CACJ;EACH,CAAA;EAER;AAEF,WAAW,cAAc"}

package/dist/components/Tiptap.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { PkTiptapContent } from '@verbb/plugin-kit-web/components/tiptap/pk-tiptap-content.js';
+import { PkTiptapEditor } from '@verbb/plugin-kit-web/components/tiptap/pk-tiptap-editor.js';
+import { PkTiptapInput } from '@verbb/plugin-kit-web/components/tiptap/pk-tiptap-input.js';
+/** React facades over the `<pk-tiptap-*>` family. Behavior and styles live in the web components. */
+export declare const PkTiptapEditorElement: import('@lit/react').ReactWebComponent<PkTiptapEditor, {
+    onPkChange: string;
+    onInput: string;
+    onPkVariableTagConfigure: string;
+}>;
+export declare const PkTiptapInputElement: import('@lit/react').ReactWebComponent<PkTiptapInput, {
+    onPkChange: string;
+    onInput: string;
+    onPkVariableTagConfigure: string;
+}>;
+export declare const PkTiptapContentElement: import('@lit/react').ReactWebComponent<PkTiptapContent, {}>;
+type PkTiptapEditorElementProps = React.ComponentProps<typeof PkTiptapEditorElement>;
+type PkTiptapInputElementProps = React.ComponentProps<typeof PkTiptapInputElement>;
+/** Document JSON string, or a TipTap node array (serialized before it hits the CE). */
+export type TiptapEditorValue = string | readonly unknown[] | null | undefined;
+export type TiptapEditorProps = Omit<PkTiptapEditorElementProps, 'value' | 'onChange' | 'onPkChange'> & {
+    value?: TiptapEditorValue;
+    /** Receives the JSON document string (same payload as `pk-change` detail.value). */
+    onChange?: (value: string) => void;
+    onPkChange?: PkTiptapEditorElementProps['onPkChange'];
+    readOnly?: boolean;
+};
+export type TiptapInputProps = Omit<PkTiptapInputElementProps, 'onChange'> & {
+    /** Receives the plain string value from `pk-change`. */
+    onChange?: (value: string) => void;
+    onPkChange?: PkTiptapInputElementProps['onPkChange'];
+    readOnly?: boolean;
+};
+export type TiptapContentProps = React.ComponentProps<typeof PkTiptapContentElement>;
+/**
+ * TipTap editors are form-associated. Never forward `disabled={undefined}` —
+ * @lit/react assigns the property, and FAE must not treat that as a toggle force.
+ */
+export declare function TiptapEditor({ value, onChange, onPkChange, disabled, invalid, readonly, readOnly, ...props }: TiptapEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function TiptapInput({ onChange, onPkChange, disabled, invalid, readonly, readOnly, fitCell, ...props }: TiptapInputProps): import("react/jsx-runtime").JSX.Element;
+export declare const TiptapContent: import('@lit/react').ReactWebComponent<PkTiptapContent, {}>;
+export {};
+//# sourceMappingURL=Tiptap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tiptap.d.ts","sourceRoot":"","sources":["../../src/components/Tiptap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,6DAA6D,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,MAAM,4DAA4D,CAAC;AAG3F,qGAAqG;AACrG,eAAO,MAAM,qBAAqB;;;;EAWhC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;EAS/B,CAAC;AAEH,eAAO,MAAM,sBAAsB,6DAIjC,CAAC;AAEH,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACrF,KAAK,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnF,uFAAuF;AACvF,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,SAAS,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,UAAU,GAAG,YAAY,CAAC,GAAG;IACpG,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,GAAG;IACzE,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAyBrF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,iBAAiB,2CAuBnB;AAED,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACX,EAAE,gBAAgB,2CAsBlB;AAED,eAAO,MAAM,aAAa,6DAAyB,CAAC"}

package/dist/components/Tiptap.js

@@ -0,0 +1,96 @@
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { PkTiptapContent } from "@verbb/plugin-kit-web/components/tiptap/pk-tiptap-content.js";
+import { PkTiptapEditor } from "@verbb/plugin-kit-web/components/tiptap/pk-tiptap-editor.js";
+import { PkTiptapInput } from "@verbb/plugin-kit-web/components/tiptap/pk-tiptap-input.js";
+//#region src/components/Tiptap.tsx
+/** React facades over the `<pk-tiptap-*>` family. Behavior and styles live in the web components. */
+var PkTiptapEditorElement = createPluginKitComponent({
+	tagName: "pk-tiptap-editor",
+	elementClass: PkTiptapEditor,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onInput: "input",
+		onPkVariableTagConfigure: "pk-variable-tag-configure"
+	}
+});
+var PkTiptapInputElement = createPluginKitComponent({
+	tagName: "pk-tiptap-input",
+	elementClass: PkTiptapInput,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onInput: "input",
+		onPkVariableTagConfigure: "pk-variable-tag-configure"
+	}
+});
+var PkTiptapContentElement = createPluginKitComponent({
+	tagName: "pk-tiptap-content",
+	elementClass: PkTiptapContent,
+	react: React
+});
+function serializeTiptapEditorValue(raw) {
+	if (raw == null) return "[]";
+	if (typeof raw === "string") return raw;
+	if (Array.isArray(raw)) return JSON.stringify(raw);
+	return "[]";
+}
+function readPkChangeValue(event) {
+	const detail = event.detail;
+	return typeof detail?.value === "string" ? detail.value : void 0;
+}
+/**
+* TipTap editors are form-associated. Never forward `disabled={undefined}` —
+* @lit/react assigns the property, and FAE must not treat that as a toggle force.
+*/
+function TiptapEditor({ value, onChange, onPkChange, disabled, invalid, readonly, readOnly, ...props }) {
+	const isReadonly = Boolean(readonly ?? readOnly);
+	return /* @__PURE__ */ jsx(PkTiptapEditorElement, {
+		...props,
+		value: serializeTiptapEditorValue(value),
+		onPkChange: (event) => {
+			onPkChange?.(event);
+			const next = readPkChangeValue(event);
+			if (next !== void 0) onChange?.(next);
+		},
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"readonly"
+		], {
+			disabled,
+			invalid,
+			readonly: isReadonly
+		})
+	});
+}
+function TiptapInput({ onChange, onPkChange, disabled, invalid, readonly, readOnly, fitCell, ...props }) {
+	const isReadonly = Boolean(readonly ?? readOnly);
+	return /* @__PURE__ */ jsx(PkTiptapInputElement, {
+		...props,
+		onPkChange: (event) => {
+			onPkChange?.(event);
+			const next = readPkChangeValue(event);
+			if (next !== void 0) onChange?.(next);
+		},
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"readonly",
+			"fitCell"
+		], {
+			disabled,
+			invalid,
+			readonly: isReadonly,
+			fitCell
+		})
+	});
+}
+var TiptapContent = PkTiptapContentElement;
+//#endregion
+export { PkTiptapContentElement, PkTiptapEditorElement, PkTiptapInputElement, TiptapContent, TiptapEditor, TiptapInput };
+
+//# sourceMappingURL=Tiptap.js.map

package/dist/components/Tiptap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tiptap.js","names":[],"sources":["../../src/components/Tiptap.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkTiptapContent } from '@verbb/plugin-kit-web/components/tiptap/pk-tiptap-content.js';\nimport { PkTiptapEditor } from '@verbb/plugin-kit-web/components/tiptap/pk-tiptap-editor.js';\nimport { PkTiptapInput } from '@verbb/plugin-kit-web/components/tiptap/pk-tiptap-input.js';\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\n/** React facades over the `<pk-tiptap-*>` family. Behavior and styles live in the web components. */\nexport const PkTiptapEditorElement = createPluginKitComponent({\n    tagName: 'pk-tiptap-editor',\n    elementClass: PkTiptapEditor,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onInput: 'input',\n        // Native `change` is available via onPkChange / value callbacks — avoid\n        // mapping `onChange` to the empty DOM Event (React callers expect the value).\n        onPkVariableTagConfigure: 'pk-variable-tag-configure',\n    },\n});\n\nexport const PkTiptapInputElement = createPluginKitComponent({\n    tagName: 'pk-tiptap-input',\n    elementClass: PkTiptapInput,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onInput: 'input',\n        onPkVariableTagConfigure: 'pk-variable-tag-configure',\n    },\n});\n\nexport const PkTiptapContentElement = createPluginKitComponent({\n    tagName: 'pk-tiptap-content',\n    elementClass: PkTiptapContent,\n    react: React,\n});\n\ntype PkTiptapEditorElementProps = React.ComponentProps<typeof PkTiptapEditorElement>;\ntype PkTiptapInputElementProps = React.ComponentProps<typeof PkTiptapInputElement>;\n\n/** Document JSON string, or a TipTap node array (serialized before it hits the CE). */\nexport type TiptapEditorValue = string | readonly unknown[] | null | undefined;\n\nexport type TiptapEditorProps = Omit<PkTiptapEditorElementProps, 'value' | 'onChange' | 'onPkChange'> & {\n    value?: TiptapEditorValue;\n    /** Receives the JSON document string (same payload as `pk-change` detail.value). */\n    onChange?: (value: string) => void;\n    onPkChange?: PkTiptapEditorElementProps['onPkChange'];\n    readOnly?: boolean;\n};\n\nexport type TiptapInputProps = Omit<PkTiptapInputElementProps, 'onChange'> & {\n    /** Receives the plain string value from `pk-change`. */\n    onChange?: (value: string) => void;\n    onPkChange?: PkTiptapInputElementProps['onPkChange'];\n    readOnly?: boolean;\n};\n\nexport type TiptapContentProps = React.ComponentProps<typeof PkTiptapContentElement>;\n\ntype PkChangeEvent = CustomEvent<{ value: string }>;\n\nfunction serializeTiptapEditorValue(raw: TiptapEditorValue): string {\n    if (raw == null) {\n        return '[]';\n    }\n\n    if (typeof raw === 'string') {\n        return raw;\n    }\n\n    if (Array.isArray(raw)) {\n        return JSON.stringify(raw);\n    }\n\n    return '[]';\n}\n\nfunction readPkChangeValue(event: Event): string | undefined {\n    const detail = (event as PkChangeEvent).detail;\n    return typeof detail?.value === 'string' ? detail.value : undefined;\n}\n\n/**\n * TipTap editors are form-associated. Never forward `disabled={undefined}` —\n * @lit/react assigns the property, and FAE must not treat that as a toggle force.\n */\nexport function TiptapEditor({\n    value,\n    onChange,\n    onPkChange,\n    disabled,\n    invalid,\n    readonly,\n    readOnly,\n    ...props\n}: TiptapEditorProps) {\n    // Formie / React use `readOnly`; Lit property is `readonly`.\n    const isReadonly = Boolean(readonly ?? readOnly);\n\n    return (\n        <PkTiptapEditorElement\n            {...props}\n            // Always pass a JSON string — node arrays from React otherwise mount empty.\n            value={serializeTiptapEditorValue(value)}\n            onPkChange={(event) => {\n                onPkChange?.(event);\n                const next = readPkChangeValue(event);\n                if (next !== undefined) {\n                    onChange?.(next);\n                }\n            }}\n            {...trueBooleanProps(['disabled', 'invalid', 'readonly'] as const, {\n                disabled,\n                invalid,\n                readonly: isReadonly,\n            })}\n        />\n    );\n}\n\nexport function TiptapInput({\n    onChange,\n    onPkChange,\n    disabled,\n    invalid,\n    readonly,\n    readOnly,\n    fitCell,\n    ...props\n}: TiptapInputProps) {\n    // Formie / React use `readOnly`; Lit property is `readonly` (chrome + editable).\n    const isReadonly = Boolean(readonly ?? readOnly);\n\n    return (\n        <PkTiptapInputElement\n            {...props}\n            onPkChange={(event) => {\n                onPkChange?.(event);\n                const next = readPkChangeValue(event);\n                if (next !== undefined) {\n                    onChange?.(next);\n                }\n            }}\n            {...trueBooleanProps(['disabled', 'invalid', 'readonly', 'fitCell'] as const, {\n                disabled,\n                invalid,\n                readonly: isReadonly,\n                fitCell,\n            })}\n        />\n    );\n}\n\nexport const TiptapContent = PkTiptapContentElement;\n"],"mappings":";;;;;;;;;AAQA,IAAa,wBAAwB,yBAAyB;CAC1D,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,SAAS;EAGT,0BAA0B;EAC7B;CACJ,CAAC;AAEF,IAAa,uBAAuB,yBAAyB;CACzD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,SAAS;EACT,0BAA0B;EAC7B;CACJ,CAAC;AAEF,IAAa,yBAAyB,yBAAyB;CAC3D,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AA2BF,SAAS,2BAA2B,KAAgC;AAChE,KAAI,OAAO,KACP,QAAO;AAGX,KAAI,OAAO,QAAQ,SACf,QAAO;AAGX,KAAI,MAAM,QAAQ,IAAI,CAClB,QAAO,KAAK,UAAU,IAAI;AAG9B,QAAO;;AAGX,SAAS,kBAAkB,OAAkC;CACzD,MAAM,SAAU,MAAwB;AACxC,QAAO,OAAO,QAAQ,UAAU,WAAW,OAAO,QAAQ,KAAA;;;;;;AAO9D,SAAgB,aAAa,EACzB,OACA,UACA,YACA,UACA,SACA,UACA,UACA,GAAG,SACe;CAElB,MAAM,aAAa,QAAQ,YAAY,SAAS;AAEhD,QACI,oBAAC,uBAAD;EACI,GAAI;EAEJ,OAAO,2BAA2B,MAAM;EACxC,aAAa,UAAU;AACnB,gBAAa,MAAM;GACnB,MAAM,OAAO,kBAAkB,MAAM;AACrC,OAAI,SAAS,KAAA,EACT,YAAW,KAAK;;EAGxB,GAAI,iBAAiB;GAAC;GAAY;GAAW;GAAW,EAAW;GAC/D;GACA;GACA,UAAU;GACb,CAAC;EACJ,CAAA;;AAIV,SAAgB,YAAY,EACxB,UACA,YACA,UACA,SACA,UACA,UACA,SACA,GAAG,SACc;CAEjB,MAAM,aAAa,QAAQ,YAAY,SAAS;AAEhD,QACI,oBAAC,sBAAD;EACI,GAAI;EACJ,aAAa,UAAU;AACnB,gBAAa,MAAM;GACnB,MAAM,OAAO,kBAAkB,MAAM;AACrC,OAAI,SAAS,KAAA,EACT,YAAW,KAAK;;EAGxB,GAAI,iBAAiB;GAAC;GAAY;GAAW;GAAY;GAAU,EAAW;GAC1E;GACA;GACA,UAAU;GACV;GACH,CAAC;EACJ,CAAA;;AAIV,IAAa,gBAAgB"}

package/dist/components/Toggle.d.ts

@@ -1,9 +1,14 @@
-import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
-import { VariantProps } from 'class-variance-authority';
-declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
-export { Toggle, toggleVariants };
+import { default as React } from 'react';
+import { PkToggle, PkToggleSize, PkToggleVariant } from '@verbb/plugin-kit-web/components/toggle/pk-toggle.js';
+/** React facade over `<pk-toggle>`. Behavior and styles live in the web component. */
+export declare const PkToggleElement: import('@lit/react').ReactWebComponent<PkToggle, {
+    onPkPressedChange: string;
+    onChange: string;
+}>;
+export declare const Toggle: import('@lit/react').ReactWebComponent<PkToggle, {
+    onPkPressedChange: string;
+    onChange: string;
+}>;
+export type ToggleProps = React.ComponentProps<typeof PkToggleElement>;
+export type { PkToggleSize, PkToggleVariant };
 //# sourceMappingURL=Toggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA4CnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,sDAAsD,CAAC;AAEzH,sFAAsF;AACtF,eAAO,MAAM,eAAe;;;EAQ1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;EAAkB,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AACvE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC"}