@verbb/plugin-kit-react 1.0.10 → 2.0.0

package/dist/components/Popover.js

@@ -1,71 +1,52 @@
-import { cn } from "../utils/classes.js";
-import { getPortalClassName, getPortalContainer } from "../utils/portal.js";
-import "../utils/index.js";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import { isHostEvent } from "../utils/isHostEvent.js";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
-import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { PkPopover } from "@verbb/plugin-kit-web/components/popover/pk-popover.js";
 //#region src/components/Popover.tsx
-function Popover({ ariaLabel = "Popover", ...props }) {
-	return /* @__PURE__ */ jsx(Popover$1.Root, {
-		"data-slot": "popover",
-		ariaLabel,
-		...props
+var PkPopoverElement = createPluginKitComponent({
+	tagName: "pk-popover",
+	elementClass: PkPopover,
+	react: React,
+	events: {
+		onPkShow: "pk-show",
+		onPkAfterShow: "pk-after-show",
+		onPkHide: "pk-hide",
+		onPkAfterHide: "pk-after-hide",
+		onPkOpenChange: "pk-open-change"
+	}
+});
+var bindHostEvent = (handler) => {
+	if (!handler) return;
+	return (event) => {
+		if (!isHostEvent(event)) return;
+		handler(event);
+	};
+};
+/**
+* React facade over `<pk-popover>`. Behavior and styles live in the web component.
+* Nested select/tooltip/popover `pk-open-change` is ignored — same as `Dialog`.
+*/
+var Popover = React.forwardRef(function Popover(props, ref) {
+	const { open, flush, withArrow, onPkShow, onPkAfterShow, onPkHide, onPkAfterHide, onPkOpenChange, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkPopoverElement, {
+		ref,
+		...rest,
+		...open !== void 0 ? { open } : {},
+		...trueBooleanProps(["flush", "withArrow"], {
+			flush,
+			withArrow
+		}),
+		...onPkShow ? { onPkShow: bindHostEvent(onPkShow) } : {},
+		...onPkAfterShow ? { onPkAfterShow: bindHostEvent(onPkAfterShow) } : {},
+		...onPkHide ? { onPkHide: bindHostEvent(onPkHide) } : {},
+		...onPkAfterHide ? { onPkAfterHide: bindHostEvent(onPkAfterHide) } : {},
+		...onPkOpenChange ? { onPkOpenChange: bindHostEvent(onPkOpenChange) } : {}
 	});
-}
-function PopoverTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
-		"data-slot": "popover-trigger",
-		...props
-	});
-}
-function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, positionMethod, collisionBoundary, collisionPadding, sticky, collisionAvoidance, portalClassName, portalContainer, ...props }) {
-	const resolvedPortalClassName = getPortalClassName(portalClassName);
-	const resolvedPortalContainer = getPortalContainer(portalContainer);
-	const resolvedPositionMethod = positionMethod ?? (resolvedPortalContainer instanceof ShadowRoot ? "fixed" : void 0);
-	return /* @__PURE__ */ jsx(Popover$1.Portal, {
-		"data-slot": "popover-portal",
-		className: resolvedPortalClassName,
-		container: resolvedPortalContainer,
-		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
-			align,
-			alignOffset,
-			side,
-			sideOffset,
-			positionMethod: resolvedPositionMethod,
-			collisionBoundary,
-			collisionPadding,
-			sticky,
-			collisionAvoidance,
-			className: "isolate z-50",
-			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
-				"data-slot": "popover-content",
-				className: cn("z-50 w-72 rounded-md outline-hidden will-change-[transform,opacity]", "bg-white p-4", "shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]", "focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "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=top]:slide-in-from-bottom-2", className),
-				...props
-			})
-		})
-	});
-}
-function PopoverHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "popover-header",
-		className: cn("flex flex-col gap-0.5 text-sm", className),
-		...props
-	});
-}
-function PopoverTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Popover$1.Title, {
-		"data-slot": "popover-title",
-		className: cn("font-medium text-sm", className),
-		...props
-	});
-}
-function PopoverDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Popover$1.Description, {
-		"data-slot": "popover-description",
-		className: cn("text-gray-500", className),
-		...props
-	});
-}
+});
+Popover.displayName = "Popover";
 //#endregion
-export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+export { PkPopoverElement, Popover };
 
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../src/components/Popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nfunction Popover({ ariaLabel = 'Popover', ...props }: PopoverPrimitive.Root.Props) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" ariaLabel={ariaLabel} {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n    return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n    className,\n    align = 'center',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    positionMethod,\n    collisionBoundary,\n    collisionPadding,\n    sticky,\n    collisionAvoidance,\n    portalClassName,\n    portalContainer,\n    ...props\n}: PopoverPrimitive.Popup.Props &\n    Pick<\n        PopoverPrimitive.Positioner.Props,\n        | 'align'\n        | 'alignOffset'\n        | 'side'\n        | 'sideOffset'\n        | 'positionMethod'\n        | 'collisionBoundary'\n        | 'collisionPadding'\n        | 'sticky'\n        | 'collisionAvoidance'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n    const resolvedPositionMethod = positionMethod ?? (\n        resolvedPortalContainer instanceof ShadowRoot ? 'fixed' : undefined\n    );\n\n    return (\n        <PopoverPrimitive.Portal\n            data-slot=\"popover-portal\"\n            className={resolvedPortalClassName}\n            container={resolvedPortalContainer}\n        >\n            <PopoverPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                positionMethod={resolvedPositionMethod}\n                collisionBoundary={collisionBoundary}\n                collisionPadding={collisionPadding}\n                sticky={sticky}\n                collisionAvoidance={collisionAvoidance}\n                className=\"isolate z-50\"\n            >\n                <PopoverPrimitive.Popup\n                    data-slot=\"popover-content\"\n                    className={cn(\n                        // Reset and base styles\n                        'z-50 w-72 rounded-md outline-hidden will-change-[transform,opacity]',\n\n                        // Themed styles (backgrounds, colors, shadows, spacing)\n                        'bg-white p-4',\n                        'shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]',\n                        'focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]',\n\n                        // Animation classes for open/closed states\n                        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n\n                        // Animation classes for side-based slide-ins\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=top]:slide-in-from-bottom-2',\n\n                        // Additional custom classes passed in as props\n                        className,\n                    )}\n                    {...props}\n                />\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"popover-header\"\n            className={cn(\n                'flex flex-col gap-0.5 text-sm',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n    return (\n        <PopoverPrimitive.Title\n            data-slot=\"popover-title\"\n            className={cn(\n                'font-medium text-sm',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction PopoverDescription({\n    className,\n    ...props\n}: PopoverPrimitive.Description.Props) {\n    return (\n        <PopoverPrimitive.Description\n            data-slot=\"popover-description\"\n            className={cn(\n                'text-gray-500',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\n\nexport {\n    Popover,\n    PopoverContent,\n    PopoverDescription,\n    PopoverHeader,\n    PopoverTitle,\n    PopoverTrigger,\n};\n"],"mappings":";;;;;;AAIA,SAAS,QAAQ,EAAE,YAAY,WAAW,GAAG,SAAsC;AAC/E,QAAO,oBAAC,UAAiB,MAAlB;EAAuB,aAAU;EAAqB;EAAW,GAAI;EAAS,CAAA;;AAGzF,SAAS,eAAe,EAAE,GAAG,SAAyC;AAClE,QAAO,oBAAC,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG9E,SAAS,eAAe,EACpB,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,gBACA,mBACA,kBACA,QACA,oBACA,iBACA,iBACA,GAAG,SAgBA;CACH,MAAM,0BAA0B,mBAAmB,gBAAgB;CACnE,MAAM,0BAA0B,mBAAmB,gBAAgB;CACnE,MAAM,yBAAyB,mBAC3B,mCAAmC,aAAa,UAAU,KAAA;AAG9D,QACI,oBAAC,UAAiB,QAAlB;EACI,aAAU;EACV,WAAW;EACX,WAAW;YAEX,oBAAC,UAAiB,YAAlB;GACW;GACM;GACP;GACM;GACZ,gBAAgB;GACG;GACD;GACV;GACY;GACpB,WAAU;aAEV,oBAAC,UAAiB,OAAlB;IACI,aAAU;IACV,WAAW,GAEP,uEAGA,gBACA,yFACA,+FAGA,gEACA,8DACA,gEAGA,0CACA,0CACA,0CACA,0CAGA,UACH;IACD,GAAI;IACN,CAAA;GACwB,CAAA;EACR,CAAA;;AAIlC,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AACzE,QACI,oBAAC,OAAD;EACI,aAAU;EACV,WAAW,GACP,iCAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;AACzE,QACI,oBAAC,UAAiB,OAAlB;EACI,aAAU;EACV,WAAW,GACP,uBAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,mBAAmB,EACxB,WACA,GAAG,SACgC;AACnC,QACI,oBAAC,UAAiB,aAAlB;EACI,aAAU;EACV,WAAW,GACP,iBAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkPopover } from '@verbb/plugin-kit-web/components/popover/pk-popover.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\nimport { isHostEvent } from '../utils/isHostEvent.js';\n\nconst PkPopoverElement = createPluginKitComponent({\n    tagName: 'pk-popover',\n    elementClass: PkPopover,\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\ntype PkPopoverElementProps = React.ComponentProps<typeof PkPopoverElement>;\n\nconst bindHostEvent = <T extends (event: Event) => void>(handler: T | undefined) => {\n    if (!handler) {\n        return undefined;\n    }\n\n    return (event: Event) => {\n        if (!isHostEvent(event)) {\n            return;\n        }\n        handler(event);\n    };\n};\n\n/**\n * React facade over `<pk-popover>`. Behavior and styles live in the web component.\n * Nested select/tooltip/popover `pk-open-change` is ignored — same as `Dialog`.\n */\nexport const Popover = React.forwardRef<PkPopover, PkPopoverElementProps>(function Popover(props, ref) {\n    const {\n        open,\n        flush,\n        withArrow,\n        onPkShow,\n        onPkAfterShow,\n        onPkHide,\n        onPkAfterHide,\n        onPkOpenChange,\n        ...rest\n    } = props;\n\n    return (\n        <PkPopoverElement\n            ref={ref}\n            {...rest}\n            {...(open !== undefined ? { open } : {})}\n            {...trueBooleanProps(['flush', 'withArrow'] as const, {\n                flush,\n                withArrow,\n            })}\n            {...(onPkShow ? { onPkShow: bindHostEvent(onPkShow) } : {})}\n            {...(onPkAfterShow ? { onPkAfterShow: bindHostEvent(onPkAfterShow) } : {})}\n            {...(onPkHide ? { onPkHide: bindHostEvent(onPkHide) } : {})}\n            {...(onPkAfterHide ? { onPkAfterHide: bindHostEvent(onPkAfterHide) } : {})}\n            {...(onPkOpenChange ? { onPkOpenChange: bindHostEvent(onPkOpenChange) } : {})}\n        />\n    );\n});\n\nPopover.displayName = 'Popover';\n\nexport { PkPopoverElement };\nexport type PopoverProps = PkPopoverElementProps;\n"],"mappings":";;;;;;;AAOA,IAAM,mBAAmB,yBAAyB;CAC9C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EACf,gBAAgB;EACnB;CACJ,CAAC;AAIF,IAAM,iBAAmD,YAA2B;AAChF,KAAI,CAAC,QACD;AAGJ,SAAQ,UAAiB;AACrB,MAAI,CAAC,YAAY,MAAM,CACnB;AAEJ,UAAQ,MAAM;;;;;;;AAQtB,IAAa,UAAU,MAAM,WAA6C,SAAS,QAAQ,OAAO,KAAK;CACnG,MAAM,EACF,MACA,OACA,WACA,UACA,eACA,UACA,eACA,gBACA,GAAG,SACH;AAEJ,QACI,oBAAC,kBAAD;EACS;EACL,GAAI;EACJ,GAAK,SAAS,KAAA,IAAY,EAAE,MAAM,GAAG,EAAE;EACvC,GAAI,iBAAiB,CAAC,SAAS,YAAY,EAAW;GAClD;GACA;GACH,CAAC;EACF,GAAK,WAAW,EAAE,UAAU,cAAc,SAAS,EAAE,GAAG,EAAE;EAC1D,GAAK,gBAAgB,EAAE,eAAe,cAAc,cAAc,EAAE,GAAG,EAAE;EACzE,GAAK,WAAW,EAAE,UAAU,cAAc,SAAS,EAAE,GAAG,EAAE;EAC1D,GAAK,gBAAgB,EAAE,eAAe,cAAc,cAAc,EAAE,GAAG,EAAE;EACzE,GAAK,iBAAiB,EAAE,gBAAgB,cAAc,eAAe,EAAE,GAAG,EAAE;EAC9E,CAAA;EAER;AAEF,QAAQ,cAAc"}

package/dist/components/Popup.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { PkPopup, PkPopupPlacement, PkPopupVirtualElement } from '@verbb/plugin-kit-web/components/popup/pk-popup.js';
+/** React facade over `<pk-popup>` (low-level positioning primitive). Behavior lives in the web component. */
+export declare const PkPopupElement: import('@lit/react').ReactWebComponent<PkPopup, {
+    onPkReposition: string;
+    onPkPopupContentSync: string;
+}>;
+export declare const Popup: import('@lit/react').ReactWebComponent<PkPopup, {
+    onPkReposition: string;
+    onPkPopupContentSync: string;
+}>;
+export type PopupProps = React.ComponentProps<typeof PkPopupElement>;
+export type { PkPopupPlacement, PkPopupVirtualElement };
+//# sourceMappingURL=Popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../src/components/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oDAAoD,CAAC;AAEhI,6GAA6G;AAC7G,eAAO,MAAM,cAAc;;;EAQzB,CAAC;AAEH,eAAO,MAAM,KAAK;;;EAAiB,CAAC;AACpC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/Popup.js

@@ -0,0 +1,19 @@
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkPopup } from "@verbb/plugin-kit-web/components/popup/pk-popup.js";
+//#region src/components/Popup.tsx
+/** React facade over `<pk-popup>` (low-level positioning primitive). Behavior lives in the web component. */
+var PkPopupElement = createPluginKitComponent({
+	tagName: "pk-popup",
+	elementClass: PkPopup,
+	react: React,
+	events: {
+		onPkReposition: "pk-reposition",
+		onPkPopupContentSync: "pk-popup-content-sync"
+	}
+});
+var Popup = PkPopupElement;
+//#endregion
+export { PkPopupElement, Popup };
+
+//# sourceMappingURL=Popup.js.map

package/dist/components/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":[],"sources":["../../src/components/Popup.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkPopup, type PkPopupPlacement, type PkPopupVirtualElement } from '@verbb/plugin-kit-web/components/popup/pk-popup.js';\n\n/** React facade over `<pk-popup>` (low-level positioning primitive). Behavior lives in the web component. */\nexport const PkPopupElement = createPluginKitComponent({\n    tagName: 'pk-popup',\n    elementClass: PkPopup,\n    react: React,\n    events: {\n        onPkReposition: 'pk-reposition',\n        onPkPopupContentSync: 'pk-popup-content-sync',\n    },\n});\n\nexport const Popup = PkPopupElement;\nexport type PopupProps = React.ComponentProps<typeof PkPopupElement>;\nexport type { PkPopupPlacement, PkPopupVirtualElement };\n"],"mappings":";;;;;AAKA,IAAa,iBAAiB,yBAAyB;CACnD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,gBAAgB;EAChB,sBAAsB;EACzB;CACJ,CAAC;AAEF,IAAa,QAAQ"}

package/dist/components/RadioGroup.d.ts

@@ -1,6 +1,27 @@
-import { Radio as RadioPrimitive } from '@base-ui/react/radio';
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
-declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react/jsx-runtime").JSX.Element;
-declare function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-export { RadioGroup, RadioGroupItem };
+import { default as React } from 'react';
+import { PkRadio } from '@verbb/plugin-kit-web/components/radio-group/pk-radio.js';
+import { PkRadioGroup, PkRadioGroupOrientation } from '@verbb/plugin-kit-web/components/radio-group/pk-radio-group.js';
+declare const PkRadioGroupElement: import('@lit/react').ReactWebComponent<PkRadioGroup, {
+    onPkChange: string;
+    onInput: string;
+    onChange: string;
+}>;
+declare const PkRadioElement: import('@lit/react').ReactWebComponent<PkRadio, {
+    onPkRadioSelect: string;
+}>;
+type PkRadioGroupElementProps = React.ComponentProps<typeof PkRadioGroupElement>;
+type PkRadioElementProps = React.ComponentProps<typeof PkRadioElement>;
+/** React facade over `<pk-radio-group>`. Behavior and styles live in the web component. */
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkRadioGroup>, "defaultValue" | "onChange" | "onInput" | "form" | "input" | "label" | "value" | "orientation" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "instructions" | "required" | "name" | "invalid" | "onPkChange" | "assumeInteractionOn" | "validators" | "customError" | "valueHasChanged" | "hasInteracted" | "formResetCallback" | "formDisabledCallback" | "formStateRestoreCallback" | "labels" | "validity" | "willValidate" | "validationMessage" | "getForm" | "checkValidity" | "reportValidity" | "resetValidity" | "setCustomValidity"> & {
+    onPkChange?: ((e: Event) => void) | undefined;
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkRadioGroup, keyof HTMLElement>> & React.RefAttributes<PkRadioGroup>, "ref"> & React.RefAttributes<PkRadioGroup>>;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkRadio>, "value" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "required" | "invalid" | "checked" | "onPkRadioSelect" | "forceDisabled" | "focusControl"> & {
+    onPkRadioSelect?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkRadio, keyof HTMLElement>> & React.RefAttributes<PkRadio>, "ref"> & React.RefAttributes<PkRadio>>;
+export { PkRadioGroupElement, PkRadioElement };
+export type RadioGroupProps = PkRadioGroupElementProps;
+export type RadioProps = PkRadioElementProps;
+export type { PkRadioGroupOrientation };
 //# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAO/E,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,KAAK,2CAarE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,2CAgDzE;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,0DAA0D,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,KAAK,uBAAuB,EAAE,MAAM,gEAAgE,CAAC;AAI5H,QAAA,MAAM,mBAAmB;;;;EASvB,CAAC;AAEH,QAAA,MAAM,cAAc;;EAOlB,CAAC;AAEH,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACjF,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAEvE,2FAA2F;AAC3F,eAAO,MAAM,UAAU;;;;mIAYrB,CAAC;AAIH,eAAO,MAAM,KAAK;;oHAchB,CAAC;AAIH,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,mBAAmB,CAAC;AAC7C,YAAY,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/RadioGroup.js

@@ -1,34 +1,64 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircle } from "@fortawesome/pro-solid-svg-icons";
-import { Radio } from "@base-ui/react/radio";
-import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { PkRadio } from "@verbb/plugin-kit-web/components/radio-group/pk-radio.js";
+import { PkRadioGroup } from "@verbb/plugin-kit-web/components/radio-group/pk-radio-group.js";
 //#region src/components/RadioGroup.tsx
-function RadioGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx(RadioGroup$1, {
-		"data-slot": "radio-group",
-		className: cn("grid gap-1.5", className),
-		...props
+var PkRadioGroupElement = createPluginKitComponent({
+	tagName: "pk-radio-group",
+	elementClass: PkRadioGroup,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onInput: "input",
+		onChange: "change"
+	}
+});
+var PkRadioElement = createPluginKitComponent({
+	tagName: "pk-radio",
+	elementClass: PkRadio,
+	react: React,
+	events: { onPkRadioSelect: "pk-radio-select" }
+});
+/** React facade over `<pk-radio-group>`. Behavior and styles live in the web component. */
+var RadioGroup = forwardRef(function RadioGroup(props, ref) {
+	const { disabled, invalid, required, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkRadioGroupElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"required"
+		], {
+			disabled,
+			invalid,
+			required
+		})
 	});
-}
-function RadioGroupItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Radio.Root, {
-		"data-slot": "radio-group-item",
-		className: cn("peer cursor-pointer aspect-square shrink-0 rounded-full outline-none border", "size-4 border-slate-400", "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)]", "disabled:cursor-not-allowed disabled:opacity-50", "data-checked:bg-slate-50 data-checked:text-[#1f2933]", className),
-		...props,
-		children: /* @__PURE__ */ jsx(Radio.Indicator, {
-			"data-slot": "radio-group-indicator",
-			className: cn("flex items-center justify-center h-full w-full"),
-			children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
-				icon: faCircle,
-				className: cn("size-2 fill-current text-current")
-			})
+});
+RadioGroup.displayName = "RadioGroup";
+var Radio = forwardRef(function Radio(props, ref) {
+	const { disabled, invalid, required, checked, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkRadioElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"required",
+			"checked"
+		], {
+			disabled,
+			invalid,
+			required,
+			checked
 		})
 	});
-}
+});
+Radio.displayName = "Radio";
 //#endregion
-export { RadioGroup, RadioGroupItem };
+export { PkRadioElement, PkRadioGroupElement, Radio, RadioGroup };
 
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../src/components/RadioGroup.tsx"],"sourcesContent":["import { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCircle } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n    return (\n        <RadioGroupPrimitive\n            data-slot=\"radio-group\"\n            className={cn(\n                // Layout and spacing\n                'grid gap-1.5',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n    return (\n        <RadioPrimitive.Root\n            data-slot=\"radio-group-item\"\n            className={cn(\n                // Layout, shape, and borders\n                // 'aspect-square h-4 w-4 rounded-full border border-primary',\n\n                // // Text and focus styles\n                // 'text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n\n                // // Disabled state\n                // 'disabled:cursor-not-allowed disabled:opacity-50',\n\n                // Reset\n                'peer cursor-pointer aspect-square shrink-0 rounded-full outline-none border',\n\n                // Themes\n                'size-4 border-slate-400',\n\n                // States\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                'disabled:cursor-not-allowed disabled:opacity-50',\n                'data-checked:bg-slate-50 data-checked:text-[#1f2933]',\n\n                className,\n            )}\n            {...props}\n        >\n            <RadioPrimitive.Indicator\n                data-slot=\"radio-group-indicator\"\n                className={cn(\n                    // Flex alignment for the indicator\n                    'flex items-center justify-center h-full w-full',\n                )}\n            >\n                <FontAwesomeIcon\n                    icon={faCircle}\n                    className={cn(\n                        // Size and color of the indicator\n                        'size-2 fill-current text-current',\n                    )}\n                />\n            </RadioPrimitive.Indicator>\n        </RadioPrimitive.Root>\n    );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAoC;AACpE,QACI,oBAAC,cAAD;EACI,aAAU;EACV,WAAW,GAEP,gBAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,eAAe,EAAE,WAAW,GAAG,SAAoC;AACxE,QACI,oBAAC,MAAe,MAAhB;EACI,aAAU;EACV,WAAW,GAWP,+EAGA,2BAGA,yIACA,yJAEA,mDACA,wDAEA,UACH;EACD,GAAI;YAEJ,oBAAC,MAAe,WAAhB;GACI,aAAU;GACV,WAAW,GAEP,iDACH;aAED,oBAAC,iBAAD;IACI,MAAM;IACN,WAAW,GAEP,mCACH;IACH,CAAA;GACqB,CAAA;EACT,CAAA"}
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../src/components/RadioGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkRadio } from '@verbb/plugin-kit-web/components/radio-group/pk-radio.js';\nimport { PkRadioGroup, type PkRadioGroupOrientation } from '@verbb/plugin-kit-web/components/radio-group/pk-radio-group.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkRadioGroupElement = createPluginKitComponent({\n    tagName: 'pk-radio-group',\n    elementClass: PkRadioGroup,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onInput: 'input',\n        onChange: 'change',\n    },\n});\n\nconst PkRadioElement = createPluginKitComponent({\n    tagName: 'pk-radio',\n    elementClass: PkRadio,\n    react: React,\n    events: {\n        onPkRadioSelect: 'pk-radio-select',\n    },\n});\n\ntype PkRadioGroupElementProps = React.ComponentProps<typeof PkRadioGroupElement>;\ntype PkRadioElementProps = React.ComponentProps<typeof PkRadioElement>;\n\n/** React facade over `<pk-radio-group>`. Behavior and styles live in the web component. */\nexport const RadioGroup = forwardRef<PkRadioGroup, PkRadioGroupElementProps>(function RadioGroup(props, ref) {\n    const {\n        disabled, invalid, required, ...rest\n    } = props;\n\n    return (\n        <PkRadioGroupElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'invalid', 'required'], { disabled, invalid, required })}\n        />\n    );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport const Radio = forwardRef<PkRadio, PkRadioElementProps>(function Radio(props, ref) {\n    const {\n        disabled, invalid, required, checked, ...rest\n    } = props;\n\n    return (\n        <PkRadioElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'invalid', 'required', 'checked'], {\n                disabled, invalid, required, checked,\n            })}\n        />\n    );\n});\n\nRadio.displayName = 'Radio';\n\nexport { PkRadioGroupElement, PkRadioElement };\nexport type RadioGroupProps = PkRadioGroupElementProps;\nexport type RadioProps = PkRadioElementProps;\nexport type { PkRadioGroupOrientation };\n"],"mappings":";;;;;;;AAOA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,SAAS;EACT,UAAU;EACb;CACJ,CAAC;AAEF,IAAM,iBAAiB,yBAAyB;CAC5C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ,EACJ,iBAAiB,mBACpB;CACJ,CAAC;;AAMF,IAAa,aAAa,WAAmD,SAAS,WAAW,OAAO,KAAK;CACzG,MAAM,EACF,UAAU,SAAS,UAAU,GAAG,SAChC;AAEJ,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAW;GAAW,EAAE;GAAE;GAAU;GAAS;GAAU,CAAC;EAC5F,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,IAAa,QAAQ,WAAyC,SAAS,MAAM,OAAO,KAAK;CACrF,MAAM,EACF,UAAU,SAAS,UAAU,SAAS,GAAG,SACzC;AAEJ,QACI,oBAAC,gBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAW;GAAY;GAAU,EAAE;GACjE;GAAU;GAAS;GAAU;GAChC,CAAC;EACJ,CAAA;EAER;AAEF,MAAM,cAAc"}

package/dist/components/RadioGroupInput.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { RadioGroupProps } from './RadioGroup.js';
+export interface RadioGroupInputOption {
+    value: unknown;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupInputProps extends Omit<RadioGroupProps, 'children' | 'onChange' | 'onPkChange' | 'value'> {
+    options: RadioGroupInputOption[];
+    value?: unknown;
+    onChange?: (value: unknown) => void;
+    onPkChange?: RadioGroupProps['onPkChange'];
+}
+/**
+ * Convenience facade over `<pk-radio-group>` with an `options[]` array plus controlled
+ * `value`/`onChange`, instead of slotted `<pk-radio>` children the raw `RadioGroup` exposes.
+ */
+export declare function RadioGroupInput({ options, value, onChange, onPkChange, ...props }: RadioGroupInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroupInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupInput.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroupInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,OAAO,CAAC;IACjH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC9C;AAMD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,UAAU,EACV,GAAG,KAAK,EACX,EAAE,oBAAoB,2CA+BtB"}

package/dist/components/RadioGroupInput.js

@@ -0,0 +1,35 @@
+import { readPkValueDetail } from "../utils/pk-change.js";
+import { Radio, RadioGroup } from "./RadioGroup.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/RadioGroupInput.tsx
+var toStringValue = (value) => {
+	return value === void 0 || value === null ? "" : String(value);
+};
+/**
+* Convenience facade over `<pk-radio-group>` with an `options[]` array plus controlled
+* `value`/`onChange`, instead of slotted `<pk-radio>` children the raw `RadioGroup` exposes.
+*/
+function RadioGroupInput({ options, value, onChange, onPkChange, ...props }) {
+	const handlePkChange = (event) => {
+		onPkChange?.(event);
+		if (!onChange) return;
+		const nextValue = readPkValueDetail(event);
+		const match = options.find((option) => toStringValue(option.value) === nextValue);
+		onChange(match ? match.value : nextValue);
+	};
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		...props,
+		value: toStringValue(value),
+		onPkChange: handlePkChange,
+		children: options.map((option) => /* @__PURE__ */ jsx(Radio, {
+			value: toStringValue(option.value),
+			disabled: option.disabled,
+			children: option.label
+		}, toStringValue(option.value)))
+	});
+}
+//#endregion
+export { RadioGroupInput };
+
+//# sourceMappingURL=RadioGroupInput.js.map

package/dist/components/RadioGroupInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupInput.js","names":[],"sources":["../../src/components/RadioGroupInput.tsx"],"sourcesContent":["import React from 'react';\n\nimport { readPkValueDetail } from '../utils/pk-change.js';\nimport { Radio, RadioGroup, type RadioGroupProps } from './RadioGroup.js';\n\nexport interface RadioGroupInputOption {\n    value: unknown;\n    label: React.ReactNode;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupInputProps extends Omit<RadioGroupProps, 'children' | 'onChange' | 'onPkChange' | 'value'> {\n    options: RadioGroupInputOption[];\n    value?: unknown;\n    onChange?: (value: unknown) => void;\n    onPkChange?: RadioGroupProps['onPkChange'];\n}\n\nconst toStringValue = (value: unknown): string => {\n    return value === undefined || value === null ? '' : String(value);\n};\n\n/**\n * Convenience facade over `<pk-radio-group>` with an `options[]` array plus controlled\n * `value`/`onChange`, instead of slotted `<pk-radio>` children the raw `RadioGroup` exposes.\n */\nexport function RadioGroupInput({\n    options,\n    value,\n    onChange,\n    onPkChange,\n    ...props\n}: RadioGroupInputProps) {\n    const handlePkChange = (event: Event): void => {\n        onPkChange?.(event as Parameters<NonNullable<RadioGroupProps['onPkChange']>>[0]);\n\n        if (!onChange) {\n            return;\n        }\n\n        const nextValue = readPkValueDetail(event);\n        const match = options.find((option) => toStringValue(option.value) === nextValue);\n\n        onChange(match ? match.value : nextValue);\n    };\n\n    return (\n        <RadioGroup\n            {...props}\n            value={toStringValue(value)}\n            onPkChange={handlePkChange}\n        >\n            {options.map((option) => (\n                <Radio\n                    key={toStringValue(option.value)}\n                    value={toStringValue(option.value)}\n                    disabled={option.disabled}\n                >\n                    {option.label}\n                </Radio>\n            ))}\n        </RadioGroup>\n    );\n}\n"],"mappings":";;;;;AAkBA,IAAM,iBAAiB,UAA2B;AAC9C,QAAO,UAAU,KAAA,KAAa,UAAU,OAAO,KAAK,OAAO,MAAM;;;;;;AAOrE,SAAgB,gBAAgB,EAC5B,SACA,OACA,UACA,YACA,GAAG,SACkB;CACrB,MAAM,kBAAkB,UAAuB;AAC3C,eAAa,MAAmE;AAEhF,MAAI,CAAC,SACD;EAGJ,MAAM,YAAY,kBAAkB,MAAM;EAC1C,MAAM,QAAQ,QAAQ,MAAM,WAAW,cAAc,OAAO,MAAM,KAAK,UAAU;AAEjF,WAAS,QAAQ,MAAM,QAAQ,UAAU;;AAG7C,QACI,oBAAC,YAAD;EACI,GAAI;EACJ,OAAO,cAAc,MAAM;EAC3B,YAAY;YAEX,QAAQ,KAAK,WACV,oBAAC,OAAD;GAEI,OAAO,cAAc,OAAO,MAAM;GAClC,UAAU,OAAO;aAEhB,OAAO;GACJ,EALC,cAAc,OAAO,MAAM,CAK5B,CACV;EACO,CAAA"}

package/dist/components/ScrollArea.d.ts

@@ -1,16 +1,12 @@
-import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
-import { RefObject } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const scrollAreaVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ScrollAreaSize = NonNullable<VariantProps<typeof scrollAreaVariants>['size']>;
-declare function ScrollArea({ className, children, size, orientation, viewPortClassName, viewPortRef, contentClassName, ...props }: ScrollAreaPrimitive.Root.Props & VariantProps<typeof scrollAreaVariants> & {
-    orientation?: 'horizontal' | 'vertical';
-    size?: ScrollAreaSize;
-    viewPortClassName?: string;
-    viewPortRef?: RefObject<HTMLDivElement>;
-    contentClassName?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export { ScrollArea };
+import { default as React } from 'react';
+import { PkScrollArea, PkScrollAreaOrientation, PkScrollAreaSize } from '@verbb/plugin-kit-web/components/scroll-area/pk-scroll-area.js';
+/** React facade over `<pk-scroll-area>`. Behavior and styles live in the web component. */
+export declare const PkScrollAreaElement: import('@lit/react').ReactWebComponent<PkScrollArea, {
+    onPkScroll: string;
+}>;
+export declare const ScrollArea: import('@lit/react').ReactWebComponent<PkScrollArea, {
+    onPkScroll: string;
+}>;
+export type ScrollAreaProps = React.ComponentProps<typeof PkScrollAreaElement>;
+export type { PkScrollAreaOrientation, PkScrollAreaSize };
 //# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,QAAA,MAAM,kBAAkB;;8EAWtB,CAAC;AAEH,KAAK,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEnF,iBAAS,UAAU,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,IAAgB,EAChB,WAAwB,EACxB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAC1E,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B,2CA8CA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,KAAK,uBAAuB,EAAE,KAAK,gBAAgB,EAAE,MAAM,gEAAgE,CAAC;AAEnJ,2FAA2F;AAC3F,eAAO,MAAM,mBAAmB;;EAO9B,CAAC;AAEH,eAAO,MAAM,UAAU;;EAAsB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ScrollArea.js

@@ -1,47 +1,16 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import React from "react";
+import { PkScrollArea } from "@verbb/plugin-kit-web/components/scroll-area/pk-scroll-area.js";
 //#region src/components/ScrollArea.tsx
-var scrollAreaVariants = cva("", {
-	variants: { size: {
-		xs: "data-[orientation=horizontal]:h-[6px] data-[orientation=vertical]:w-[6px] ",
-		sm: "data-[orientation=horizontal]:h-[8px] data-[orientation=vertical]:w-[8px] ",
-		default: "data-[orientation=horizontal]:h-[10px] data-[orientation=vertical]:w-[10px] "
-	} },
-	defaultVariants: { size: "default" }
+/** React facade over `<pk-scroll-area>`. Behavior and styles live in the web component. */
+var PkScrollAreaElement = createPluginKitComponent({
+	tagName: "pk-scroll-area",
+	elementClass: PkScrollArea,
+	react: React,
+	events: { onPkScroll: "pk-scroll" }
 });
-function ScrollArea({ className, children, size = "default", orientation = "vertical", viewPortClassName, viewPortRef, contentClassName, ...props }) {
-	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
-		"data-slot": "scroll-area",
-		className,
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
-				"data-slot": "scroll-area-viewport",
-				ref: viewPortRef,
-				className: cn("focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", viewPortClassName),
-				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, {
-					"data-slot": "scroll-area-content",
-					className: contentClassName,
-					children
-				})
-			}),
-			/* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
-				"data-slot": "scroll-area-scrollbar",
-				orientation,
-				className: cn("data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-[#e8e8e8]", "data-[orientation=vertical]:h-full data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent", "flex touch-none transition-colors select-none", "opacity-0 transition-opacity data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto", "rounded-full bg-[#e4edf6]", scrollAreaVariants({ size })),
-				children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
-					"data-slot": "scroll-area-thumb",
-					className: "rounded-full bg-[#9aa5b1] hover:bg-[#657383] relative flex-1"
-				})
-			}),
-			/* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
-		]
-	});
-}
+var ScrollArea = PkScrollAreaElement;
 //#endregion
-export { ScrollArea };
+export { PkScrollAreaElement, ScrollArea };
 
 //# sourceMappingURL=ScrollArea.js.map

package/dist/components/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../src/components/ScrollArea.tsx"],"sourcesContent":["import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\nimport type { RefObject } from 'react';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nconst scrollAreaVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'data-[orientation=horizontal]:h-[6px] data-[orientation=vertical]:w-[6px] ',\n            sm: 'data-[orientation=horizontal]:h-[8px] data-[orientation=vertical]:w-[8px] ',\n            default: 'data-[orientation=horizontal]:h-[10px] data-[orientation=vertical]:w-[10px] ',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype ScrollAreaSize = NonNullable<VariantProps<typeof scrollAreaVariants>['size']>;\n\nfunction ScrollArea({\n    className,\n    children,\n    size = 'default',\n    orientation = 'vertical',\n    viewPortClassName,\n    viewPortRef,\n    contentClassName,\n    ...props\n}: ScrollAreaPrimitive.Root.Props & VariantProps<typeof scrollAreaVariants> & {\n    orientation?: 'horizontal' | 'vertical';\n    size?: ScrollAreaSize;\n    viewPortClassName?: string;\n    viewPortRef?: RefObject<HTMLDivElement>;\n    contentClassName?: string;\n}) {\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            className={className}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                data-slot=\"scroll-area-viewport\"\n                ref={viewPortRef}\n                className={cn(\n                    'focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1',\n                    viewPortClassName,\n                )}\n            >\n                <ScrollAreaPrimitive.Content\n                    data-slot=\"scroll-area-content\"\n                    className={contentClassName}\n                >\n                    {children}\n                </ScrollAreaPrimitive.Content>\n            </ScrollAreaPrimitive.Viewport>\n\n            <ScrollAreaPrimitive.Scrollbar\n                data-slot=\"scroll-area-scrollbar\"\n                orientation={orientation}\n                // data-hovering=\"true\"\n                className={cn(\n                    'data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-[#e8e8e8]',\n                    'data-[orientation=vertical]:h-full data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent',\n                    'flex touch-none transition-colors select-none',\n                    'opacity-0 transition-opacity data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto',\n                    'rounded-full bg-[#e4edf6]',\n\n                    scrollAreaVariants({ size }),\n                )}\n            >\n                <ScrollAreaPrimitive.Thumb\n                    data-slot=\"scroll-area-thumb\"\n                    className=\"rounded-full bg-[#9aa5b1] hover:bg-[#657383] relative flex-1\"\n                />\n            </ScrollAreaPrimitive.Scrollbar>\n\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nexport { ScrollArea };\n"],"mappings":";;;;;;AAMA,IAAM,qBAAqB,IAAI,IAAI;CAC/B,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAIF,SAAS,WAAW,EAChB,WACA,UACA,OAAO,WACP,cAAc,YACd,mBACA,aACA,kBACA,GAAG,SAOJ;AACC,QACI,qBAAC,aAAoB,MAArB;EACI,aAAU;EACC;EACX,GAAI;YAHR;GAKI,oBAAC,aAAoB,UAArB;IACI,aAAU;IACV,KAAK;IACL,WAAW,GACP,sJACA,kBACH;cAED,oBAAC,aAAoB,SAArB;KACI,aAAU;KACV,WAAW;KAEV;KACyB,CAAA;IACH,CAAA;GAE/B,oBAAC,aAAoB,WAArB;IACI,aAAU;IACG;IAEb,WAAW,GACP,kIACA,4HACA,iDACA,sNACA,6BAEA,mBAAmB,EAAE,MAAM,CAAC,CAC/B;cAED,oBAAC,aAAoB,OAArB;KACI,aAAU;KACV,WAAU;KACZ,CAAA;IAC0B,CAAA;GAEhC,oBAAC,aAAoB,QAArB,EAA8B,CAAA;GACP"}
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../src/components/ScrollArea.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkScrollArea, type PkScrollAreaOrientation, type PkScrollAreaSize } from '@verbb/plugin-kit-web/components/scroll-area/pk-scroll-area.js';\n\n/** React facade over `<pk-scroll-area>`. Behavior and styles live in the web component. */\nexport const PkScrollAreaElement = createPluginKitComponent({\n    tagName: 'pk-scroll-area',\n    elementClass: PkScrollArea,\n    react: React,\n    events: {\n        onPkScroll: 'pk-scroll',\n    },\n});\n\nexport const ScrollArea = PkScrollAreaElement;\nexport type ScrollAreaProps = React.ComponentProps<typeof PkScrollAreaElement>;\nexport type { PkScrollAreaOrientation, PkScrollAreaSize };\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,yBAAyB;CACxD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ,EACJ,YAAY,aACf;CACJ,CAAC;AAEF,IAAa,aAAa"}