@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/Toggle.js

@@ -1,48 +1,19 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
-import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkToggle } from "@verbb/plugin-kit-web/components/toggle/pk-toggle.js";
 //#region src/components/Toggle.tsx
-var toggleVariants = cva([
-	"group/toggle inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg",
-	"cursor-pointer",
-	"transition-all outline-none",
-	"hover:bg-slate-250",
-	"aria-pressed:bg-slate-250 data-[state=on]:bg-slate-250 data-[pressed]:bg-slate-250 data-[pressed=true]:bg-slate-250",
-	"focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_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)]",
-	"disabled:pointer-events-none disabled:opacity-50",
-	"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
-], {
-	variants: {
-		variant: {
-			default: "bg-transparent",
-			outline: ["border border-slate-300 bg-transparent", "hover:bg-slate-250"]
-		},
-		size: {
-			default: "h-8 min-w-8 px-2",
-			sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
-			lg: "h-9 min-w-9 px-2.5"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
+/** React facade over `<pk-toggle>`. Behavior and styles live in the web component. */
+var PkToggleElement = createPluginKitComponent({
+	tagName: "pk-toggle",
+	elementClass: PkToggle,
+	react: React,
+	events: {
+		onPkPressedChange: "pk-pressed-change",
+		onChange: "change"
 	}
 });
-function Toggle({ className, variant = "default", size = "default", ...props }) {
-	return /* @__PURE__ */ jsx(Toggle$1, {
-		"data-slot": "toggle",
-		className: cn(toggleVariants({
-			variant,
-			size,
-			className
-		})),
-		...props
-	});
-}
+var Toggle = PkToggleElement;
 //#endregion
-export { Toggle, toggleVariants };
+export { PkToggleElement, Toggle };
 
 //# sourceMappingURL=Toggle.js.map

package/dist/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst toggleVariants = cva(\n    [\n        // Layout\n        'group/toggle inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg',\n        'cursor-pointer',\n\n        // Interaction and state\n        'transition-all outline-none',\n        'hover:bg-slate-250',\n        'aria-pressed:bg-slate-250 data-[state=on]:bg-slate-250 data-[pressed]:bg-slate-250 data-[pressed=true]:bg-slate-250',\n\n        // Focus and validation\n        'focus-visible:shadow-[0_0_0_2px_var(--color-sky-600),0_0_5px_1px_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        // Disabled\n        'disabled:pointer-events-none disabled:opacity-50',\n\n        // Icons\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-transparent',\n                outline: [\n                    // Border style\n                    'border border-slate-300 bg-transparent',\n\n                    // Hover parity\n                    'hover:bg-slate-250',\n                ],\n            },\n            size: {\n                default: 'h-8 min-w-8 px-2',\n                sm: 'h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]',\n                lg: 'h-9 min-w-9 px-2.5',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    },\n);\n\nfunction Toggle({\n    className,\n    variant = 'default',\n    size = 'default',\n    ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n    return (\n        <TogglePrimitive\n            data-slot=\"toggle\"\n            className={cn(toggleVariants({ variant, size, className }))}\n            {...props}\n        />\n    );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;;;;AAKA,IAAM,iBAAiB,IACnB;CAEI;CACA;CAGA;CACA;CACA;CAGA;CACA;CAGA;CAGA;CACH,EACD;CACI,UAAU;EACN,SAAS;GACL,SAAS;GACT,SAAS,CAEL,0CAGA,qBACH;GACJ;EACD,MAAM;GACF,SAAS;GACT,IAAI;GACJ,IAAI;GACP;EACJ;CACD,iBAAiB;EACb,SAAS;EACT,MAAM;EACT;CACJ,CACJ;AAED,SAAS,OAAO,EACZ,WACA,UAAU,WACV,OAAO,WACP,GAAG,SACyD;AAC5D,QACI,oBAAC,UAAD;EACI,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,GAAI;EACN,CAAA"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkToggle, type PkToggleSize, type PkToggleVariant } from '@verbb/plugin-kit-web/components/toggle/pk-toggle.js';\n\n/** React facade over `<pk-toggle>`. Behavior and styles live in the web component. */\nexport const PkToggleElement = createPluginKitComponent({\n    tagName: 'pk-toggle',\n    elementClass: PkToggle,\n    react: React,\n    events: {\n        onPkPressedChange: 'pk-pressed-change',\n        onChange: 'change',\n    },\n});\n\nexport const Toggle = PkToggleElement;\nexport type ToggleProps = React.ComponentProps<typeof PkToggleElement>;\nexport type { PkToggleSize, PkToggleVariant };\n"],"mappings":";;;;;AAKA,IAAa,kBAAkB,yBAAyB;CACpD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,mBAAmB;EACnB,UAAU;EACb;CACJ,CAAC;AAEF,IAAa,SAAS"}

package/dist/components/ToggleGroup.d.ts

@@ -1,11 +1,12 @@
-import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
-import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
-import { VariantProps } from 'class-variance-authority';
-import { toggleVariants } from './Toggle';
-declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-    orientation?: 'horizontal' | 'vertical';
-}): import("react/jsx-runtime").JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
-export { ToggleGroup, ToggleGroupItem };
+import { default as React } from 'react';
+import { PkToggleGroup, PkToggleGroupOrientation } from '@verbb/plugin-kit-web/components/toggle-group/pk-toggle-group.js';
+/** React facade over `<pk-toggle-group>`. Behavior and styles live in the web component. */
+export declare const PkToggleGroupElement: import('@lit/react').ReactWebComponent<PkToggleGroup, {
+    onPkValueChange: string;
+}>;
+export declare const ToggleGroup: import('@lit/react').ReactWebComponent<PkToggleGroup, {
+    onPkValueChange: string;
+}>;
+export type ToggleGroupProps = React.ComponentProps<typeof PkToggleGroupElement>;
+export type { PkToggleGroupOrientation };
 //# sourceMappingURL=ToggleGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../src/components/ToggleGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAc3E,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAW,EACX,WAA0B,EAC1B,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,oBAAoB,CAAC,KAAK,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;CAC1C,2CAoCJ;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAsC7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../src/components/ToggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,KAAK,wBAAwB,EAAE,MAAM,kEAAkE,CAAC;AAEhI,4FAA4F;AAC5F,eAAO,MAAM,oBAAoB;;EAO/B,CAAC;AAEH,eAAO,MAAM,WAAW;;EAAuB,CAAC;AAChD,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,YAAY,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/components/ToggleGroup.js

@@ -1,70 +1,16 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { toggleVariants } from "./Toggle.js";
-import * as React$1 from "react";
-import { jsx } from "react/jsx-runtime";
-import { Toggle } from "@base-ui/react/toggle";
-import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkToggleGroup } from "@verbb/plugin-kit-web/components/toggle-group/pk-toggle-group.js";
 //#region src/components/ToggleGroup.tsx
-var ToggleGroupContext = React$1.createContext({
-	size: "default",
-	variant: "default",
-	spacing: 0,
-	orientation: "horizontal"
+/** React facade over `<pk-toggle-group>`. Behavior and styles live in the web component. */
+var PkToggleGroupElement = createPluginKitComponent({
+	tagName: "pk-toggle-group",
+	elementClass: PkToggleGroup,
+	react: React,
+	events: { onPkValueChange: "pk-value-change" }
 });
-function ToggleGroup({ className, variant, size, spacing = 0, orientation = "horizontal", children, ...props }) {
-	return /* @__PURE__ */ jsx(ToggleGroup$1, {
-		"data-slot": "toggle-group",
-		"data-variant": variant,
-		"data-size": size,
-		"data-spacing": spacing,
-		"data-orientation": orientation,
-		style: { "--gap": spacing },
-		className: cn([
-			"group/toggle-group flex w-fit flex-row items-center rounded-lg",
-			"data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
-			"gap-[--spacing(var(--gap))]",
-			"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
-		], className),
-		...props,
-		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
-			value: {
-				variant,
-				size,
-				spacing,
-				orientation
-			},
-			children
-		})
-	});
-}
-function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
-	const context = React$1.useContext(ToggleGroupContext);
-	return /* @__PURE__ */ jsx(Toggle, {
-		"data-slot": "toggle-group-item",
-		"data-variant": context.variant || variant,
-		"data-size": context.size || size,
-		"data-spacing": context.spacing,
-		className: cn([
-			"shrink-0 focus:z-10 focus-visible:z-10",
-			"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2",
-			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg",
-			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg",
-			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg",
-			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg",
-			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0",
-			"group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l",
-			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0",
-			"group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t"
-		], toggleVariants({
-			variant: context.variant || variant,
-			size: context.size || size
-		}), className),
-		...props,
-		children
-	});
-}
+var ToggleGroup = PkToggleGroupElement;
 //#endregion
-export { ToggleGroup, ToggleGroupItem };
+export { PkToggleGroupElement, ToggleGroup };
 
 //# sourceMappingURL=ToggleGroup.js.map

package/dist/components/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../src/components/ToggleGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { toggleVariants } from '@verbb/plugin-kit-react/components/Toggle';\n\nconst ToggleGroupContext = React.createContext<\n    VariantProps<typeof toggleVariants> & {\n        spacing?: number\n        orientation?: 'horizontal' | 'vertical'\n    }\n>({\n    size: 'default',\n    variant: 'default',\n    spacing: 0,\n    orientation: 'horizontal',\n});\n\nfunction ToggleGroup({\n    className,\n    variant,\n    size,\n    spacing = 0,\n    orientation = 'horizontal',\n    children,\n    ...props\n}: ToggleGroupPrimitive.Props &\n    VariantProps<typeof toggleVariants> & {\n        spacing?: number\n        orientation?: 'horizontal' | 'vertical'\n    }) {\n    return (\n        <ToggleGroupPrimitive\n            data-slot=\"toggle-group\"\n            data-variant={variant}\n            data-size={size}\n            data-spacing={spacing}\n            data-orientation={orientation}\n            style={{ '--gap': spacing } as React.CSSProperties}\n            className={cn(\n                [\n                    // Layout\n                    'group/toggle-group flex w-fit flex-row items-center rounded-lg',\n\n                    // Sizing\n                    'data-[size=sm]:rounded-[min(var(--radius-md),10px)]',\n\n                    // Spacing\n                    'gap-[--spacing(var(--gap))]',\n\n                    // Orientation (Base UI uses data-orientation, not data-vertical/data-horizontal)\n                    'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n                ],\n                className,\n            )}\n            {...props}\n        >\n            <ToggleGroupContext.Provider\n                value={{\n                    variant, size, spacing, orientation,\n                }}\n            >\n                {children}\n            </ToggleGroupContext.Provider>\n        </ToggleGroupPrimitive>\n    );\n}\n\nfunction ToggleGroupItem({\n    className,\n    children,\n    variant = 'default',\n    size = 'default',\n    ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n    const context = React.useContext(ToggleGroupContext);\n\n    return (\n        <TogglePrimitive\n            data-slot=\"toggle-group-item\"\n            data-variant={context.variant || variant}\n            data-size={context.size || size}\n            data-spacing={context.spacing}\n            className={cn(\n                [\n                    // Base\n                    'shrink-0 focus:z-10 focus-visible:z-10',\n\n                    // Unified control look when spacing is zero\n                    'group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2',\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg',\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg',\n\n                    // Shared-outline border collapse when spacing is zero: single outer border + single divider between items\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0',\n                    'group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0',\n                    'group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n                ],\n                toggleVariants({\n                    variant: context.variant || variant,\n                    size: context.size || size,\n                }),\n                className,\n            )}\n            {...props}\n        >\n            {children}\n        </TogglePrimitive>\n    );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":";;;;;;;;AAQA,IAAM,qBAAqB,QAAM,cAK/B;CACE,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;CAChB,CAAC;AAEF,SAAS,YAAY,EACjB,WACA,SACA,MACA,UAAU,GACV,cAAc,cACd,UACA,GAAG,SAKA;AACH,QACI,oBAAC,eAAD;EACI,aAAU;EACV,gBAAc;EACd,aAAW;EACX,gBAAc;EACd,oBAAkB;EAClB,OAAO,EAAE,SAAS,SAAS;EAC3B,WAAW,GACP;GAEI;GAGA;GAGA;GAGA;GACH,EACD,UACH;EACD,GAAI;YAEJ,oBAAC,mBAAmB,UAApB;GACI,OAAO;IACH;IAAS;IAAM;IAAS;IAC3B;GAEA;GACyB,CAAA;EACX,CAAA;;AAI/B,SAAS,gBAAgB,EACrB,WACA,UACA,UAAU,WACV,OAAO,WACP,GAAG,SACyD;CAC5D,MAAM,UAAU,QAAM,WAAW,mBAAmB;AAEpD,QACI,oBAAC,QAAD;EACI,aAAU;EACV,gBAAc,QAAQ,WAAW;EACjC,aAAW,QAAQ,QAAQ;EAC3B,gBAAc,QAAQ;EACtB,WAAW,GACP;GAEI;GAGA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;GACH,EACD,eAAe;GACX,SAAS,QAAQ,WAAW;GAC5B,MAAM,QAAQ,QAAQ;GACzB,CAAC,EACF,UACH;EACD,GAAI;EAEH;EACa,CAAA"}
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../src/components/ToggleGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkToggleGroup, type PkToggleGroupOrientation } from '@verbb/plugin-kit-web/components/toggle-group/pk-toggle-group.js';\n\n/** React facade over `<pk-toggle-group>`. Behavior and styles live in the web component. */\nexport const PkToggleGroupElement = createPluginKitComponent({\n    tagName: 'pk-toggle-group',\n    elementClass: PkToggleGroup,\n    react: React,\n    events: {\n        onPkValueChange: 'pk-value-change',\n    },\n});\n\nexport const ToggleGroup = PkToggleGroupElement;\nexport type ToggleGroupProps = React.ComponentProps<typeof PkToggleGroupElement>;\nexport type { PkToggleGroupOrientation };\n"],"mappings":";;;;;AAKA,IAAa,uBAAuB,yBAAyB;CACzD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ,EACJ,iBAAiB,mBACpB;CACJ,CAAC;AAEF,IAAa,cAAc"}

package/dist/components/Tooltip.d.ts

@@ -1,9 +1,19 @@
-import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
-declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
-declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare function TooltipContent({ className, side, sideOffset, align, alignOffset, portalContainer, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
-    portalContainer?: HTMLElement | ShadowRoot | null;
-}): import("react/jsx-runtime").JSX.Element;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, };
+import { default as React } from 'react';
+import { PkTooltip } from '@verbb/plugin-kit-web/components/tooltip/pk-tooltip.js';
+/** React facade over `<pk-tooltip>`. Behavior and styles live in the web component. */
+export declare const PkTooltipElement: import('@lit/react').ReactWebComponent<PkTooltip, {
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+export declare const Tooltip: import('@lit/react').ReactWebComponent<PkTooltip, {
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+export type TooltipProps = React.ComponentProps<typeof PkTooltipElement>;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,iBAAS,eAAe,CAAC,EACrB,KAAS,EACT,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,2CAQjC;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,2CAMzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,2CAEnE;AAED,iBAAS,cAAc,CAAC,EACpB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,eAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC3B,IAAI,CACA,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAClD,GAAG;IACA,eAAe,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAA;CACpD,2CAqEJ;AAED,OAAO,EACH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,GAC3D,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAEnF,uFAAuF;AACvF,eAAO,MAAM,gBAAgB;;;;;;EAW3B,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;EAAmB,CAAC;AACxC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/Tooltip.js

@@ -1,51 +1,22 @@
-import { cn } from "../utils/classes.js";
-import { getPortalContainer } from "../utils/portal.js";
-import "../utils/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkTooltip } from "@verbb/plugin-kit-web/components/tooltip/pk-tooltip.js";
 //#region src/components/Tooltip.tsx
-function TooltipProvider({ delay = 0, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
-		"data-slot": "tooltip-provider",
-		delay,
-		...props
-	});
-}
-function Tooltip({ ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
-		delay: 0,
-		children: /* @__PURE__ */ jsx(Tooltip$1.Root, {
-			"data-slot": "tooltip",
-			...props
-		})
-	});
-}
-function TooltipTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
-		"data-slot": "tooltip-trigger",
-		...props
-	});
-}
-function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, portalContainer, children, ...props }) {
-	const resolvedPortalContainer = getPortalContainer(portalContainer);
-	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
-		container: resolvedPortalContainer,
-		children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
-			align,
-			alignOffset,
-			side,
-			sideOffset,
-			className: "isolate z-250",
-			children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
-				"data-slot": "tooltip-content",
-				className: cn("rounded-sm px-[8px] py-[4px] w-fit max-w-xs", "bg-[#1c2e36] text-white text-[12px]", "z-50 origin-(--transform-origin)", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-[side=top]:slide-in-from-bottom-2", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=inline-start]:slide-in-from-right-2", "data-[side=inline-end]:slide-in-from-left-2", className),
-				...props,
-				children: [children, /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: cn("size-2.5 rotate-45 rounded-[2px]", "translate-y-[calc(-50%-2px)]", "bg-[#1c2e36] fill-[#1c2e36]", "z-50", "data-[side=top]:-bottom-2.5", "data-[side=bottom]:top-1", "data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2", "data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2", "data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2", "data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2") })]
-			})
-		})
-	});
-}
+/** React facade over `<pk-tooltip>`. Behavior and styles live in the web component. */
+var PkTooltipElement = createPluginKitComponent({
+	tagName: "pk-tooltip",
+	elementClass: PkTooltip,
+	react: React,
+	events: {
+		onPkShow: "pk-show",
+		onPkAfterShow: "pk-after-show",
+		onPkHide: "pk-hide",
+		onPkAfterHide: "pk-after-hide",
+		onPkOpenChange: "pk-open-change"
+	}
+});
+var Tooltip = PkTooltipElement;
 //#endregion
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { PkTooltipElement, Tooltip };
 
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nfunction TooltipProvider({\n    delay = 0,\n    ...props\n}: TooltipPrimitive.Provider.Props) {\n    return (\n        <TooltipPrimitive.Provider\n            data-slot=\"tooltip-provider\"\n            delay={delay}\n            {...props}\n        />\n    );\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n    return (\n        <TooltipPrimitive.Provider delay={0}>\n            <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n        </TooltipPrimitive.Provider>\n    );\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n    return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n    className,\n    side = 'top',\n    sideOffset = 4,\n    align = 'center',\n    alignOffset = 0,\n    portalContainer,\n    children,\n    ...props\n}: TooltipPrimitive.Popup.Props &\n    Pick<\n        TooltipPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <TooltipPrimitive.Portal container={resolvedPortalContainer}>\n            <TooltipPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"isolate z-250\"\n            >\n                <TooltipPrimitive.Popup\n                    data-slot=\"tooltip-content\"\n                    className={cn(\n                        // Layout\n                        'rounded-sm px-[8px] py-[4px] w-fit max-w-xs',\n\n                        // Theme\n                        'bg-[#1c2e36] text-white text-[12px]',\n\n                        // Stacking\n                        'z-50 origin-(--transform-origin)',\n\n                        // Open animation\n                        'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n                        'data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95',\n\n                        // Closed animation\n                        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n\n                        // Side-specific slide animations\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n\n                        className,\n                    )}\n                    {...props}\n                >\n                    {children}\n                    <TooltipPrimitive.Arrow\n                        className={cn(\n                            // Shape\n                            'size-2.5 rotate-45 rounded-[2px]',\n                            'translate-y-[calc(-50%-2px)]',\n\n                            // Theme\n                            'bg-[#1c2e36] fill-[#1c2e36]',\n\n                            // Stacking\n                            'z-50',\n\n                            // Side-specific positioning\n                            'data-[side=top]:-bottom-2.5',\n                            'data-[side=bottom]:top-1',\n                            'data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2',\n                            'data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2',\n                            'data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2',\n                            'data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2',\n                        )}\n                    />\n                </TooltipPrimitive.Popup>\n            </TooltipPrimitive.Positioner>\n        </TooltipPrimitive.Portal>\n    );\n}\n\nexport {\n    Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,\n};\n"],"mappings":";;;;;;AAIA,SAAS,gBAAgB,EACrB,QAAQ,GACR,GAAG,SAC6B;AAChC,QACI,oBAAC,UAAiB,UAAlB;EACI,aAAU;EACH;EACP,GAAI;EACN,CAAA;;AAIV,SAAS,QAAQ,EAAE,GAAG,SAAsC;AACxD,QACI,oBAAC,UAAiB,UAAlB;EAA2B,OAAO;YAC9B,oBAAC,UAAiB,MAAlB;GAAuB,aAAU;GAAU,GAAI;GAAS,CAAA;EAChC,CAAA;;AAIpC,SAAS,eAAe,EAAE,GAAG,SAAyC;AAClE,QAAO,oBAAC,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG9E,SAAS,eAAe,EACpB,WACA,OAAO,OACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,iBACA,UACA,GAAG,SAOA;CACH,MAAM,0BAA0B,mBAAmB,gBAAgB;AAEnE,QACI,oBAAC,UAAiB,QAAlB;EAAyB,WAAW;YAChC,oBAAC,UAAiB,YAAlB;GACW;GACM;GACP;GACM;GACZ,WAAU;aAEV,qBAAC,UAAiB,OAAlB;IACI,aAAU;IACV,WAAW,GAEP,+CAGA,uCAGA,oCAGA,iEACA,iHAGA,0EAGA,0CACA,0CACA,0CACA,0CACA,kDACA,+CAEA,UACH;IACD,GAAI;cA7BR,CA+BK,UACD,oBAAC,UAAiB,OAAlB,EACI,WAAW,GAEP,oCACA,gCAGA,+BAGA,QAGA,+BACA,4BACA,yFACA,2FACA,iHACA,yGACH,EACH,CAAA,CACmB;;GACC,CAAA;EACR,CAAA"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkTooltip } from '@verbb/plugin-kit-web/components/tooltip/pk-tooltip.js';\n\n/** React facade over `<pk-tooltip>`. Behavior and styles live in the web component. */\nexport const PkTooltipElement = createPluginKitComponent({\n    tagName: 'pk-tooltip',\n    elementClass: PkTooltip,\n    react: React,\n    events: {\n        onPkShow: 'pk-show',\n        onPkAfterShow: 'pk-after-show',\n        onPkHide: 'pk-hide',\n        onPkAfterHide: 'pk-after-hide',\n        onPkOpenChange: 'pk-open-change',\n    },\n});\n\nexport const Tooltip = PkTooltipElement;\nexport type TooltipProps = React.ComponentProps<typeof PkTooltipElement>;\n"],"mappings":";;;;;AAKA,IAAa,mBAAmB,yBAAyB;CACrD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EACf,gBAAgB;EACnB;CACJ,CAAC;AAEF,IAAa,UAAU"}

package/dist/components/index.d.ts

@@ -1,46 +1,38 @@
-export * from './Button';
-export * from './ButtonGroup';
-export * from './Calendar';
-export * from './CodeEditor';
-export * from './Checkbox';
-export * from './CheckboxInput';
-export * from './CheckboxSelect';
-export * from './Combobox';
-export * from './ComboboxInput';
-export * from './Command';
-export * from './ColorInput';
-export * from './CopyButton';
-export * from './DatePicker';
-export * from './Dialog';
-export * from './DropdownMenu';
-export * from './EditableTable';
-export * from './FadeIn';
-export * from './Input';
-export * from './InputGroup';
-export * from './Label';
-export * from './Markdown';
-export * from './Lightswitch';
-export * from './Spinner';
-export * from './MenuButton';
-export * from './ModalTabs';
-export * from './PaneTabs';
-export * from './Popover';
-export * from './RadioGroup';
-export * from './ScrollArea';
-export * from './Select';
-export * from './SelectInput';
-export * from './Separator';
-export * from './SlideUp';
-export * from './Status';
-export * from './Table';
-export * from './Tabs';
-export * from './Textarea';
-export * from './TimePicker';
-export * from './TiptapEditor';
-export * from './TiptapContent';
-export * from './TiptapInput';
-export * from './Toggle';
-export * from './ToggleGroup';
-export * from './Tooltip';
-export * from './VirtualizedScrollArea';
+export * from './ButtonGroup.js';
+export * from './CopyButton.js';
+export * from './Field.js';
+export * from './Icon.js';
+export * from './InputGroup.js';
+export * from './Popover.js';
+export * from './Popup.js';
+export * from './ScrollArea.js';
+export * from './Separator.js';
+export * from './Status.js';
+export * from './Toggle.js';
+export * from './ToggleGroup.js';
+export * from './Tooltip.js';
+export * from './Calendar.js';
+export * from './CodeEditor.js';
+export * from './ColorInput.js';
+export * from './CheckboxSelect.js';
+export * from './DatePicker.js';
+export * from './Input.js';
+export * from './Lightswitch.js';
+export * from './RadioGroup.js';
+export * from './Textarea.js';
+export * from './TimePicker.js';
+export * from './Tiptap.js';
+export * from './Combobox.js';
+export * from './Dialog.js';
+export * from './EditableTable.js';
+export * from './DropdownMenu.js';
+export * from './Select.js';
+export * from './Tabs.js';
+export * from './CheckboxInput.js';
+export * from './ComboboxInput.js';
+export * from './RadioGroupInput.js';
+export * from './SelectInput.js';
+export { Button, PkButtonElement, type ButtonProps } from './Button.js';
+export { Checkbox, PkCheckboxElement, type CheckboxProps } from './Checkbox.js';
+export { Spinner, PkSpinnerElement, type SpinnerProps } from './Spinner.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAG7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAG5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAG1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/index.js

@@ -1,46 +1,38 @@
-import { Separator } from "./Separator.js";
-import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./ButtonGroup.js";
-import { Calendar, CalendarDayButton } from "./Calendar.js";
-import { CodeEditor } from "./CodeEditor.js";
-import { Checkbox } from "./Checkbox.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, PkButtonGroupElement, PkButtonGroupSeparatorElement, PkButtonGroupTextElement } from "./ButtonGroup.js";
+import { CopyButton, PkCopyButtonElement } from "./CopyButton.js";
+import { Field, PkFieldElement } from "./Field.js";
+import { Icon, PkIconElement } from "./Icon.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, PkInputGroupAddonElement, PkInputGroupButtonElement, PkInputGroupElement, PkInputGroupInputElement, PkInputGroupTextElement, PkInputGroupTextareaElement } from "./InputGroup.js";
+import { PkPopoverElement, Popover } from "./Popover.js";
+import { PkPopupElement, Popup } from "./Popup.js";
+import { PkScrollAreaElement, ScrollArea } from "./ScrollArea.js";
+import { PkSeparatorElement, Separator } from "./Separator.js";
+import { PkStatusElement, Status } from "./Status.js";
+import { PkToggleElement, Toggle } from "./Toggle.js";
+import { PkToggleGroupElement, ToggleGroup } from "./ToggleGroup.js";
+import { PkTooltipElement, Tooltip } from "./Tooltip.js";
+import { Calendar, PkCalendarElement } from "./Calendar.js";
+import { CodeEditor, PkCodeEditorElement } from "./CodeEditor.js";
+import { ColorInput, PkColorInputElement } from "./ColorInput.js";
+import { ALL_VALUE, CheckboxSelect, PkCheckboxSelectElement } from "./CheckboxSelect.js";
+import { DatePicker, PkDatePickerElement } from "./DatePicker.js";
+import { Input } from "./Input.js";
+import { Lightswitch, PkLightswitchElement } from "./Lightswitch.js";
+import { PkRadioElement, PkRadioGroupElement, Radio, RadioGroup } from "./RadioGroup.js";
+import { Textarea } from "./Textarea.js";
+import { PkTimePickerElement, TimePicker } from "./TimePicker.js";
+import { PkTiptapContentElement, PkTiptapEditorElement, PkTiptapInputElement, TiptapContent, TiptapEditor, TiptapInput } from "./Tiptap.js";
+import { Combobox, PkComboboxElement } from "./Combobox.js";
+import { Dialog, PkDialogElement } from "./Dialog.js";
+import { EditableTable, PkEditableTableElement, getCustomCellSlotName } from "./EditableTable.js";
+import { DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, PkDropdownItemElement, PkDropdownLabelElement, PkDropdownMenuElement, PkDropdownSeparatorElement } from "./DropdownMenu.js";
+import { Option, OptionGroup, PkOptionElement, PkOptionGroupElement, PkSelectElement, Select } from "./Select.js";
+import { PkTabElement, PkTabHeadingElement, PkTabPanelElement, PkTabsElement, Tab, TabHeading, TabPanel, Tabs } from "./Tabs.js";
+import { Checkbox, PkCheckboxElement } from "./Checkbox.js";
 import { CheckboxInput } from "./CheckboxInput.js";
-import { ALL_VALUE, CheckboxSelect } from "./CheckboxSelect.js";
-import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./Combobox.js";
 import { ComboboxInput } from "./ComboboxInput.js";
-import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, useCommandState } from "./Command.js";
-import { ColorInput } from "./ColorInput.js";
-import { CopyButton, copyToClipboardWithMeta } from "./CopyButton.js";
-import { DatePicker } from "./DatePicker.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./Dialog.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./DropdownMenu.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip.js";
-import { EditableTable } from "./EditableTable.js";
-import { FadeIn } from "./FadeIn.js";
-import { Input } from "./Input.js";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./InputGroup.js";
-import { Label } from "./Label.js";
-import { Markdown } from "./Markdown.js";
-import { Lightswitch } from "./Lightswitch.js";
-import { Spinner } from "./Spinner.js";
-import { MenuButton } from "./MenuButton.js";
-import { ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger } from "./ModalTabs.js";
-import { PaneTabs, PaneTabsContent, PaneTabsList, PaneTabsTrigger } from "./PaneTabs.js";
-import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./Popover.js";
-import { RadioGroup, RadioGroupItem } from "./RadioGroup.js";
-import { ScrollArea } from "./ScrollArea.js";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./Select.js";
-import { Status } from "./Status.js";
+import { RadioGroupInput } from "./RadioGroupInput.js";
 import { SelectInput } from "./SelectInput.js";
-import { SlideUp } from "./SlideUp.js";
-import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./Table.js";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
-import { Textarea } from "./Textarea.js";
-import { TimePicker } from "./TimePicker.js";
-import { TiptapEditor } from "./TiptapEditor.js";
-import { TiptapContent } from "./TiptapContent.js";
-import { TiptapInput } from "./TiptapInput.js";
-import { Toggle, toggleVariants } from "./Toggle.js";
-import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
-import { VirtualizedScrollArea } from "./VirtualizedScrollArea.js";
-import { Button, buttonVariants } from "./Button.js";
-export { ALL_VALUE, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Checkbox, CheckboxInput, CheckboxSelect, CodeEditor, ColorInput, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHighlightedText, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitiveInput, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableTable, FadeIn, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Lightswitch, Markdown, MenuButton, ModalTabs, ModalTabsContent, ModalTabsList, ModalTabsTrigger, PaneTabs, PaneTabsContent, PaneTabsList, PaneTabsTrigger, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollArea, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SlideUp, Spinner, Status, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimePicker, TiptapContent, TiptapEditor, TiptapInput, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VirtualizedScrollArea, buttonGroupVariants, buttonVariants, copyToClipboardWithMeta, toggleVariants, useComboboxAnchor, useCommandState };
+import { Button, PkButtonElement } from "./Button.js";
+import { PkSpinnerElement, Spinner } from "./Spinner.js";
+export { ALL_VALUE, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, Checkbox, CheckboxInput, CheckboxSelect, CodeEditor, ColorInput, Combobox, ComboboxInput, CopyButton, DatePicker, Dialog, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, EditableTable, Field, Icon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Lightswitch, Option, OptionGroup, PkButtonElement, PkButtonGroupElement, PkButtonGroupSeparatorElement, PkButtonGroupTextElement, PkCalendarElement, PkCheckboxElement, PkCheckboxSelectElement, PkCodeEditorElement, PkColorInputElement, PkComboboxElement, PkCopyButtonElement, PkDatePickerElement, PkDialogElement, PkDropdownItemElement, PkDropdownLabelElement, PkDropdownMenuElement, PkDropdownSeparatorElement, PkEditableTableElement, PkFieldElement, PkIconElement, PkInputGroupAddonElement, PkInputGroupButtonElement, PkInputGroupElement, PkInputGroupInputElement, PkInputGroupTextElement, PkInputGroupTextareaElement, PkLightswitchElement, PkOptionElement, PkOptionGroupElement, PkPopoverElement, PkPopupElement, PkRadioElement, PkRadioGroupElement, PkScrollAreaElement, PkSelectElement, PkSeparatorElement, PkSpinnerElement, PkStatusElement, PkTabElement, PkTabHeadingElement, PkTabPanelElement, PkTabsElement, PkTimePickerElement, PkTiptapContentElement, PkTiptapEditorElement, PkTiptapInputElement, PkToggleElement, PkToggleGroupElement, PkTooltipElement, Popover, Popup, Radio, RadioGroup, RadioGroupInput, ScrollArea, Select, SelectInput, Separator, Spinner, Status, Tab, TabHeading, TabPanel, Tabs, Textarea, TimePicker, TiptapContent, TiptapEditor, TiptapInput, Toggle, ToggleGroup, Tooltip, getCustomCellSlotName };

package/dist/fault/AppFaultBoundary.d.ts

@@ -0,0 +1,18 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { AppFaultRecord } from './types.js';
+type Props = {
+    children: ReactNode;
+    onFault: (fault: Omit<AppFaultRecord, 'timestamp' | 'count'>) => void;
+};
+type State = {
+    hasError: boolean;
+};
+/** Catches React render/lifecycle errors in the builder subtree. */
+export declare class AppFaultBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};
+//# sourceMappingURL=AppFaultBoundary.d.ts.map

package/dist/fault/AppFaultBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFaultBoundary.d.ts","sourceRoot":"","sources":["../../src/fault/AppFaultBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,KAAK,GAAG;IACT,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;CACzE,CAAC;AAEF,KAAK,KAAK,GAAG;IACT,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oEAAoE;AACpE,qBAAa,gBAAiB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACzD,KAAK,EAAE,KAAK,CAAuB;IAEnC,MAAM,CAAC,wBAAwB,IAAI,KAAK;IAIxC,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI;IAQtD,MAAM,IAAI,SAAS;CAOtB"}

package/dist/fault/AppFaultBoundary.js

@@ -0,0 +1,24 @@
+import { Component } from "react";
+//#region src/fault/AppFaultBoundary.tsx
+/** Catches React render/lifecycle errors in the builder subtree. */
+var AppFaultBoundary = class extends Component {
+	state = { hasError: false };
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	componentDidCatch(error, info) {
+		this.props.onFault({
+			kind: "react",
+			message: error.message,
+			stack: info.componentStack ? `${error.stack ?? ""}\n\n${info.componentStack}` : error.stack
+		});
+	}
+	render() {
+		if (this.state.hasError) return null;
+		return this.props.children;
+	}
+};
+//#endregion
+export { AppFaultBoundary };
+
+//# sourceMappingURL=AppFaultBoundary.js.map

package/dist/fault/AppFaultBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFaultBoundary.js","names":[],"sources":["../../src/fault/AppFaultBoundary.tsx"],"sourcesContent":["import { Component, type ErrorInfo, type ReactNode } from 'react';\n\nimport type { AppFaultRecord } from './types.js';\n\ntype Props = {\n    children: ReactNode;\n    onFault: (fault: Omit<AppFaultRecord, 'timestamp' | 'count'>) => void;\n};\n\ntype State = {\n    hasError: boolean;\n};\n\n/** Catches React render/lifecycle errors in the builder subtree. */\nexport class AppFaultBoundary extends Component<Props, State> {\n    state: State = { hasError: false };\n\n    static getDerivedStateFromError(): State {\n        return { hasError: true };\n    }\n\n    componentDidCatch(error: Error, info: ErrorInfo): void {\n        this.props.onFault({\n            kind: 'react',\n            message: error.message,\n            stack: info.componentStack ? `${error.stack ?? ''}\\n\\n${info.componentStack}` : error.stack,\n        });\n    }\n\n    render(): ReactNode {\n        if (this.state.hasError) {\n            return null;\n        }\n\n        return this.props.children;\n    }\n}\n"],"mappings":";;;AAcA,IAAa,mBAAb,cAAsC,UAAwB;CAC1D,QAAe,EAAE,UAAU,OAAO;CAElC,OAAO,2BAAkC;AACrC,SAAO,EAAE,UAAU,MAAM;;CAG7B,kBAAkB,OAAc,MAAuB;AACnD,OAAK,MAAM,QAAQ;GACf,MAAM;GACN,SAAS,MAAM;GACf,OAAO,KAAK,iBAAiB,GAAG,MAAM,SAAS,GAAG,MAAM,KAAK,mBAAmB,MAAM;GACzF,CAAC;;CAGN,SAAoB;AAChB,MAAI,KAAK,MAAM,SACX,QAAO;AAGX,SAAO,KAAK,MAAM"}