@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCalendar } from '@fortawesome/pro-solid-svg-icons';\n\nimport {\n    Button,\n    Calendar,\n    Popover,\n    PopoverContent,\n    PopoverTrigger,\n} from '@verbb/plugin-kit-react/components';\n\nimport { cn, hostFormatDate } from '@verbb/plugin-kit-react/utils';\nimport { parseLocalDate, resolveCalendarMonth } from '@verbb/plugin-kit-react/utils/datetime';\n\nconst toDate = (value: Date | string | null | undefined): Date | undefined => {\n    return parseLocalDate(value);\n};\n\nexport function DatePicker({\n    value,\n    onValueChange,\n    placeholder = '',\n    className,\n    disabled = false,\n    isInvalid = false,\n    ...props\n}: {\n    value: Date | string | null;\n    onValueChange?: (value: Date | undefined) => void;\n    placeholder?: string;\n    className?: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n}) {\n    const [open, setOpen] = useState(false);\n    const date = useMemo(() => toDate(value), [value]);\n    const [month, setMonth] = useState(() => resolveCalendarMonth(date));\n\n    useEffect(() => {\n        if (date) {\n            setMonth(resolveCalendarMonth(date));\n        }\n    }, [date]);\n\n    const handleOpenChange = (nextOpen: boolean) => {\n        if (nextOpen) {\n            setMonth(resolveCalendarMonth(date));\n        }\n\n        setOpen(nextOpen);\n    };\n\n    const handleSelect = (selectedDate?: Date) => {\n        onValueChange?.(selectedDate);\n        setOpen(false);\n    };\n\n    return (\n        <Popover open={open} onOpenChange={handleOpenChange}>\n            <PopoverTrigger\n                render={\n                    <Button\n                        variant=\"outline\"\n                        className={cn(\n                            'min-h-[2.125rem] h-[2.125rem]',\n                            'w-[130px] px-[10px] !py-0',\n                            '!cursor-default',\n                            'justify-start text-left font-normal',\n                            'bg-transparent border border-slate-400',\n                            'hover:bg-slate-50!',\n                            'active:bg-slate-150!',\n                            'data-[popup-open]:bg-slate-150!',\n                            '[&>svg]:size-[14px]',\n\n                            isInvalid && [\n                                'border-rose-600!',\n                                'focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!',\n                            ],\n                            className,\n                        )}\n                        disabled={disabled}\n                        {...props}\n                    >\n                        <FontAwesomeIcon\n                            icon={faCalendar}\n                            className={cn(\n                                'mr-1 text-gray-400',\n                            )}\n                        />\n                        {date ? hostFormatDate(date) : placeholder}\n                    </Button>\n                } />\n\n            <PopoverContent\n                className={cn(\n                    // Popover width and padding\n                    'w-auto p-0!',\n                )}\n            >\n                <Calendar\n                    mode=\"single\"\n                    selected={date}\n                    month={month}\n                    onMonthChange={setMonth}\n                    captionLayout=\"dropdown\"\n                    onSelect={handleSelect}\n                />\n            </PopoverContent>\n        </Popover >\n    );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,UAAU,UAA8D;AAC1E,QAAO,eAAe,MAAM;;AAGhC,SAAgB,WAAW,EACvB,OACA,eACA,cAAc,IACd,WACA,WAAW,OACX,YAAY,OACZ,GAAG,SAQJ;CACC,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,OAAO,cAAc,OAAO,MAAM,EAAE,CAAC,MAAM,CAAC;CAClD,MAAM,CAAC,OAAO,YAAY,eAAe,qBAAqB,KAAK,CAAC;AAEpE,iBAAgB;AACZ,MAAI,KACA,UAAS,qBAAqB,KAAK,CAAC;IAEzC,CAAC,KAAK,CAAC;CAEV,MAAM,oBAAoB,aAAsB;AAC5C,MAAI,SACA,UAAS,qBAAqB,KAAK,CAAC;AAGxC,UAAQ,SAAS;;CAGrB,MAAM,gBAAgB,iBAAwB;AAC1C,kBAAgB,aAAa;AAC7B,UAAQ,MAAM;;AAGlB,QACI,qBAAC,SAAD;EAAe;EAAM,cAAc;YAAnC,CACI,oBAAC,gBAAD,EACI,QACI,qBAAC,QAAD;GACI,SAAQ;GACR,WAAW,GACP,iCACA,6BACA,mBACA,uCACA,0CACA,sBACA,wBACA,mCACA,uBAEA,aAAa,CACT,oBACA,8GACH,EACD,UACH;GACS;GACV,GAAI;aApBR,CAsBI,oBAAC,iBAAD;IACI,MAAM;IACN,WAAW,GACP,qBACH;IACH,CAAA,EACD,OAAO,eAAe,KAAK,GAAG,YAC1B;MACT,CAAA,EAER,oBAAC,gBAAD;GACI,WAAW,GAEP,cACH;aAED,oBAAC,UAAD;IACI,MAAK;IACL,UAAU;IACH;IACP,eAAe;IACf,eAAc;IACd,UAAU;IACZ,CAAA;GACW,CAAA,CACV"}
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkDatePicker, type PkDatePickerMode, type PkDatePickerSize } from '@verbb/plugin-kit-web/components/date-picker/pk-date-picker.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkDatePickerElement = createPluginKitComponent({\n    tagName: 'pk-date-picker',\n    elementClass: PkDatePicker,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkClear: 'pk-clear',\n        onInput: 'input',\n        onChange: 'change',\n        onPkShow: 'pk-show',\n        onPkAfterShow: 'pk-after-show',\n        onPkHide: 'pk-hide',\n        onPkAfterHide: 'pk-after-hide',\n    },\n});\n\ntype PkDatePickerElementProps = React.ComponentProps<typeof PkDatePickerElement>;\n\nexport type DatePickerProps = Omit<PkDatePickerElementProps, 'value' | 'onPkChange'> & {\n    /** ISO string, Date, or empty — v1 DatePicker accepted Date. */\n    value?: string | Date | null;\n    /** React/Formie alias for the CE `invalid` boolean. */\n    isInvalid?: boolean;\n    /**\n     * v1 callback — receives a local `Date` (or `undefined` when cleared).\n     * Prefer `onPkChange` for raw ISO `detail.value` from the CE.\n     */\n    onValueChange?: (value: Date | undefined) => void;\n    onPkChange?: PkDatePickerElementProps['onPkChange'];\n};\n\n/** Local YYYY-MM-DD — keep facade free of non-exported kit util paths. */\nfunction formatIsoDate(date: Date): string {\n    const year = String(date.getFullYear()).padStart(4, '0');\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n\n    return `${year}-${month}-${day}`;\n}\n\nfunction parseIsoDate(value: string): Date | null {\n    const match = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value.trim());\n\n    if (!match) {\n        return null;\n    }\n\n    const year = Number(match[1]);\n    const month = Number(match[2]);\n    const day = Number(match[3]);\n    const date = new Date(year, month - 1, day);\n\n    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n        return null;\n    }\n\n    return date;\n}\n\n/** Coerce Formie/v1 Date|string values to the CE’s ISO `YYYY-MM-DD` string. */\nfunction toIsoValue(value: string | Date | null | undefined): string {\n    if (value == null || value === '') {\n        return '';\n    }\n\n    if (value instanceof Date) {\n        if (Number.isNaN(value.getTime())) {\n            return '';\n        }\n\n        return formatIsoDate(value);\n    }\n\n    const dateOnly = String(value).match(/^(\\d{4}-\\d{2}-\\d{2})/);\n\n    return dateOnly ? dateOnly[1] : String(value);\n}\n\n/** React facade over `<pk-date-picker>`. Behavior and styles live in the web component. */\nexport const DatePicker = forwardRef<PkDatePicker, DatePickerProps>(function DatePicker(props, ref) {\n    const {\n        value,\n        onValueChange,\n        onPkChange,\n        disabled,\n        invalid,\n        isInvalid,\n        clearable,\n        multiple,\n        open,\n        disablePast,\n        disableFuture,\n        withClear,\n        required,\n        ...rest\n    } = props;\n\n    // Docs / Formie often pass `isInvalid`; Lit property is `invalid`.\n    const resolvedInvalid = Boolean(invalid ?? isInvalid);\n    const isoValue = useMemo(() => toIsoValue(value), [value]);\n\n    const handlePkChange = (event: CustomEvent<{ value?: string }>) => {\n        onPkChange?.(event as never);\n\n        if (!onValueChange) {\n            return;\n        }\n\n        const next = event.detail?.value;\n        onValueChange(next ? (parseIsoDate(next) ?? undefined) : undefined);\n    };\n\n    return (\n        <PkDatePickerElement\n            ref={ref}\n            {...rest}\n            value={isoValue}\n            onPkChange={handlePkChange}\n            {...trueBooleanProps(\n                [\n                    'disabled',\n                    'invalid',\n                    'clearable',\n                    'multiple',\n                    'open',\n                    'disablePast',\n                    'disableFuture',\n                    'withClear',\n                    'required',\n                ],\n                {\n                    disabled,\n                    invalid: resolvedInvalid,\n                    clearable,\n                    multiple,\n                    open,\n                    disablePast,\n                    disableFuture,\n                    withClear,\n                    required,\n                },\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport { PkDatePickerElement };\nexport type { PkDatePickerMode, PkDatePickerSize };\n"],"mappings":";;;;;;AAMA,IAAM,sBAAsB,yBAAyB;CACjD,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,UAAU;EACV,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EAClB;CACJ,CAAC;;AAkBF,SAAS,cAAc,MAAoB;AAKvC,QAAO,GAJM,OAAO,KAAK,aAAa,CAAC,CAAC,SAAS,GAAG,IAI1C,CAAK,GAHD,OAAO,KAAK,UAAU,GAAG,EAAE,CAAC,SAAS,GAAG,IAGpC,CAAM,GAFZ,OAAO,KAAK,SAAS,CAAC,CAAC,SAAS,GAAG,IAEpB;;AAG/B,SAAS,aAAa,OAA4B;CAC9C,MAAM,QAAQ,4BAA4B,KAAK,MAAM,MAAM,CAAC;AAE5D,KAAI,CAAC,MACD,QAAO;CAGX,MAAM,OAAO,OAAO,MAAM,GAAG;CAC7B,MAAM,QAAQ,OAAO,MAAM,GAAG;CAC9B,MAAM,MAAM,OAAO,MAAM,GAAG;CAC5B,MAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,IAAI;AAE3C,KAAI,KAAK,aAAa,KAAK,QAAQ,KAAK,UAAU,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,IACnF,QAAO;AAGX,QAAO;;;AAIX,SAAS,WAAW,OAAiD;AACjE,KAAI,SAAS,QAAQ,UAAU,GAC3B,QAAO;AAGX,KAAI,iBAAiB,MAAM;AACvB,MAAI,OAAO,MAAM,MAAM,SAAS,CAAC,CAC7B,QAAO;AAGX,SAAO,cAAc,MAAM;;CAG/B,MAAM,WAAW,OAAO,MAAM,CAAC,MAAM,uBAAuB;AAE5D,QAAO,WAAW,SAAS,KAAK,OAAO,MAAM;;;AAIjD,IAAa,aAAa,WAA0C,SAAS,WAAW,OAAO,KAAK;CAChG,MAAM,EACF,OACA,eACA,YACA,UACA,SACA,WACA,WACA,UACA,MACA,aACA,eACA,WACA,UACA,GAAG,SACH;CAGJ,MAAM,kBAAkB,QAAQ,WAAW,UAAU;CACrD,MAAM,WAAW,cAAc,WAAW,MAAM,EAAE,CAAC,MAAM,CAAC;CAE1D,MAAM,kBAAkB,UAA2C;AAC/D,eAAa,MAAe;AAE5B,MAAI,CAAC,cACD;EAGJ,MAAM,OAAO,MAAM,QAAQ;AAC3B,gBAAc,OAAQ,aAAa,KAAK,IAAI,KAAA,IAAa,KAAA,EAAU;;AAGvE,QACI,oBAAC,qBAAD;EACS;EACL,GAAI;EACJ,OAAO;EACP,YAAY;EACZ,GAAI,iBACA;GACI;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACH,EACD;GACI;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACH,CACJ;EACH,CAAA;EAER;AAEF,WAAW,cAAc"}

package/dist/components/Dialog.d.ts

@@ -1,21 +1,21 @@
-import { ComponentProps } from 'react';
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
-declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, autoFocusFirstInput, portalClassName, portalContainer, ...props }: ComponentProps<typeof DialogPrimitive.Popup> & {
-    showCloseButton?: boolean;
-    autoFocusFirstInput?: boolean;
-    portalClassName?: string;
-    portalContainer?: HTMLElement | ShadowRoot | null;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, showCloseButton, children, ...props }: ComponentProps<'div'> & {
-    showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
-export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+import { default as React } from 'react';
+import { PkDialog } from '@verbb/plugin-kit-web/components/dialog/pk-dialog.js';
+declare const PkDialogElement: import('@lit/react').ReactWebComponent<PkDialog, {
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+type PkDialogElementProps = React.ComponentProps<typeof PkDialogElement>;
+/** React facade over `<pk-dialog>`. Behavior and styles live in the web component. */
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkDialog>, "show" | "hide" | "open" | "label" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "size" | "onPkShow" | "onPkAfterShow" | "onPkHide" | "onPkAfterHide" | "onPkOpenChange" | "description" | "disablePointerDismissal" | "withoutHeader" | "withoutBodyPadding" | "closeDialog" | "requestClose" | "forceOverlayReset"> & {
+    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<PkDialog, keyof HTMLElement>> & React.RefAttributes<PkDialog>, "ref"> & React.RefAttributes<PkDialog>>;
+export { PkDialogElement };
+export type DialogProps = PkDialogElementProps;
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQlE,iBAAS,MAAM,CAAC,EACZ,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE7C;AACD,iBAAS,aAAa,CAAC,EACnB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEhD;AACD,iBAAS,YAAY,CAAC,EAClB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAE/C;AACD,iBAAS,WAAW,CAAC,EACjB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAE9C;AAED,iBAAS,aAAa,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAyCjD;AAED,iBAAS,aAAa,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,eAAuB,EACvB,mBAA0B,EAC1B,eAAe,EACf,eAAe,EACf,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAA;CACpD,2CAgKA;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,eAAsB,EACtB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC5B,2CA2CA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAkBnE;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAa9C;AAED,iBAAS,iBAAiB,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAapD;AAED,OAAO,EACH,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GACpB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,sDAAsD,CAAC;AAKhF,QAAA,MAAM,eAAe;;;;;;EAWnB,CAAC;AAEH,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAezE,sFAAsF;AACtF,eAAO,MAAM,MAAM;;;;;;uHAoCjB,CAAC;AAIH,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC"}

package/dist/components/Dialog.js

@@ -1,179 +1,54 @@
-import { cn } from "../utils/classes.js";
-import { getPortalClassName, getPortalContainer } from "../utils/portal.js";
-import "../utils/index.js";
-import { useTranslation } from "../hooks/useTranslation.js";
-import "../hooks/index.js";
-import { useCallback, useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faXmark } from "@fortawesome/pro-solid-svg-icons";
-import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+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 { PkDialog } from "@verbb/plugin-kit-web/components/dialog/pk-dialog.js";
 //#region src/components/Dialog.tsx
-function Dialog({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, {
-		"data-slot": "dialog",
-		...props
-	});
-}
-function DialogTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
-		"data-slot": "dialog-trigger",
-		...props
-	});
-}
-function DialogPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
-		"data-slot": "dialog-portal",
-		...props
-	});
-}
-function DialogClose({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Close, {
-		"data-slot": "dialog-close",
-		...props
-	});
-}
-function DialogOverlay({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
-		"data-slot": "dialog-overlay",
-		forceRender: true,
-		className: cn("fixed isolate z-50 inset-0", "bg-gray-900/20", "data-[open]:animate-in data-[closed]:animate-out", "data-[closed]:fade-out-0 data-[open]:fade-in-0", className),
-		onPointerDown: (event) => {
-			const { target } = event;
-			if (target instanceof HTMLElement && target.classList.contains("modal-shade")) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-			if (target instanceof HTMLElement && target.closest(".modal")) {
-				event.preventDefault();
-				event.stopPropagation();
-			}
-		},
-		...props
-	});
-}
-function DialogContent({ className, children, showCloseButton = false, autoFocusFirstInput = true, portalClassName, portalContainer, ...props }) {
-	const resolvedPortalClassName = getPortalClassName(portalClassName);
-	const resolvedPortalContainer = getPortalContainer(portalContainer);
-	const t = useTranslation();
-	const contentRef = useRef(null);
-	const findFirstInput = useCallback((root) => {
-		const focusSelector = [
-			"input:not([type=\"hidden\"]):not([disabled])",
-			"textarea:not([disabled])",
-			"select:not([disabled])"
-		].join(", ");
-		return root.querySelector(focusSelector);
-	}, []);
-	const focusFirstInput = useCallback((root) => {
-		const candidate = findFirstInput(root);
-		if (!candidate) return false;
-		if (candidate instanceof HTMLInputElement || candidate instanceof HTMLTextAreaElement) {
-			if (candidate.value.length > 0) return true;
-		}
-		candidate.focus?.();
-		if (candidate instanceof HTMLInputElement || candidate instanceof HTMLTextAreaElement) {
-			const cursorPosition = candidate.value.length;
-			window.setTimeout(() => {
-				candidate.setSelectionRange?.(cursorPosition, cursorPosition);
-			}, 0);
-		}
-		return true;
-	}, [findFirstInput]);
-	useEffect(() => {
-		if (!autoFocusFirstInput) return;
-		const root = contentRef.current;
-		if (!root) return;
-		let attemptCount = 0;
-		const maxAttempts = 10;
-		const attemptFocus = () => {
-			const activeElement = document.activeElement;
-			if (activeElement && root.contains(activeElement)) {
-				if (activeElement.matches("input, textarea, select")) return;
-			}
-			if (focusFirstInput(root)) return;
-			attemptCount += 1;
-			if (attemptCount < maxAttempts) window.setTimeout(attemptFocus, 50);
-		};
-		const frame = window.requestAnimationFrame(attemptFocus);
-		return () => {
-			window.cancelAnimationFrame(frame);
-		};
-	}, [
-		autoFocusFirstInput,
-		children,
-		focusFirstInput
-	]);
-	return /* @__PURE__ */ jsxs(DialogPortal, {
-		"data-slot": "dialog-portal",
-		className: resolvedPortalClassName,
-		container: resolvedPortalContainer,
-		children: [/* @__PURE__ */ jsx(DialogOverlay, { "data-slot": "dialog-overlay" }), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-			"data-slot": "dialog-content",
-			ref: contentRef,
-			initialFocus: () => {
-				if (!autoFocusFirstInput) return false;
-				const root = contentRef.current;
-				if (!root) return true;
-				return !focusFirstInput(root);
-			},
-			className: cn("fixed z-50 left-[50%] top-[50%] w-full max-w-5xl", "flex flex-col", "bg-white", "rounded-lg", "shadow-modal", "translate-x-[-50%] translate-y-[-50%]", "data-[open]:animate-in data-[closed]:animate-out", "data-[closed]:fade-out-0 data-[open]:fade-in-0", "data-[closed]:zoom-out-95 data-[open]:zoom-in-95", className),
-			...props,
-			children: [showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
-				"data-slot": "dialog-close",
-				className: cn("absolute right-4 top-4 rounded-sm cursor-pointer", "opacity-70 ring-offset-background transition-opacity", "hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "data-[open]:bg-blue-500 data-[open]:text-white"),
-				children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
-					icon: faXmark,
-					className: "size-4.5"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: t("Close")
-				})]
-			}), children]
-		})]
-	});
-}
-function DialogHeader({ className, showCloseButton = true, children, ...props }) {
-	const t = useTranslation();
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "dialog-header",
-		className: cn("relative flex flex-col space-y-1.5", "text-left", "rounded-t-lg", "gap-1", "bg-[#f3f7fb] py-4 px-4", "border-b border-b-gray-150", className),
-		...props,
-		children: [showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
-			"data-slot": "dialog-close",
-			className: cn("absolute right-4 top-[50%] translate-y-[-50%] rounded-sm cursor-pointer", "opacity-70 ring-offset-background transition-opacity", "hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", "data-[open]:bg-blue-500 data-[open]:text-white"),
-			children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
-				icon: faXmark,
-				className: "size-4.5"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: t("Close")
-			})]
-		}), children]
-	});
-}
-function DialogFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-footer",
-		className: cn("flex flex-row justify-end", "rounded-b-lg", "bg-[#e4edf6] py-[10px] px-4", "border-t border-t-gray-150", className),
-		...props
-	});
-}
-function DialogTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Title, {
-		"data-slot": "dialog-title",
-		className: cn("text-[15px] font-semibold leading-none m-0", className),
-		...props
-	});
-}
-function DialogDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Description, {
-		"data-slot": "dialog-description",
-		className: cn("text-xs text-gray-500", className),
-		...props
-	});
-}
+var PkDialogElement = createPluginKitComponent({
+	tagName: "pk-dialog",
+	elementClass: PkDialog,
+	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-dialog>`. Behavior and styles live in the web component. */
+var Dialog = React.forwardRef(function Dialog(props, ref) {
+	const { open, disablePointerDismissal, withoutHeader, withoutBodyPadding, onPkShow, onPkAfterShow, onPkHide, onPkAfterHide, onPkOpenChange, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkDialogElement, {
+		ref,
+		...rest,
+		open,
+		...trueBooleanProps([
+			"disablePointerDismissal",
+			"withoutHeader",
+			"withoutBodyPadding"
+		], {
+			disablePointerDismissal,
+			withoutHeader,
+			withoutBodyPadding
+		}),
+		...onPkShow ? { onPkShow: bindHostEvent(onPkShow) } : {},
+		...onPkAfterShow ? { onPkAfterShow: bindHostEvent(onPkAfterShow) } : {},
+		...onPkHide ? { onPkHide: bindHostEvent(onPkHide) } : {},
+		...onPkAfterHide ? { onPkAfterHide: bindHostEvent(onPkAfterHide) } : {},
+		...onPkOpenChange ? { onPkOpenChange: bindHostEvent(onPkOpenChange) } : {}
+	});
+});
+Dialog.displayName = "Dialog";
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+export { Dialog, PkDialogElement };
 
 //# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import { ComponentProps, useCallback, useEffect, useRef } from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nfunction Dialog({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Root>) {\n    return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\nfunction DialogTrigger({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Trigger>) {\n    return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\nfunction DialogPortal({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Portal>) {\n    return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\nfunction DialogClose({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Close>) {\n    return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n    className,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Backdrop>) {\n    return (\n        <DialogPrimitive.Backdrop\n            data-slot=\"dialog-overlay\"\n            forceRender\n            className={cn(\n                // Reset\n                'fixed isolate z-50 inset-0',\n\n                // Ensure we play well with Craft's modals\n                // 'z-[99]',\n\n                // Theme\n                'bg-gray-900/20',\n\n                // State\n                'data-[open]:animate-in data-[closed]:animate-out',\n                'data-[closed]:fade-out-0 data-[open]:fade-in-0',\n\n                // \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n\n                className,\n            )}\n            onPointerDown={(event) => {\n                const { target } = event;\n\n                // If we've got a Garnish modal open, allow that to take focus. Includes the shade and the modal content.\n                if (target instanceof HTMLElement && target.classList.contains('modal-shade')) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                // If we've got a Garnish modal open, allow that to take focus. Includes the shade and the modal content.\n                if (target instanceof HTMLElement && target.closest('.modal')) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            }}\n            {...props}\n        />\n    );\n};\n\nfunction DialogContent({\n    className,\n    children,\n    showCloseButton = false,\n    autoFocusFirstInput = true,\n    portalClassName,\n    portalContainer,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Popup> & {\n    showCloseButton?: boolean\n    autoFocusFirstInput?: boolean\n    portalClassName?: string\n    portalContainer?: HTMLElement | ShadowRoot | null\n}) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n    const t = useTranslation();\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const findFirstInput = useCallback((root: HTMLElement): HTMLElement | null => {\n        const focusSelector = [\n            'input:not([type=\"hidden\"]):not([disabled])',\n            'textarea:not([disabled])',\n            'select:not([disabled])',\n        ].join(', ');\n\n        return root.querySelector<HTMLElement>(focusSelector);\n    }, []);\n\n    const focusFirstInput = useCallback((root: HTMLElement): boolean => {\n        const candidate = findFirstInput(root);\n\n        if (!candidate) {\n            return false;\n        }\n\n        // Do not autofocus a pre-populated input/textarea, and do not\n        // fall through to later fields.\n        if (candidate instanceof HTMLInputElement || candidate instanceof HTMLTextAreaElement) {\n            if (candidate.value.length > 0) {\n                return true;\n            }\n        }\n\n        candidate.focus?.();\n\n        // Place a caret for text-like inputs so users can type immediately.\n        if (candidate instanceof HTMLInputElement || candidate instanceof HTMLTextAreaElement) {\n            const cursorPosition = candidate.value.length;\n\n            window.setTimeout(() => {\n                candidate.setSelectionRange?.(cursorPosition, cursorPosition);\n            }, 0);\n        }\n\n        return true;\n    }, [findFirstInput]);\n\n    useEffect(() => {\n        if (!autoFocusFirstInput) {\n            return;\n        }\n\n        const root = contentRef.current;\n\n        if (!root) {\n            return;\n        }\n\n        let attemptCount = 0;\n        const maxAttempts = 10;\n\n        const attemptFocus = () => {\n            const activeElement = document.activeElement as HTMLElement | null;\n\n            // Stop once an input inside this dialog is already focused.\n            if (activeElement && root.contains(activeElement)) {\n                if (activeElement.matches('input, textarea, select')) {\n                    return;\n                }\n            }\n\n            if (focusFirstInput(root)) {\n                return;\n            }\n\n            attemptCount += 1;\n\n            if (attemptCount < maxAttempts) {\n                window.setTimeout(attemptFocus, 50);\n            }\n        };\n\n        // Defer one frame to allow lazy schema hydration to mount fields.\n        const frame = window.requestAnimationFrame(attemptFocus);\n\n        return () => {\n            window.cancelAnimationFrame(frame);\n        };\n    }, [autoFocusFirstInput, children, focusFirstInput]);\n\n    return (\n        <DialogPortal\n            data-slot=\"dialog-portal\"\n            className={resolvedPortalClassName}\n            container={resolvedPortalContainer}\n        >\n            <DialogOverlay data-slot=\"dialog-overlay\" />\n\n            <DialogPrimitive.Popup\n                data-slot=\"dialog-content\"\n                ref={contentRef}\n                initialFocus={() => {\n                    if (!autoFocusFirstInput) {\n                        return false;\n                    }\n\n                    const root = contentRef.current;\n\n                    if (!root) {\n                        return true;\n                    }\n\n                    return !focusFirstInput(root);\n                }}\n                className={cn(\n                    // Reset\n                    'fixed z-50 left-[50%] top-[50%] w-full max-w-5xl',\n                    'flex flex-col',\n\n                    // Ensure we play well with Craft's modals; nested dialogs stack above parent\n                    // 'z-[99] data-[nested]:z-[100]',\n\n                    // Theme\n                    'bg-white',\n                    'rounded-lg',\n                    'shadow-modal',\n\n                    // Transform\n                    'translate-x-[-50%] translate-y-[-50%]',\n\n                    // State Animations\n                    'data-[open]:animate-in data-[closed]:animate-out',\n                    'data-[closed]:fade-out-0 data-[open]:fade-in-0',\n                    'data-[closed]:zoom-out-95 data-[open]:zoom-in-95',\n\n                    className,\n                )}\n                {...props}\n            >\n                {showCloseButton && (\n                    <DialogPrimitive.Close\n                        data-slot=\"dialog-close\"\n                        className={cn(\n                            // Reset\n                            'absolute right-4 top-4 rounded-sm cursor-pointer',\n\n                            // Theme\n                            'opacity-70 ring-offset-background transition-opacity',\n\n                            // State\n                            'hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',\n                            'data-[open]:bg-blue-500 data-[open]:text-white',\n                        )}\n                    >\n                        <FontAwesomeIcon icon={faXmark} className=\"size-4.5\" />\n                        <span className=\"sr-only\">{t('Close')}</span>\n                    </DialogPrimitive.Close>\n                )}\n                {children}\n            </DialogPrimitive.Popup>\n        </DialogPortal>\n    );\n};\n\nfunction DialogHeader({\n    className,\n    showCloseButton = true,\n    children,\n    ...props\n}: ComponentProps<'div'> & {\n    showCloseButton?: boolean\n}) {\n    const t = useTranslation();\n\n    return (\n        <div\n            data-slot=\"dialog-header\"\n            className={cn(\n                // Reset\n                'relative flex flex-col space-y-1.5',\n                'text-left',\n                'rounded-t-lg',\n                'gap-1',\n\n                // Theme\n                'bg-[#f3f7fb] py-4 px-4',\n                'border-b border-b-gray-150',\n\n                className,\n            )}\n            {...props}\n        >\n            {showCloseButton && (\n                <DialogPrimitive.Close\n                    data-slot=\"dialog-close\"\n                    className={cn(\n                        // Reset\n                        'absolute right-4 top-[50%] translate-y-[-50%] rounded-sm cursor-pointer',\n\n                        // Theme\n                        'opacity-70 ring-offset-background transition-opacity',\n\n                        // State\n                        'hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',\n                        'data-[open]:bg-blue-500 data-[open]:text-white',\n                    )}\n                >\n                    <FontAwesomeIcon icon={faXmark} className=\"size-4.5\" />\n                    <span className=\"sr-only\">{t('Close')}</span>\n                </DialogPrimitive.Close>\n            )}\n            {children}\n        </div>\n    );\n};\n\nfunction DialogFooter({ className, ...props }: ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"dialog-footer\"\n            className={cn(\n                // Reset\n                'flex flex-row justify-end',\n                'rounded-b-lg',\n\n                // Theme\n                'bg-[#e4edf6] py-[10px] px-4',\n                'border-t border-t-gray-150',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DialogTitle({\n    className,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Title>) {\n    return (\n        <DialogPrimitive.Title\n            data-slot=\"dialog-title\"\n            className={cn(\n                // Reset\n                'text-[15px] font-semibold leading-none m-0',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DialogDescription({\n    className,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\n    return (\n        <DialogPrimitive.Description\n            data-slot=\"dialog-description\"\n            className={cn(\n                // Reset\n                'text-xs text-gray-500',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    Dialog,\n    DialogPortal,\n    DialogOverlay,\n    DialogClose,\n    DialogTrigger,\n    DialogContent,\n    DialogHeader,\n    DialogFooter,\n    DialogTitle,\n    DialogDescription,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import React from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkDialog } from '@verbb/plugin-kit-web/components/dialog/pk-dialog.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\nimport { isHostEvent } from '../utils/isHostEvent.js';\n\nconst PkDialogElement = createPluginKitComponent({\n    tagName: 'pk-dialog',\n    elementClass: PkDialog,\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 PkDialogElementProps = React.ComponentProps<typeof PkDialogElement>;\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/** React facade over `<pk-dialog>`. Behavior and styles live in the web component. */\nexport const Dialog = React.forwardRef<PkDialog, PkDialogElementProps>(function Dialog(props, ref) {\n    const {\n        open,\n        disablePointerDismissal,\n        withoutHeader,\n        withoutBodyPadding,\n        onPkShow,\n        onPkAfterShow,\n        onPkHide,\n        onPkAfterHide,\n        onPkOpenChange,\n        ...rest\n    } = props;\n\n    return (\n        <PkDialogElement\n            ref={ref}\n            {...rest}\n            // `open` must always forward false so controlled dialogs can close.\n            open={open}\n            {...trueBooleanProps(\n                ['disablePointerDismissal', 'withoutHeader', 'withoutBodyPadding'],\n                {\n                    disablePointerDismissal,\n                    withoutHeader,\n                    withoutBodyPadding,\n                },\n            )}\n            // Nested tooltip/popover/select also emit these — only the dialog host counts.\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\nDialog.displayName = 'Dialog';\n\nexport { PkDialogElement };\nexport type DialogProps = PkDialogElementProps;\n"],"mappings":";;;;;;;AAOA,IAAM,kBAAkB,yBAAyB;CAC7C,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;;;;AAKtB,IAAa,SAAS,MAAM,WAA2C,SAAS,OAAO,OAAO,KAAK;CAC/F,MAAM,EACF,MACA,yBACA,eACA,oBACA,UACA,eACA,UACA,eACA,gBACA,GAAG,SACH;AAEJ,QACI,oBAAC,iBAAD;EACS;EACL,GAAI;EAEE;EACN,GAAI,iBACA;GAAC;GAA2B;GAAiB;GAAqB,EAClE;GACI;GACA;GACA;GACH,CACJ;EAED,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,OAAO,cAAc"}

package/dist/components/DropdownMenu.d.ts

@@ -1,47 +1,40 @@
-import { ComponentProps } from 'react';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import { VariantProps } from 'class-variance-authority';
-declare const dropdownMenuItemVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    variant?: "default" | "destructive" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const dropdownMenuLabelVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];
-declare function DropdownMenu({ size, children, ...props }: ComponentProps<typeof MenuPrimitive.Root> & {
-    size?: DropdownMenuSize;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuPortal({ container, ...props }: ComponentProps<typeof MenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuTrigger({ size, ...props }: ComponentProps<typeof MenuPrimitive.Trigger> & {
-    size?: DropdownMenuSize;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, positionMethod, className, portalClassName, portalContainer, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'positionMethod'> & {
-    portalClassName?: string;
-    portalContainer?: HTMLElement | ShadowRoot | null;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuLabel({ className, inset, size, ...props }: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {
-    inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuItem({ className, inset, size, variant, ...props }: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
-    inset?: boolean;
-    variant?: 'default' | 'destructive';
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSub({ ...props }: ComponentProps<typeof MenuPrimitive.SubmenuRoot>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, size, ...props }: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
-    inset?: boolean;
-    size?: DropdownMenuSize;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
-    inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof MenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
-    inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+import { default as React } from 'react';
+import { PkDropdownItem, PkDropdownItemType } from '@verbb/plugin-kit-web/components/dropdown-menu/pk-dropdown-item.js';
+import { PkDropdownLabel } from '@verbb/plugin-kit-web/components/dropdown-menu/pk-dropdown-label.js';
+import { PkDropdownMenu, PkMenuItem } from '@verbb/plugin-kit-web/components/dropdown-menu/pk-dropdown-menu.js';
+import { PkDropdownSeparator } from '@verbb/plugin-kit-web/components/dropdown-menu/pk-dropdown-separator.js';
+/** React facades over the `<pk-dropdown-menu>` family. Behavior and styles live in the web components. */
+export declare const PkDropdownMenuElement: import('@lit/react').ReactWebComponent<PkDropdownMenu, {
+    onPkSelect: string;
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+export declare const PkDropdownItemElement: import('@lit/react').ReactWebComponent<PkDropdownItem, {
+    onPkSelect: string;
+    onPkSubmenuOpen: string;
+}>;
+export declare const PkDropdownLabelElement: import('@lit/react').ReactWebComponent<PkDropdownLabel, {}>;
+export declare const PkDropdownSeparatorElement: import('@lit/react').ReactWebComponent<PkDropdownSeparator, {}>;
+export declare const DropdownMenu: import('@lit/react').ReactWebComponent<PkDropdownMenu, {
+    onPkSelect: string;
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+export declare const DropdownItem: import('@lit/react').ReactWebComponent<PkDropdownItem, {
+    onPkSelect: string;
+    onPkSubmenuOpen: string;
+}>;
+export declare const DropdownLabel: import('@lit/react').ReactWebComponent<PkDropdownLabel, {}>;
+export declare const DropdownSeparator: import('@lit/react').ReactWebComponent<PkDropdownSeparator, {}>;
+export type DropdownMenuProps = React.ComponentProps<typeof PkDropdownMenuElement>;
+export type DropdownItemProps = React.ComponentProps<typeof PkDropdownItemElement>;
+export type DropdownLabelProps = React.ComponentProps<typeof PkDropdownLabelElement>;
+export type DropdownSeparatorProps = React.ComponentProps<typeof PkDropdownSeparatorElement>;
+export type { PkDropdownItemType, PkMenuItem };
 //# sourceMappingURL=DropdownMenu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,oEAAoE,CAAC;AAC7H,OAAO,EAAE,eAAe,EAAE,MAAM,qEAAqE,CAAC;AACtG,OAAO,EAAE,cAAc,EAAE,MAAM,oEAAoE,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,MAAM,yEAAyE,CAAC;AAC9G,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oEAAoE,CAAC;AAErG,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB;;;;;;;EAYhC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;EAQhC,CAAC;AAEH,eAAO,MAAM,sBAAsB,6DAIjC,CAAC;AAEH,eAAO,MAAM,0BAA0B,iEAIrC,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;EAAwB,CAAC;AAClD,eAAO,MAAM,YAAY;;;EAAwB,CAAC;AAClD,eAAO,MAAM,aAAa,6DAAyB,CAAC;AACpD,eAAO,MAAM,iBAAiB,iEAA6B,CAAC;AAE5D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACnF,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACnF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACrF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAC7F,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}