@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst inputVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-1.5 py-1 text-[11px]',\n            sm: 'px-2 py-1 text-[12px]',\n            default: 'px-2 py-1.5 text-sm',\n            lg: 'px-3 py-2 text-sm',\n            xl: 'px-4 py-2.5 text-base',\n        },\n        width: {\n            xs: 'w-4',\n            sm: 'w-8',\n            lg: 'w-12',\n            xl: 'w-16',\n            full: 'w-full',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        width: 'full',\n    },\n});\n\nfunction Input({\n    className,\n    type,\n    size,\n    width = 'full',\n    ...props\n}: Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>) {\n    return (\n        <InputPrimitive\n            type={type}\n            data-slot=\"input\"\n            className={cn(\n                // Reset\n                'flex outline-none bg-clip-padding',\n\n                'rounded-sm',\n                'border border-[rgba(96,125,159,0.4)]',\n                'bg-[rgb(251,252,254)]',\n\n                // Themes\n                inputVariants({ size, width }),\n\n                // Hover & Focus\n                'placeholder:text-[#7c8793]',\n                'focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'aria-invalid:border-rose-600! aria-invalid:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!',\n\n                // Data States\n                'disabled:cursor-not-allowed disabled:opacity-50',\n\n                // File\n                'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',\n\n                // Custom Classes\n                className,\n            )}\n            {...props}\n        />\n    );\n}\nexport { Input };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IAAI,IAAI;CAC1B,UAAU;EACN,MAAM;GACF,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACP;EACD,OAAO;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACT;EACJ;CACD,iBAAiB;EACb,MAAM;EACN,OAAO;EACV;CACJ,CAAC;AAEF,SAAS,MAAM,EACX,WACA,MACA,MACA,QAAQ,QACR,GAAG,SACwE;AAC3E,QACI,oBAAC,SAAD;EACU;EACN,aAAU;EACV,WAAW,GAEP,qCAEA,cACA,wCACA,yBAGA,cAAc;GAAE;GAAM;GAAO,CAAC,EAG9B,8BACA,yIACA,0JAGA,mDAGA,wFAGA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkInput, type PkInputSize } from '@verbb/plugin-kit-web/components/input/pk-input.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkInputElement = createPluginKitComponent({\n    tagName: 'pk-input',\n    elementClass: PkInput,\n    react: React,\n    events: {\n        // React `onChange` is live (every keystroke); native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n        onPkClear: 'pk-clear',\n        onFocus: 'focus',\n        onBlur: 'blur',\n    },\n});\n\ntype PkInputElementProps = React.ComponentProps<typeof PkInputElement>;\n\n/** React facade over `<pk-input>`. Behavior and styles live in the web component. */\nexport const Input = forwardRef<PkInput, PkInputElementProps>(function Input(props, ref) {\n    const {\n        disabled, readonly, invalid, fitCell, autofocus, mono, ...rest\n    } = props;\n\n    return (\n        <PkInputElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(['disabled', 'readonly', 'invalid', 'fitCell', 'autofocus', 'mono'], {\n                disabled, readonly, invalid, fitCell, autofocus, mono,\n            })}\n        />\n    );\n});\n\nInput.displayName = 'Input';\n\nexport type InputProps = PkInputElementProps;\nexport type { PkInputSize };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,yBAAyB;CAC5C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EAEJ,SAAS;EACT,UAAU;EACV,WAAW;EACX,SAAS;EACT,QAAQ;EACX;CACJ,CAAC;;AAKF,IAAa,QAAQ,WAAyC,SAAS,MAAM,OAAO,KAAK;CACrF,MAAM,EACF,UAAU,UAAU,SAAS,SAAS,WAAW,MAAM,GAAG,SAC1D;AAEJ,QACI,oBAAC,gBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAW;GAAW;GAAa;GAAO,EAAE;GACtF;GAAU;GAAU;GAAS;GAAS;GAAW;GACpD,CAAC;EACJ,CAAA;EAER;AAEF,MAAM,cAAc"}

package/dist/components/InputGroup.d.ts

@@ -1,20 +1,40 @@
-import { ComponentProps } from 'react';
-import { VariantProps } from 'class-variance-authority';
-import { Button } from '.';
-declare function InputGroup({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function InputGroupAddon({ className, align, ...props }: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
-declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
-    type?: 'button' | 'submit' | 'reset';
-    disabled?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupText({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupInput({ className, ...props }: Omit<ComponentProps<'input'>, 'size' | 'width'>): import("react/jsx-runtime").JSX.Element;
-declare function InputGroupTextarea({ className, ...props }: ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
+import { default as React } from 'react';
+import { PkInputGroup } from '@verbb/plugin-kit-web/components/input-group/pk-input-group.js';
+import { PkInputGroupAddon, PkInputGroupAddonAlign } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-addon.js';
+import { PkInputGroupButton, PkInputGroupButtonSize } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-button.js';
+import { PkInputGroupInput, PkInputGroupInputSize } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-input.js';
+import { PkInputGroupText } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-text.js';
+import { PkInputGroupTextarea } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-textarea.js';
+/** React facades over the `<pk-input-group>` family. Behavior and styles live in the web components. */
+export declare const PkInputGroupElement: import('@lit/react').ReactWebComponent<PkInputGroup, {}>;
+export declare const PkInputGroupAddonElement: import('@lit/react').ReactWebComponent<PkInputGroupAddon, {}>;
+export declare const PkInputGroupButtonElement: import('@lit/react').ReactWebComponent<PkInputGroupButton, {}>;
+export declare const PkInputGroupInputElement: import('@lit/react').ReactWebComponent<PkInputGroupInput, {
+    onInput: string;
+    onChange: string;
+}>;
+export declare const PkInputGroupTextElement: import('@lit/react').ReactWebComponent<PkInputGroupText, {}>;
+export declare const PkInputGroupTextareaElement: import('@lit/react').ReactWebComponent<PkInputGroupTextarea, {
+    onInput: string;
+    onChange: string;
+}>;
+export declare const InputGroup: import('@lit/react').ReactWebComponent<PkInputGroup, {}>;
+export declare const InputGroupAddon: import('@lit/react').ReactWebComponent<PkInputGroupAddon, {}>;
+export declare const InputGroupButton: import('@lit/react').ReactWebComponent<PkInputGroupButton, {}>;
+export declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkInputGroupInput>, "onChange" | "onInput" | "value" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "inputElement" | "type" | "size" | "placeholder" | "readonly" | "invalid" | "autocomplete"> & {
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkInputGroupInput, keyof HTMLElement>> & React.RefAttributes<PkInputGroupInput>, "ref"> & React.RefAttributes<PkInputGroupInput>>;
+export declare const InputGroupText: import('@lit/react').ReactWebComponent<PkInputGroupText, {}>;
+export declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkInputGroupTextarea>, "onChange" | "onInput" | "value" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "placeholder" | "readonly" | "invalid" | "textareaElement" | "rows"> & {
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkInputGroupTextarea, keyof HTMLElement>> & React.RefAttributes<PkInputGroupTextarea>, "ref"> & React.RefAttributes<PkInputGroupTextarea>>;
+export type InputGroupProps = React.ComponentProps<typeof PkInputGroupElement>;
+export type InputGroupAddonProps = React.ComponentProps<typeof PkInputGroupAddonElement>;
+export type InputGroupButtonProps = React.ComponentProps<typeof PkInputGroupButtonElement>;
+export type InputGroupInputProps = React.ComponentProps<typeof PkInputGroupInputElement>;
+export type InputGroupTextProps = React.ComponentProps<typeof PkInputGroupTextElement>;
+export type InputGroupTextareaProps = React.ComponentProps<typeof PkInputGroupTextareaElement>;
+export type { PkInputGroupAddonAlign, PkInputGroupButtonSize, PkInputGroupInputSize };
 //# sourceMappingURL=InputGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/components/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAI5D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAmCjE;AAED,QAAA,MAAM,uBAAuB;;8EA2D5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgBtE;AAED,QAAA,MAAM,wBAAwB;;8EA0B7B,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,IAAe,EACf,OAAgB,EAChB,IAAW,EACX,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB,2CAUJ;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,2CAmBtE;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,2CAqBjD;AAED,iBAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,UAAU,CAAC,2CAsB5B;AAED,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACrB,CAAC"}
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/components/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EACH,iBAAiB,EACjB,KAAK,sBAAsB,EAC9B,MAAM,sEAAsE,CAAC;AAC9E,OAAO,EACH,kBAAkB,EAClB,KAAK,sBAAsB,EAC9B,MAAM,uEAAuE,CAAC;AAC/E,OAAO,EACH,iBAAiB,EACjB,KAAK,qBAAqB,EAC7B,MAAM,sEAAsE,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qEAAqE,CAAC;AACvG,OAAO,EAAE,oBAAoB,EAAE,MAAM,yEAAyE,CAAC;AAI/G,wGAAwG;AACxG,eAAO,MAAM,mBAAmB,0DAI9B,CAAC;AAEH,eAAO,MAAM,wBAAwB,+DAInC,CAAC;AAEH,eAAO,MAAM,yBAAyB,gEAIpC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;EASnC,CAAC;AAEH,eAAO,MAAM,uBAAuB,8DAIlC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;EAStC,CAAC;AAEH,eAAO,MAAM,UAAU,0DAAsB,CAAC;AAC9C,eAAO,MAAM,eAAe,+DAA2B,CAAC;AACxD,eAAO,MAAM,gBAAgB,gEAA4B,CAAC;AAI1D,eAAO,MAAM,eAAe;;;kJAc3B,CAAC;AAIF,eAAO,MAAM,cAAc,8DAA0B,CAAC;AAItD,eAAO,MAAM,kBAAkB;;;2JAc9B,CAAC;AAIF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACzF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACzF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACvF,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAC/F,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/InputGroup.js

@@ -1,111 +1,92 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { Input } from "./Input.js";
-import { Textarea } from "./Textarea.js";
-import "./index.js";
-import { Button } from "./Button.js";
-import { cva } from "class-variance-authority";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { trueBooleanProps } from "../utils/lit-react-booleans.js";
+import React, { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { PkInputGroup } from "@verbb/plugin-kit-web/components/input-group/pk-input-group.js";
+import { PkInputGroupAddon } from "@verbb/plugin-kit-web/components/input-group/pk-input-group-addon.js";
+import { PkInputGroupButton } from "@verbb/plugin-kit-web/components/input-group/pk-input-group-button.js";
+import { PkInputGroupInput } from "@verbb/plugin-kit-web/components/input-group/pk-input-group-input.js";
+import { PkInputGroupText } from "@verbb/plugin-kit-web/components/input-group/pk-input-group-text.js";
+import { PkInputGroupTextarea } from "@verbb/plugin-kit-web/components/input-group/pk-input-group-textarea.js";
 //#region src/components/InputGroup.tsx
-function InputGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "input-group",
-		role: "group",
-		className: cn("group/input-group outline-none relative flex w-full min-w-0 items-center", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col", "has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=inline-end]]:[&>input]:pr-1.5", "has-[>[data-align=inline-start]]:[&>input]:pl-1.5", "rounded-sm", "border border-[rgba(96,125,159,0.4)]", "bg-[rgb(251,252,254)] bg-clip-padding", "has-[[data-slot=input-group-control]:focus-visible]:border-sky-600", "has-[[data-slot=field-control]:focus-visible]:border-sky-600", "has-[[data-slot=input-group-control]: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)]", "has-[[data-slot=field-control]: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)]", "has-[[data-slot][aria-invalid=true]]:border-rose-600!", "has-disabled:opacity-50", className),
-		...props
-	});
-}
-var inputGroupAddonVariants = cva([
-	"flex h-auto items-center justify-center gap-2",
-	"px-2 text-sm",
-	"cursor-text select-none",
-	"group-data-[disabled=true]/input-group:opacity-50",
-	"[&>svg:not([class*='size-'])]:size-3",
-	"[&>kbd]:rounded-[calc(var(--radius)-5px)]"
-].join(" "), {
-	variants: { align: {
-		"inline-start": [
-			"order-first pl-2",
-			"has-[>button]:ml-[-0.3rem]",
-			"has-[>kbd]:ml-[-0.15rem]"
-		].join(" "),
-		"inline-end": [
-			"order-last pr-2",
-			"has-[>button]:mr-[-0.3rem]",
-			"has-[>kbd]:mr-[-0.15rem]"
-		].join(" "),
-		"block-start": [
-			"order-first w-full justify-start",
-			"px-2.5 pt-2",
-			"group-has-[>input]/input-group:pt-2",
-			"[.border-b]:pb-2"
-		].join(" "),
-		"block-end": [
-			"order-last w-full justify-start",
-			"px-2.5 pb-2",
-			"group-has-[>input]/input-group:pb-2",
-			"[.border-t]:pt-2"
-		].join(" ")
-	} },
-	defaultVariants: { align: "inline-start" }
+/** React facades over the `<pk-input-group>` family. Behavior and styles live in the web components. */
+var PkInputGroupElement = createPluginKitComponent({
+	tagName: "pk-input-group",
+	elementClass: PkInputGroup,
+	react: React
 });
-function InputGroupAddon({ className, align = "inline-start", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"data-slot": "input-group-addon",
-		"data-align": align,
-		className: cn(inputGroupAddonVariants({ align }), className),
-		onClick: (e) => {
-			if (e.target.closest("button")) return;
-			e.currentTarget.parentElement?.querySelector("input")?.focus();
-		},
-		...props
-	});
-}
-var inputGroupButtonVariants = cva([
-	"flex items-center gap-2",
-	"text-gray-500 text-sm",
-	"shadow-none rounded-sm",
-	"hover:bg-slate-100"
-].join(" "), {
-	variants: { size: {
-		xs: "",
-		sm: "",
-		"icon-xs": "size-6 [&>svg]:size-3.5 p-0 has-[>svg]:p-0",
-		"icon-sm": ""
-	} },
-	defaultVariants: { size: "xs" }
+var PkInputGroupAddonElement = createPluginKitComponent({
+	tagName: "pk-input-group-addon",
+	elementClass: PkInputGroupAddon,
+	react: React
 });
-function InputGroupButton({ className, type = "button", variant = "none", size = "xs", ...props }) {
-	return /* @__PURE__ */ jsx(Button, {
-		type,
-		"data-size": size,
-		variant,
-		className: cn(inputGroupButtonVariants({ size }), className),
-		...props
-	});
-}
-function InputGroupText({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("flex items-center gap-2 text-sm", "text-gray-500", "[&_svg:not([class*='size-'])]:size-3", "[&_svg]:pointer-events-none", className),
-		...props
-	});
-}
-function InputGroupInput({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Input, {
-		"data-slot": "input-group-control",
-		className: cn("flex-1", "rounded-none border-0", "bg-transparent", "shadow-none!", "disabled:bg-transparent", className),
-		...props
+var PkInputGroupButtonElement = createPluginKitComponent({
+	tagName: "pk-input-group-button",
+	elementClass: PkInputGroupButton,
+	react: React
+});
+var PkInputGroupInputElement = createPluginKitComponent({
+	tagName: "pk-input-group-input",
+	elementClass: PkInputGroupInput,
+	react: React,
+	events: {
+		onInput: "input",
+		onChange: "input"
+	}
+});
+var PkInputGroupTextElement = createPluginKitComponent({
+	tagName: "pk-input-group-text",
+	elementClass: PkInputGroupText,
+	react: React
+});
+var PkInputGroupTextareaElement = createPluginKitComponent({
+	tagName: "pk-input-group-textarea",
+	elementClass: PkInputGroupTextarea,
+	react: React,
+	events: {
+		onInput: "input",
+		onChange: "input"
+	}
+});
+var InputGroup = PkInputGroupElement;
+var InputGroupAddon = PkInputGroupAddonElement;
+var InputGroupButton = PkInputGroupButtonElement;
+var InputGroupInput = forwardRef(function InputGroupInput(props, ref) {
+	const { disabled, readonly, invalid, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkInputGroupInputElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"readonly",
+			"invalid"
+		], {
+			disabled,
+			readonly,
+			invalid
+		})
 	});
-}
-function InputGroupTextarea({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Textarea, {
-		"data-slot": "input-group-control",
-		className: cn("flex-1", "rounded-none border-0 py-2", "resize-none", "bg-transparent", "shadow-none!", "disabled:bg-transparent", className),
-		...props
+});
+InputGroupInput.displayName = "InputGroupInput";
+var InputGroupText = PkInputGroupTextElement;
+var InputGroupTextarea = forwardRef(function InputGroupTextarea(props, ref) {
+	const { disabled, readonly, invalid, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkInputGroupTextareaElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"readonly",
+			"invalid"
+		], {
+			disabled,
+			readonly,
+			invalid
+		})
 	});
-}
+});
+InputGroupTextarea.displayName = "InputGroupTextarea";
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, PkInputGroupAddonElement, PkInputGroupButtonElement, PkInputGroupElement, PkInputGroupInputElement, PkInputGroupTextElement, PkInputGroupTextareaElement };
 
 //# sourceMappingURL=InputGroup.js.map

package/dist/components/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","names":[],"sources":["../../src/components/InputGroup.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { Button } from '@verbb/plugin-kit-react/components';\nimport { Input } from '@verbb/plugin-kit-react/components';\nimport { Textarea } from '@verbb/plugin-kit-react/components';\n\nfunction InputGroup({ className, ...props }: ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"input-group\"\n            role=\"group\"\n            className={cn(\n                // Layout\n                'group/input-group outline-none relative flex w-full min-w-0 items-center',\n                'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n                'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n                'has-[>[data-align=block-end]]:[&>input]:pt-3',\n                'has-[>[data-align=block-start]]:[&>input]:pb-3',\n                'has-[>[data-align=inline-end]]:[&>input]:pr-1.5',\n                'has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n\n                // Theme\n                'rounded-sm',\n                'border border-[rgba(96,125,159,0.4)]',\n                'bg-[rgb(251,252,254)] bg-clip-padding',\n\n                // Focus and validation\n                'has-[[data-slot=input-group-control]:focus-visible]:border-sky-600',\n                'has-[[data-slot=field-control]:focus-visible]:border-sky-600',\n                'has-[[data-slot=input-group-control]: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                'has-[[data-slot=field-control]: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                'has-[[data-slot][aria-invalid=true]]:border-rose-600!',\n\n                // Disabled\n                'has-disabled:opacity-50',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nconst inputGroupAddonVariants = cva(\n    [\n        // Layout\n        'flex h-auto items-center justify-center gap-2',\n        'px-2 text-sm',\n\n        // Interaction\n        'cursor-text select-none',\n\n        // Disabled\n        'group-data-[disabled=true]/input-group:opacity-50',\n\n        // Children\n        \"[&>svg:not([class*='size-'])]:size-3\",\n        '[&>kbd]:rounded-[calc(var(--radius)-5px)]',\n    ].join(' '),\n    {\n        variants: {\n            align: {\n                'inline-start': [\n                    // Layout\n                    'order-first pl-2',\n\n                    // Child offsets\n                    'has-[>button]:ml-[-0.3rem]',\n                    'has-[>kbd]:ml-[-0.15rem]',\n                ].join(' '),\n                'inline-end': [\n                    // Layout\n                    'order-last pr-2',\n\n                    // Child offsets\n                    'has-[>button]:mr-[-0.3rem]',\n                    'has-[>kbd]:mr-[-0.15rem]',\n                ].join(' '),\n                'block-start': [\n                    // Layout\n                    'order-first w-full justify-start',\n                    'px-2.5 pt-2',\n\n                    // State\n                    'group-has-[>input]/input-group:pt-2',\n                    '[.border-b]:pb-2',\n                ].join(' '),\n                'block-end': [\n                    // Layout\n                    'order-last w-full justify-start',\n                    'px-2.5 pb-2',\n\n                    // State\n                    'group-has-[>input]/input-group:pb-2',\n                    '[.border-t]:pt-2',\n                ].join(' '),\n            },\n        },\n        defaultVariants: {\n            align: 'inline-start',\n        },\n    },\n);\n\nfunction InputGroupAddon({\n    className,\n    align = 'inline-start',\n    ...props\n}: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {\n    return (\n        <div\n            role=\"group\"\n            data-slot=\"input-group-addon\"\n            data-align={align}\n            className={cn(inputGroupAddonVariants({ align }), className)}\n            onClick={(e) => {\n                if ((e.target as HTMLElement).closest('button')) {\n                    return;\n                }\n                e.currentTarget.parentElement?.querySelector('input')?.focus();\n            }}\n            {...props}\n        />\n    );\n}\n\nconst inputGroupButtonVariants = cva(\n    [\n        // Layout\n        'flex items-center gap-2',\n        'text-gray-500 text-sm',\n\n        // Theme\n        'shadow-none rounded-sm',\n\n        'hover:bg-slate-100',\n    ].join(' '),\n    {\n        variants: {\n            size: {\n                // xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3\",\n                xs: '',\n                sm: '',\n                'icon-xs': 'size-6 [&>svg]:size-3.5 p-0 has-[>svg]:p-0',\n                'icon-sm': '',\n                // 'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n            },\n        },\n        defaultVariants: {\n            size: 'xs',\n        },\n    },\n);\n\nfunction InputGroupButton({\n    className,\n    type = 'button',\n    variant = 'none',\n    size = 'xs',\n    ...props\n}: Omit<ComponentProps<typeof Button>, 'size' | 'type'> &\n    VariantProps<typeof inputGroupButtonVariants> & {\n        type?: 'button' | 'submit' | 'reset'\n        disabled?: boolean\n    }) {\n    return (\n        <Button\n            type={type}\n            data-size={size}\n            variant={variant}\n            className={cn(inputGroupButtonVariants({ size }), className)}\n            {...props}\n        />\n    );\n}\n\nfunction InputGroupText({ className, ...props }: ComponentProps<'span'>) {\n    return (\n        <span\n            className={cn(\n                // Layout\n                'flex items-center gap-2 text-sm',\n\n                // Theme\n                'text-gray-500',\n\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-3\",\n                '[&_svg]:pointer-events-none',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction InputGroupInput({\n    className,\n    ...props\n}: Omit<ComponentProps<'input'>, 'size' | 'width'>) {\n    return (\n        <Input\n            data-slot=\"input-group-control\"\n            className={cn(\n                // Layout\n                'flex-1',\n                'rounded-none border-0',\n\n                // Theme\n                'bg-transparent',\n                'shadow-none!',\n\n                // Disabled\n                'disabled:bg-transparent',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction InputGroupTextarea({\n    className,\n    ...props\n}: ComponentProps<'textarea'>) {\n    return (\n        <Textarea\n            data-slot=\"input-group-control\"\n            className={cn(\n                // Layout\n                'flex-1',\n                'rounded-none border-0 py-2',\n                'resize-none',\n\n                // Theme\n                'bg-transparent',\n                'shadow-none!',\n\n                // Disabled\n                'disabled:bg-transparent',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    InputGroup,\n    InputGroupAddon,\n    InputGroupButton,\n    InputGroupText,\n    InputGroupInput,\n    InputGroupTextarea,\n};\n"],"mappings":";;;;;;;;;AAQA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAgC;AAChE,QACI,oBAAC,OAAD;EACI,aAAU;EACV,MAAK;EACL,WAAW,GAEP,4EACA,+EACA,mFACA,gDACA,kDACA,mDACA,qDAGA,cACA,wCACA,yCAGA,sEACA,gEACA,kJACA,4IACA,yDAGA,2BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,IAAM,0BAA0B,IAC5B;CAEI;CACA;CAGA;CAGA;CAGA;CACA;CACH,CAAC,KAAK,IAAI,EACX;CACI,UAAU,EACN,OAAO;EACH,gBAAgB;GAEZ;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACX,cAAc;GAEV;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACX,eAAe;GAEX;GACA;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACX,aAAa;GAET;GACA;GAGA;GACA;GACH,CAAC,KAAK,IAAI;EACd,EACJ;CACD,iBAAiB,EACb,OAAO,gBACV;CACJ,CACJ;AAED,SAAS,gBAAgB,EACrB,WACA,QAAQ,gBACR,GAAG,SACkE;AACrE,QACI,oBAAC,OAAD;EACI,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,MAAM;AACZ,OAAK,EAAE,OAAuB,QAAQ,SAAS,CAC3C;AAEJ,KAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAElE,GAAI;EACN,CAAA;;AAIV,IAAM,2BAA2B,IAC7B;CAEI;CACA;CAGA;CAEA;CACH,CAAC,KAAK,IAAI,EACX;CACI,UAAU,EACN,MAAM;EAEF,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;EAEd,EACJ;CACD,iBAAiB,EACb,MAAM,MACT;CACJ,CACJ;AAED,SAAS,iBAAiB,EACtB,WACA,OAAO,UACP,UAAU,QACV,OAAO,MACP,GAAG,SAKA;AACH,QACI,oBAAC,QAAD;EACU;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5D,GAAI;EACN,CAAA;;AAIV,SAAS,eAAe,EAAE,WAAW,GAAG,SAAiC;AACrE,QACI,oBAAC,QAAD;EACI,WAAW,GAEP,mCAGA,iBAGA,wCACA,+BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,gBAAgB,EACrB,WACA,GAAG,SAC6C;AAChD,QACI,oBAAC,OAAD;EACI,aAAU;EACV,WAAW,GAEP,UACA,yBAGA,kBACA,gBAGA,2BAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,mBAAmB,EACxB,WACA,GAAG,SACwB;AAC3B,QACI,oBAAC,UAAD;EACI,aAAU;EACV,WAAW,GAEP,UACA,8BACA,eAGA,kBACA,gBAGA,2BAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"InputGroup.js","names":[],"sources":["../../src/components/InputGroup.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkInputGroup } from '@verbb/plugin-kit-web/components/input-group/pk-input-group.js';\nimport {\n    PkInputGroupAddon,\n    type PkInputGroupAddonAlign,\n} from '@verbb/plugin-kit-web/components/input-group/pk-input-group-addon.js';\nimport {\n    PkInputGroupButton,\n    type PkInputGroupButtonSize,\n} from '@verbb/plugin-kit-web/components/input-group/pk-input-group-button.js';\nimport {\n    PkInputGroupInput,\n    type PkInputGroupInputSize,\n} from '@verbb/plugin-kit-web/components/input-group/pk-input-group-input.js';\nimport { PkInputGroupText } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-text.js';\nimport { PkInputGroupTextarea } from '@verbb/plugin-kit-web/components/input-group/pk-input-group-textarea.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\n/** React facades over the `<pk-input-group>` family. Behavior and styles live in the web components. */\nexport const PkInputGroupElement = createPluginKitComponent({\n    tagName: 'pk-input-group',\n    elementClass: PkInputGroup,\n    react: React,\n});\n\nexport const PkInputGroupAddonElement = createPluginKitComponent({\n    tagName: 'pk-input-group-addon',\n    elementClass: PkInputGroupAddon,\n    react: React,\n});\n\nexport const PkInputGroupButtonElement = createPluginKitComponent({\n    tagName: 'pk-input-group-button',\n    elementClass: PkInputGroupButton,\n    react: React,\n});\n\nexport const PkInputGroupInputElement = createPluginKitComponent({\n    tagName: 'pk-input-group-input',\n    elementClass: PkInputGroupInput,\n    react: React,\n    events: {\n        // React `onChange` is live (every keystroke); native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n    },\n});\n\nexport const PkInputGroupTextElement = createPluginKitComponent({\n    tagName: 'pk-input-group-text',\n    elementClass: PkInputGroupText,\n    react: React,\n});\n\nexport const PkInputGroupTextareaElement = createPluginKitComponent({\n    tagName: 'pk-input-group-textarea',\n    elementClass: PkInputGroupTextarea,\n    react: React,\n    events: {\n        // React `onChange` is live (every keystroke); native `change` is blur-commit.\n        onInput: 'input',\n        onChange: 'input',\n    },\n});\n\nexport const InputGroup = PkInputGroupElement;\nexport const InputGroupAddon = PkInputGroupAddonElement;\nexport const InputGroupButton = PkInputGroupButtonElement;\n\ntype PkInputGroupInputElementProps = React.ComponentProps<typeof PkInputGroupInputElement>;\n\nexport const InputGroupInput = forwardRef<PkInputGroupInput, PkInputGroupInputElementProps>(\n    function InputGroupInput(props, ref) {\n        const {\n            disabled, readonly, invalid, ...rest\n        } = props;\n\n        return (\n            <PkInputGroupInputElement\n                ref={ref}\n                {...rest}\n                {...trueBooleanProps(['disabled', 'readonly', 'invalid'], { disabled, readonly, invalid })}\n            />\n        );\n    },\n);\n\nInputGroupInput.displayName = 'InputGroupInput';\n\nexport const InputGroupText = PkInputGroupTextElement;\n\ntype PkInputGroupTextareaElementProps = React.ComponentProps<typeof PkInputGroupTextareaElement>;\n\nexport const InputGroupTextarea = forwardRef<PkInputGroupTextarea, PkInputGroupTextareaElementProps>(\n    function InputGroupTextarea(props, ref) {\n        const {\n            disabled, readonly, invalid, ...rest\n        } = props;\n\n        return (\n            <PkInputGroupTextareaElement\n                ref={ref}\n                {...rest}\n                {...trueBooleanProps(['disabled', 'readonly', 'invalid'], { disabled, readonly, invalid })}\n            />\n        );\n    },\n);\n\nInputGroupTextarea.displayName = 'InputGroupTextarea';\n\nexport type InputGroupProps = React.ComponentProps<typeof PkInputGroupElement>;\nexport type InputGroupAddonProps = React.ComponentProps<typeof PkInputGroupAddonElement>;\nexport type InputGroupButtonProps = React.ComponentProps<typeof PkInputGroupButtonElement>;\nexport type InputGroupInputProps = React.ComponentProps<typeof PkInputGroupInputElement>;\nexport type InputGroupTextProps = React.ComponentProps<typeof PkInputGroupTextElement>;\nexport type InputGroupTextareaProps = React.ComponentProps<typeof PkInputGroupTextareaElement>;\nexport type { PkInputGroupAddonAlign, PkInputGroupButtonSize, PkInputGroupInputSize };\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAa,sBAAsB,yBAAyB;CACxD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,2BAA2B,yBAAyB;CAC7D,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,4BAA4B,yBAAyB;CAC9D,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,2BAA2B,yBAAyB;CAC7D,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EAEJ,SAAS;EACT,UAAU;EACb;CACJ,CAAC;AAEF,IAAa,0BAA0B,yBAAyB;CAC5D,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;AAEF,IAAa,8BAA8B,yBAAyB;CAChE,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EAEJ,SAAS;EACT,UAAU;EACb;CACJ,CAAC;AAEF,IAAa,aAAa;AAC1B,IAAa,kBAAkB;AAC/B,IAAa,mBAAmB;AAIhC,IAAa,kBAAkB,WAC3B,SAAS,gBAAgB,OAAO,KAAK;CACjC,MAAM,EACF,UAAU,UAAU,SAAS,GAAG,SAChC;AAEJ,QACI,oBAAC,0BAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAU,EAAE;GAAE;GAAU;GAAU;GAAS,CAAC;EAC5F,CAAA;EAGb;AAED,gBAAgB,cAAc;AAE9B,IAAa,iBAAiB;AAI9B,IAAa,qBAAqB,WAC9B,SAAS,mBAAmB,OAAO,KAAK;CACpC,MAAM,EACF,UAAU,UAAU,SAAS,GAAG,SAChC;AAEJ,QACI,oBAAC,6BAAD;EACS;EACL,GAAI;EACJ,GAAI,iBAAiB;GAAC;GAAY;GAAY;GAAU,EAAE;GAAE;GAAU;GAAU;GAAS,CAAC;EAC5F,CAAA;EAGb;AAED,mBAAmB,cAAc"}

package/dist/components/Lightswitch.d.ts

@@ -1,9 +1,16 @@
-import { ComponentProps } from 'react';
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
-import { VariantProps } from 'class-variance-authority';
-declare const lightswitchVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Lightswitch({ className, size, ...props }: ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof lightswitchVariants>): import("react/jsx-runtime").JSX.Element;
-export { Lightswitch };
+import { default as React } from 'react';
+import { PkLightswitch, PkLightswitchSize } from '@verbb/plugin-kit-web/components/lightswitch/pk-lightswitch.js';
+declare const PkLightswitchElement: import('@lit/react').ReactWebComponent<PkLightswitch, {
+    onPkChange: string;
+    onInput: string;
+    onChange: string;
+}>;
+export type LightswitchProps = React.ComponentProps<typeof PkLightswitchElement> & {
+    /** Controlled checked updates — unwraps `pk-change` `detail.checked`. */
+    onCheckedChange?: (checked: boolean) => void;
+};
+/** React facade over `<pk-lightswitch>`. Behavior and styles live in the web component. */
+export declare function Lightswitch({ onCheckedChange, onPkChange, ...props }: LightswitchProps): import("react/jsx-runtime").JSX.Element;
+export { PkLightswitchElement };
+export type { PkLightswitchSize };
 //# sourceMappingURL=Lightswitch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Lightswitch.d.ts","sourceRoot":"","sources":["../../src/components/Lightswitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;8EAWvB,CAAC;AA4BH,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAmExF;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"Lightswitch.d.ts","sourceRoot":"","sources":["../../src/components/Lightswitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,gEAAgE,CAAC;AAIvH,QAAA,MAAM,oBAAoB;;;;EASxB,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,GAAG;IAC/E,yEAAyE;IACzE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,2FAA2F;AAC3F,wBAAgB,WAAW,CAAC,EACxB,eAAe,EACf,UAAU,EACV,GAAG,KAAK,EACX,EAAE,gBAAgB,2CAYlB;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAChC,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Lightswitch.js

@@ -1,56 +1,31 @@
-import { cn } from "../utils/classes.js";
-import "../utils/index.js";
-import { cva } from "class-variance-authority";
+import { createPluginKitComponent } from "../utils/create-plugin-kit-component.js";
+import { readPkCheckedDetail } from "../utils/pk-change.js";
+import React from "react";
 import { jsx } from "react/jsx-runtime";
-import { Switch } from "@base-ui/react/switch";
+import { PkLightswitch } from "@verbb/plugin-kit-web/components/lightswitch/pk-lightswitch.js";
 //#region src/components/Lightswitch.tsx
-var lightswitchVariants = cva("", {
-	variants: { size: {
-		xs: "h-[16px] w-[24px] rounded-[8px]",
-		sm: "h-[18px] w-[28px] rounded-[9px]",
-		default: "h-[22px] w-[34px] rounded-[11px]"
-	} },
-	defaultVariants: { size: "default" }
+var PkLightswitchElement = createPluginKitComponent({
+	tagName: "pk-lightswitch",
+	elementClass: PkLightswitch,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onInput: "input",
+		onChange: "change"
+	}
 });
-var lightswitchThumbVariants = cva("", {
-	variants: { size: {
-		xs: "size-[12px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]",
-		sm: "size-[14px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]",
-		default: "size-[18px] translate-x-[2px] data-checked:translate-x-[calc(100%-4px)]"
-	} },
-	defaultVariants: { size: "default" }
-});
-var lightswitchIconVariants = cva("", {
-	variants: { size: {
-		xs: "hidden",
-		sm: "size-[10px]",
-		default: "size-[14px]"
-	} },
-	defaultVariants: { size: "default" }
-});
-function Lightswitch({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ jsx(Switch.Root, {
-		"data-slot": "switch",
-		className: cn("peer outline-none inline-flex shrink-0 items-center cursor-pointer select-none", lightswitchVariants({ size }), "shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]", "bg-gray-200", "data-checked:bg-teal-550", "data-checked:shadow-[inset_0_0_0_1px_#008779]", "focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_6px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.8)]", "aria-invalid:!shadow-[0_0_0_1px_#ffffff,0_0_0_2.5px_var(--color-rose-600)]", "aria-invalid:focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-rose-600),0_0_6px_1px_hsl(from_var(--color-rose-600)_h_s_l/0.8)]", "disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+/** React facade over `<pk-lightswitch>`. Behavior and styles live in the web component. */
+function Lightswitch({ onCheckedChange, onPkChange, ...props }) {
+	const handlePkChange = (event) => {
+		onPkChange?.(event);
+		onCheckedChange?.(readPkCheckedDetail(event));
+	};
+	return /* @__PURE__ */ jsx(PkLightswitchElement, {
 		...props,
-		children: /* @__PURE__ */ jsx(Switch.Thumb, {
-			"data-slot": "switch-thumb",
-			className: cn("pointer-events-none block rounded-full", "flex items-center justify-center", lightswitchThumbVariants({ size }), "bg-white", "shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]", "transition-transform", "data-checked:shadow-[inset_0_0_0_1px_#008779]"),
-			children: /* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				role: "img",
-				"aria-hidden": "true",
-				viewBox: "0 0 640 640",
-				className: cn(lightswitchIconVariants({ size }), "text-teal-550", "opacity-0", "translate-y-[1px]", "transition-opacity", "[[data-checked]_&]:opacity-100"),
-				children: /* @__PURE__ */ jsx("path", {
-					fill: "currentColor",
-					d: "M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z"
-				})
-			})
-		})
+		...onCheckedChange || onPkChange ? { onPkChange: handlePkChange } : {}
 	});
 }
 //#endregion
-export { Lightswitch };
+export { Lightswitch, PkLightswitchElement };
 
 //# sourceMappingURL=Lightswitch.js.map

package/dist/components/Lightswitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightswitch.js","names":[],"sources":["../../src/components/Lightswitch.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst lightswitchVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'h-[16px] w-[24px] rounded-[8px]',\n            sm: 'h-[18px] w-[28px] rounded-[9px]',\n            default: 'h-[22px] w-[34px] rounded-[11px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst lightswitchThumbVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-[12px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]',\n            sm: 'size-[14px] translate-x-[2px] data-checked:translate-x-[calc(100%-2px)]',\n            default: 'size-[18px] translate-x-[2px] data-checked:translate-x-[calc(100%-4px)]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst lightswitchIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'hidden',\n            sm: 'size-[10px]',\n            default: 'size-[14px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nfunction Lightswitch({\n    className,\n    size = 'default',\n    ...props\n}: ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof lightswitchVariants>) {\n    return (\n        <SwitchPrimitive.Root\n            data-slot=\"switch\"\n            className={cn(\n                // Reset\n                'peer outline-none inline-flex shrink-0 items-center cursor-pointer select-none',\n\n                // Theme\n                lightswitchVariants({ size }),\n                'shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]',\n                'bg-gray-200',\n\n                // State\n                'data-checked:bg-teal-550',\n                'data-checked:shadow-[inset_0_0_0_1px_#008779]',\n\n                // Hover & Focus\n                'focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-sky-600),0_0_6px_1px_hsl(from_var(--color-sky-600)_h_s_l/0.8)]',\n                'aria-invalid:!shadow-[0_0_0_1px_#ffffff,0_0_0_2.5px_var(--color-rose-600)]',\n                'aria-invalid:focus-visible:!shadow-[0_0_0_1px_#ffffff,0_0_0_3px_var(--color-rose-600),0_0_6px_1px_hsl(from_var(--color-rose-600)_h_s_l/0.8)]',\n\n                // Disabled styles\n                'disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50',\n\n                className,\n            )}\n            {...props}\n        >\n            <SwitchPrimitive.Thumb\n                data-slot=\"switch-thumb\"\n                className={cn(\n                    // Reset\n                    'pointer-events-none block rounded-full',\n                    'flex items-center justify-center',\n\n                    // Theme\n                    lightswitchThumbVariants({ size }),\n                    'bg-white',\n                    'shadow-[inset_0_0_0_1px_rgba(96,126,160,0.8)]',\n\n                    // Transitions and state changes\n                    'transition-transform',\n                    'data-checked:shadow-[inset_0_0_0_1px_#008779]',\n                )}\n            >\n                <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    role=\"img\"\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 640 640\"\n                    className={cn(\n                        lightswitchIconVariants({ size }),\n                        'text-teal-550',\n                        'opacity-0',\n                        'translate-y-[1px]',\n\n                        // Transitions and state changes\n                        'transition-opacity',\n                        '[[data-checked]_&]:opacity-100',\n                    )}\n                >\n                    <path fill=\"currentColor\" d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\" />\n                </svg>\n            </SwitchPrimitive.Thumb>\n        </SwitchPrimitive.Root>\n    );\n};\n\nexport { Lightswitch };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,IAAI,IAAI;CAChC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,IAAM,2BAA2B,IAAI,IAAI;CACrC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,IAAM,0BAA0B,IAAI,IAAI;CACpC,UAAU,EACN,MAAM;EACF,IAAI;EACJ,IAAI;EACJ,SAAS;EACZ,EACJ;CACD,iBAAiB,EACb,MAAM,WACT;CACJ,CAAC;AAEF,SAAS,YAAY,EACjB,WACA,OAAO,WACP,GAAG,SACoF;AACvF,QACI,oBAAC,OAAgB,MAAjB;EACI,aAAU;EACV,WAAW,GAEP,kFAGA,oBAAoB,EAAE,MAAM,CAAC,EAC7B,iDACA,eAGA,4BACA,iDAGA,iIACA,8EACA,gJAGA,6GAEA,UACH;EACD,GAAI;YAEJ,oBAAC,OAAgB,OAAjB;GACI,aAAU;GACV,WAAW,GAEP,0CACA,oCAGA,yBAAyB,EAAE,MAAM,CAAC,EAClC,YACA,iDAGA,wBACA,gDACH;aAED,oBAAC,OAAD;IACI,OAAM;IACN,MAAK;IACL,eAAY;IACZ,SAAQ;IACR,WAAW,GACP,wBAAwB,EAAE,MAAM,CAAC,EACjC,iBACA,aACA,qBAGA,sBACA,iCACH;cAED,oBAAC,QAAD;KAAM,MAAK;KAAe,GAAE;KAA+K,CAAA;IACzM,CAAA;GACc,CAAA;EACL,CAAA"}
+{"version":3,"file":"Lightswitch.js","names":[],"sources":["../../src/components/Lightswitch.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkLightswitch, type PkLightswitchSize } from '@verbb/plugin-kit-web/components/lightswitch/pk-lightswitch.js';\n\nimport { readPkCheckedDetail } from '../utils/pk-change.js';\n\nconst PkLightswitchElement = createPluginKitComponent({\n    tagName: 'pk-lightswitch',\n    elementClass: PkLightswitch,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onInput: 'input',\n        onChange: 'change',\n    },\n});\n\nexport type LightswitchProps = React.ComponentProps<typeof PkLightswitchElement> & {\n    /** Controlled checked updates — unwraps `pk-change` `detail.checked`. */\n    onCheckedChange?: (checked: boolean) => void;\n};\n\n/** React facade over `<pk-lightswitch>`. Behavior and styles live in the web component. */\nexport function Lightswitch({\n    onCheckedChange,\n    onPkChange,\n    ...props\n}: LightswitchProps) {\n    const handlePkChange = (event: Event): void => {\n        onPkChange?.(event as Parameters<NonNullable<LightswitchProps['onPkChange']>>[0]);\n        onCheckedChange?.(readPkCheckedDetail(event));\n    };\n\n    return (\n        <PkLightswitchElement\n            {...props}\n            {...(onCheckedChange || onPkChange ? { onPkChange: handlePkChange } : {})}\n        />\n    );\n}\n\nexport { PkLightswitchElement };\nexport type { PkLightswitchSize };\n"],"mappings":";;;;;;AAMA,IAAM,uBAAuB,yBAAyB;CAClD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,SAAS;EACT,UAAU;EACb;CACJ,CAAC;;AAQF,SAAgB,YAAY,EACxB,iBACA,YACA,GAAG,SACc;CACjB,MAAM,kBAAkB,UAAuB;AAC3C,eAAa,MAAoE;AACjF,oBAAkB,oBAAoB,MAAM,CAAC;;AAGjD,QACI,oBAAC,sBAAD;EACI,GAAI;EACJ,GAAK,mBAAmB,aAAa,EAAE,YAAY,gBAAgB,GAAG,EAAE;EAC1E,CAAA"}

package/dist/components/Popover.d.ts

@@ -1,12 +1,24 @@
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
-declare function Popover({ ariaLabel, ...props }: PopoverPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare function PopoverContent({ className, align, alignOffset, side, sideOffset, positionMethod, collisionBoundary, collisionPadding, sticky, collisionAvoidance, portalClassName, portalContainer, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'positionMethod' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'collisionAvoidance'> & {
-    portalClassName?: string;
-    portalContainer?: HTMLElement | ShadowRoot | null;
-}): import("react/jsx-runtime").JSX.Element;
-declare function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
-declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
-export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
+import { default as React } from 'react';
+import { PkPopover } from '@verbb/plugin-kit-web/components/popover/pk-popover.js';
+declare const PkPopoverElement: import('@lit/react').ReactWebComponent<PkPopover, {
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+type PkPopoverElementProps = React.ComponentProps<typeof PkPopoverElement>;
+/**
+ * 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`.
+ */
+export declare const Popover: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkPopover>, "anchor" | "open" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "for" | "onPkShow" | "onPkAfterShow" | "onPkHide" | "onPkAfterHide" | "onPkOpenChange" | "placement" | "sideOffset" | "flush" | "withArrow" | "willUpdate" | "closePopover"> & {
+    onPkShow?: ((e: Event) => void) | undefined;
+    onPkAfterShow?: ((e: Event) => void) | undefined;
+    onPkHide?: ((e: Event) => void) | undefined;
+    onPkAfterHide?: ((e: Event) => void) | undefined;
+    onPkOpenChange?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkPopover, keyof HTMLElement>> & React.RefAttributes<PkPopover>, "ref"> & React.RefAttributes<PkPopover>>;
+export { PkPopoverElement };
+export type PopoverProps = PkPopoverElementProps;
 //# sourceMappingURL=Popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,iBAAS,OAAO,CAAC,EAAE,SAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,2CAEhF;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,2CAEnE;AAED,iBAAS,cAAc,CAAC,EACpB,SAAS,EACT,KAAgB,EAChB,WAAe,EACf,IAAe,EACf,UAAc,EACd,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,EACN,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC3B,IAAI,CACA,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAC/B,OAAO,GACP,aAAa,GACb,MAAM,GACN,YAAY,GACZ,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,QAAQ,GACR,oBAAoB,CACzB,GAAG;IACA,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAA;CACpD,2CAuDJ;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAY1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,2CAY1E;AAED,iBAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,WAAW,CAAC,KAAK,2CAYpC;AAGD,OAAO,EACH,OAAO,EACP,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,cAAc,GACjB,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/components/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,wDAAwD,CAAC;AAKnF,QAAA,MAAM,gBAAgB;;;;;;EAWpB,CAAC;AAEH,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAe3E;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;0HA6BlB,CAAC;AAIH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC"}