@verbb/plugin-kit-react 1.0.9 → 2.0.0

package/dist/components/Select.d.ts

@@ -1,23 +1,47 @@
-import { ComponentProps } from 'react';
-import { Select as SelectPrimitive } from '@base-ui/react/select';
-import { VariantProps } from 'class-variance-authority';
-declare const selectTriggerVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type SelectSize = VariantProps<typeof selectTriggerVariants>['size'];
-declare function Select({ size, children, ...props }: ComponentProps<typeof SelectPrimitive.Root> & {
-    size?: SelectSize;
-}): import("react/jsx-runtime").JSX.Element;
-declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
-declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
-    size?: SelectSize;
-}): import("react/jsx-runtime").JSX.Element;
-declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, positionMethod, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger' | 'positionMethod'>): import("react/jsx-runtime").JSX.Element;
-declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
-declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
-declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
-declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): import("react/jsx-runtime").JSX.Element;
-declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): import("react/jsx-runtime").JSX.Element;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+import { default as React } from 'react';
+import { PkOption } from '@verbb/plugin-kit-web/components/select/pk-option.js';
+import { PkOptionGroup } from '@verbb/plugin-kit-web/components/select/pk-option-group.js';
+import { PkSelect, PkSelectSize } from '@verbb/plugin-kit-web/components/select/pk-select.js';
+declare const PkSelectElement: import('@lit/react').ReactWebComponent<PkSelect, {
+    onPkChange: string;
+    onPkClear: string;
+    onInput: string;
+    onChange: string;
+    onFocusOut: string;
+    onPkShow: string;
+    onPkAfterShow: string;
+    onPkHide: string;
+    onPkAfterHide: string;
+    onPkOpenChange: string;
+}>;
+declare const PkOptionElement: import('@lit/react').ReactWebComponent<PkOption, {
+    onPkOptionSelect: string;
+    onPkOptionHighlight: string;
+}>;
+export declare const PkOptionGroupElement: import('@lit/react').ReactWebComponent<PkOptionGroup, {}>;
+type PkSelectElementProps = React.ComponentProps<typeof PkSelectElement>;
+type PkOptionElementProps = React.ComponentProps<typeof PkOptionElement>;
+/** React facades over the `<pk-select>` family. Behavior and styles live in the web components. */
+export declare const Select: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkSelect>, "defaultValue" | "onChange" | "onInput" | "form" | "show" | "hide" | "open" | "input" | "values" | "value" | "firstUpdated" | "updated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "required" | "name" | "size" | "placeholder" | "invalid" | "onPkShow" | "onPkAfterShow" | "onPkHide" | "onPkAfterHide" | "onPkOpenChange" | "placement" | "sideOffset" | "multiple" | "onPkChange" | "assumeInteractionOn" | "validators" | "customError" | "valueHasChanged" | "hasInteracted" | "formResetCallback" | "formDisabledCallback" | "formStateRestoreCallback" | "labels" | "validity" | "willValidate" | "validationMessage" | "getForm" | "checkValidity" | "reportValidity" | "resetValidity" | "setCustomValidity" | "onPkClear" | "withClear" | "width" | "clearable" | "defaultValues" | "loopFocus" | "onFocusOut"> & {
+    onPkChange?: ((e: Event) => void) | undefined;
+    onPkClear?: ((e: Event) => void) | undefined;
+    onInput?: ((e: Event) => void) | undefined;
+    onChange?: ((e: Event) => void) | undefined;
+    onFocusOut?: ((e: Event) => void) | undefined;
+    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<PkSelect, keyof HTMLElement>> & React.RefAttributes<PkSelect>, "ref"> & React.RefAttributes<PkSelect>>;
+export declare const Option: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<PkOption>, "label" | "value" | "firstUpdated" | "render" | "connectedCallback" | "createRenderRoot" | "performUpdate" | "renderOptions" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "focusControl" | "onPkOptionSelect" | "onPkOptionHighlight" | "selected" | "highlighted" | "focusIndex" | "optionId" | "matchQuery" | "getLabel" | "getSearchText" | "getStartElements"> & {
+    onPkOptionSelect?: ((e: Event) => void) | undefined;
+    onPkOptionHighlight?: ((e: Event) => void) | undefined;
+} & Partial<Omit<PkOption, keyof HTMLElement>> & React.RefAttributes<PkOption>, "ref"> & React.RefAttributes<PkOption>>;
+export declare const OptionGroup: import('@lit/react').ReactWebComponent<PkOptionGroup, {}>;
+export { PkSelectElement, PkOptionElement };
+export type SelectProps = PkSelectElementProps;
+export type OptionProps = PkOptionElementProps;
+export type OptionGroupProps = React.ComponentProps<typeof PkOptionGroupElement>;
+export type { PkSelectSize };
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA6B,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,QAAA,MAAM,qBAAqB;;8EAazB,CAAC;AAsFH,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC;AAIrE,iBAAS,MAAM,CAAC,EACZ,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,2CAQrE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAUxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAaxE;AAED,iBAAS,aAAa,CAAC,EACnB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB,2CA0DA;AAGD,iBAAS,aAAa,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC1B,IAAI,CACA,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,GAAG,gBAAgB,CAC9F,2CA0DJ;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,2CAkBlC;AAED,iBAAS,UAAU,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,2CAqD5B;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,2CAmBjC;AAED,iBAAS,oBAAoB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,2CAsBtD;AAED,iBAAS,sBAAsB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,2CAsBxD;AAGD,OAAO,EACH,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACd,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,sDAAsD,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,4DAA4D,CAAC;AAC3F,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAInG,QAAA,MAAM,eAAe;;;;;;;;;;;EAiBnB,CAAC;AAEH,QAAA,MAAM,eAAe;;;EAQnB,CAAC;AAEH,eAAO,MAAM,oBAAoB,2DAI/B,CAAC;AAEH,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AACzE,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAEzE,mGAAmG;AACnG,eAAO,MAAM,MAAM;;;;;;;;;;;uHAiBjB,CAAC;AAIH,eAAO,MAAM,MAAM;;;uHAiBjB,CAAC;AAIH,eAAO,MAAM,WAAW,2DAAuB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC;AAC/C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/Select.js

@@ -1,207 +1,85 @@
-import { cn } from "../utils/classes.js";
-import { getPortalClassName, getPortalContainer } from "../utils/portal.js";
-import "../utils/index.js";
-import { createContext, useContext } from "react";
-import { cva } from "class-variance-authority";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faChevronDown, faChevronUp } from "@fortawesome/pro-solid-svg-icons";
-import { Select as Select$1 } from "@base-ui/react/select";
+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 { PkOption } from "@verbb/plugin-kit-web/components/select/pk-option.js";
+import { PkOptionGroup } from "@verbb/plugin-kit-web/components/select/pk-option-group.js";
+import { PkSelect } from "@verbb/plugin-kit-web/components/select/pk-select.js";
 //#region src/components/Select.tsx
-var selectTriggerVariants = cva("", {
-	variants: { size: {
-		xs: "px-2 py-1 text-[11px] rounded-sm [&_svg:not([class*=\"size-\"])]:size-3",
-		sm: "px-2.5 py-1.5 text-[12px] rounded-md [&_svg:not([class*=\"size-\"])]:size-3",
-		default: "px-[10px] py-[6px] text-[14px] rounded-lg [&_svg:not([class*=\"size-\"])]:size-3",
-		lg: "px-3 py-2 text-sm rounded-lg [&_svg:not([class*=\"size-\"])]:size-3",
-		xl: "px-3.5 py-2.5 text-sm rounded-lg [&_svg:not([class*=\"size-\"])]:size-3"
-	} },
-	defaultVariants: { size: "default" }
-});
-var selectTriggerIconVariants = cva("", {
-	variants: { size: {
-		xs: "size-[10px]",
-		sm: "size-[11px]",
-		default: "size-3",
-		lg: "size-3",
-		xl: "size-3.5"
-	} },
-	defaultVariants: { size: "default" }
-});
-var selectItemIndicatorVariants = cva("", {
-	variants: { size: {
-		xs: "right-2 size-3",
-		sm: "right-2.5 size-3",
-		default: "right-2 size-3",
-		lg: "right-3 size-3",
-		xl: "right-3.5 size-3"
-	} },
-	defaultVariants: { size: "default" }
-});
-var selectItemIndicatorIconVariants = cva("", {
-	variants: { size: {
-		xs: "size-3",
-		sm: "size-3",
-		default: "size-3",
-		lg: "size-3",
-		xl: "size-3"
-	} },
-	defaultVariants: { size: "default" }
-});
-var selectLabelVariants = cva(["text-slate-700"], {
-	variants: { size: {
-		xs: "px-2 pt-1 text-[11px]",
-		sm: "px-2.5 pt-1 text-[12px]",
-		default: "px-2.5 pt-1 text-xs",
-		lg: "px-3 pt-1 text-sm",
-		xl: "px-3.5 pt-1 text-base"
-	} },
-	defaultVariants: { size: "default" }
+var PkSelectElement = createPluginKitComponent({
+	tagName: "pk-select",
+	elementClass: PkSelect,
+	react: React,
+	events: {
+		onPkChange: "pk-change",
+		onPkClear: "pk-clear",
+		onInput: "input",
+		onChange: "change",
+		onFocusOut: "focusout",
+		onPkShow: "pk-show",
+		onPkAfterShow: "pk-after-show",
+		onPkHide: "pk-hide",
+		onPkAfterHide: "pk-after-hide",
+		onPkOpenChange: "pk-open-change"
+	}
 });
-var selectItemVariants = cva("", {
-	variants: {
-		size: {
-			xs: "px-2 py-1 pr-7 text-[11px] [&_svg:not([class*=\"size-\"])]:size-3",
-			sm: "px-2.5 py-1.5 pr-7 text-[12px] [&_svg:not([class*=\"size-\"])]:size-3",
-			default: "px-[10px] py-[6px] pr-8 text-[14px] [&_svg:not([class*=\"size-\"])]:size-3",
-			lg: "px-3 py-2 pr-8 text-sm [&_svg:not([class*=\"size-\"])]:size-3",
-			xl: "px-3.5 py-2.5 pr-9 text-sm [&_svg:not([class*=\"size-\"])]:size-3"
-		},
-		variant: {
-			default: "",
-			destructive: "text-error"
-		}
-	},
-	defaultVariants: {
-		size: "default",
-		variant: "default"
+var PkOptionElement = createPluginKitComponent({
+	tagName: "pk-option",
+	elementClass: PkOption,
+	react: React,
+	events: {
+		onPkOptionSelect: "pk-option-select",
+		onPkOptionHighlight: "pk-option-highlight"
 	}
 });
-var SelectContext = createContext({ size: "default" });
-function Select({ size = "default", children, ...props }) {
-	return /* @__PURE__ */ jsx(SelectContext.Provider, {
-		value: { size },
-		children: /* @__PURE__ */ jsx(Select$1.Root, {
-			"data-slot": "select",
-			"data-size": size,
-			...props,
-			children
-		})
-	});
-}
-function SelectGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select$1.Group, {
-		"data-slot": "select-group",
-		className: cn(className),
-		...props
-	});
-}
-function SelectValue({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select$1.Value, {
-		"data-slot": "select-value",
-		className: cn("min-w-0 flex-1 basis-0 overflow-hidden text-left truncate", className),
-		...props
-	});
-}
-function SelectTrigger({ className, size, children, ...props }) {
-	const context = useContext(SelectContext);
-	const finalSize = size || context.size || "default";
-	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
-		"data-slot": "select-trigger",
-		"data-size": finalSize,
-		className: cn("flex w-fit items-center justify-between whitespace-nowrap outline-none select-none transition-none", "gap-3", "bg-slate-250", "border border-transparent", "hover:not-disabled:bg-slate-300", "*:data-[slot=select-value]:flex", "*:data-[slot=select-value]:items-center", "*:data-[slot=select-value]:gap-1.5", "*:data-[slot=select-value]:line-clamp-1", "focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "aria-invalid:border-rose-600! aria-invalid:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!", "disabled:cursor-not-allowed disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", selectTriggerVariants({ size: finalSize }), className),
-		...props,
-		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(FontAwesomeIcon, {
-			icon: faChevronDown,
-			className: cn("pointer-events-none", selectTriggerIconVariants({ size: finalSize }))
-		}) })]
-	});
-}
-function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, positionMethod, ...props }) {
-	const resolvedPortalClassName = getPortalClassName();
-	const resolvedPortalContainer = getPortalContainer();
-	const resolvedPositionMethod = positionMethod ?? (resolvedPortalContainer instanceof ShadowRoot ? "fixed" : void 0);
-	return /* @__PURE__ */ jsx(Select$1.Portal, {
-		className: resolvedPortalClassName,
-		container: resolvedPortalContainer,
-		children: /* @__PURE__ */ jsx(Select$1.Positioner, {
-			side,
-			sideOffset,
-			align,
-			alignOffset,
-			alignItemWithTrigger,
-			positionMethod: resolvedPositionMethod,
-			className: "isolate z-50",
-			children: /* @__PURE__ */ jsxs(Select$1.Popup, {
-				"data-slot": "select-content",
-				"data-align-trigger": alignItemWithTrigger,
-				className: cn("relative isolate z-50 overflow-x-hidden overflow-y-auto", "min-w-(--anchor-width)", "max-w-[min(36rem,calc(100vw-2rem))]", "rounded-md bg-white", "shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]", "duration-100", "data-open:animate-in data-closed:animate-out", "data-open:fade-in-0 data-closed:fade-out-0", "data-open:zoom-in-95 data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=top]:slide-in-from-bottom-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=inline-start]:slide-in-from-right-2", "data-[side=inline-end]:slide-in-from-left-2", "data-[align-trigger=true]:animate-none", "origin-(--transform-origin)", className),
-				...props,
-				children: [
-					/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-					/* @__PURE__ */ jsx(Select$1.List, { children }),
-					/* @__PURE__ */ jsx(SelectScrollDownButton, {})
-				]
-			})
-		})
-	});
-}
-function SelectLabel({ className, ...props }) {
-	const { size } = useContext(SelectContext);
-	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
-		"data-slot": "select-label",
-		className: cn("text-slate-700", selectLabelVariants({ size }), className),
-		...props
-	});
-}
-function SelectItem({ className, children, ...props }) {
-	const { size } = useContext(SelectContext);
-	return /* @__PURE__ */ jsxs(Select$1.Item, {
-		"data-slot": "select-item",
-		className: cn("relative flex w-full cursor-default items-center outline-hidden select-none", "gap-1.5", "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", "focus:bg-slate-100 data-[highlighted]:bg-slate-100", "data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0", selectItemVariants({ size }), className),
-		...props,
-		children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
-			className: "flex min-w-0 items-center flex-1 gap-2 whitespace-nowrap",
-			children
-		}), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { render: /* @__PURE__ */ jsx("span", {
-			className: cn("pointer-events-none absolute flex items-center justify-center", selectItemIndicatorVariants({ size })),
-			children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
-				icon: faCheck,
-				className: cn("pointer-events-none", selectItemIndicatorIconVariants({ size }))
-			})
-		}) })]
-	});
-}
-function SelectSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select$1.Separator, {
-		"data-slot": "select-separator",
-		className: cn("pointer-events-none", "-mx-1 my-1 h-px", "bg-slate-200", className),
-		...props
-	});
-}
-function SelectScrollUpButton({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
-		"data-slot": "select-scroll-up-button",
-		className: cn("top-0 w-full flex items-center justify-center", "cursor-default", "bg-white py-1", "[&_svg:not([class*='size-'])]:size-3", className),
-		...props,
-		children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
-			icon: faChevronUp,
-			className: "size-3 pointer-events-none"
+var PkOptionGroupElement = createPluginKitComponent({
+	tagName: "pk-option-group",
+	elementClass: PkOptionGroup,
+	react: React
+});
+/** React facades over the `<pk-select>` family. Behavior and styles live in the web components. */
+var Select = forwardRef(function Select(props, ref) {
+	const { disabled, invalid, clearable, multiple, open, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkSelectElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"invalid",
+			"clearable",
+			"multiple",
+			"open"
+		], {
+			disabled,
+			invalid,
+			clearable,
+			multiple,
+			open
 		})
 	});
-}
-function SelectScrollDownButton({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
-		"data-slot": "select-scroll-down-button",
-		className: cn("bottom-0 w-full flex items-center justify-center", "cursor-default", "bg-white py-1", "[&_svg:not([class*='size-'])]:size-3", className),
-		...props,
-		children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
-			icon: faChevronDown,
-			className: "size-3 pointer-events-none"
+});
+Select.displayName = "Select";
+var Option = forwardRef(function Option(props, ref) {
+	const { disabled, selected, highlighted, hidden, ...rest } = props;
+	return /* @__PURE__ */ jsx(PkOptionElement, {
+		ref,
+		...rest,
+		...trueBooleanProps([
+			"disabled",
+			"selected",
+			"highlighted",
+			"hidden"
+		], {
+			disabled,
+			selected,
+			highlighted,
+			hidden
 		})
 	});
-}
+});
+Option.displayName = "Option";
+var OptionGroup = PkOptionGroupElement;
 //#endregion
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Option, OptionGroup, PkOptionElement, PkOptionGroupElement, PkSelectElement, Select };
 
 //# sourceMappingURL=Select.js.map

package/dist/components/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../src/components/Select.tsx"],"sourcesContent":["import { ComponentProps, createContext, useContext } from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faChevronDown, faChevronUp } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nconst selectTriggerVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-2 py-1 text-[11px] rounded-sm [&_svg:not([class*=\"size-\"])]:size-3',\n            sm: 'px-2.5 py-1.5 text-[12px] rounded-md [&_svg:not([class*=\"size-\"])]:size-3',\n            default: 'px-[10px] py-[6px] text-[14px] rounded-lg [&_svg:not([class*=\"size-\"])]:size-3',\n            lg: 'px-3 py-2 text-sm rounded-lg [&_svg:not([class*=\"size-\"])]:size-3',\n            xl: 'px-3.5 py-2.5 text-sm rounded-lg [&_svg:not([class*=\"size-\"])]:size-3',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst selectTriggerIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-[10px]',\n            sm: 'size-[11px]',\n            default: 'size-3',\n            lg: 'size-3',\n            xl: 'size-3.5',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst selectItemIndicatorVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'right-2 size-3',\n            sm: 'right-2.5 size-3',\n            default: 'right-2 size-3',\n            lg: 'right-3 size-3',\n            xl: 'right-3.5 size-3',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\nconst selectItemIndicatorIconVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'size-3',\n            sm: 'size-3',\n            default: 'size-3',\n            lg: 'size-3',\n            xl: 'size-3',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst selectLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'px-2 pt-1 text-[11px]',\n            sm: 'px-2.5 pt-1 text-[12px]',\n            default: 'px-2.5 pt-1 text-xs',\n            lg: 'px-3 pt-1 text-sm',\n            xl: 'px-3.5 pt-1 text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst selectItemVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-2 py-1 pr-7 text-[11px] [&_svg:not([class*=\"size-\"])]:size-3',\n            sm: 'px-2.5 py-1.5 pr-7 text-[12px] [&_svg:not([class*=\"size-\"])]:size-3',\n            default: 'px-[10px] py-[6px] pr-8 text-[14px] [&_svg:not([class*=\"size-\"])]:size-3',\n            lg: 'px-3 py-2 pr-8 text-sm [&_svg:not([class*=\"size-\"])]:size-3',\n            xl: 'px-3.5 py-2.5 pr-9 text-sm [&_svg:not([class*=\"size-\"])]:size-3',\n\n\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\ntype SelectSize = VariantProps<typeof selectTriggerVariants>['size'];\n\nconst SelectContext = createContext<{ size: SelectSize }>({ size: 'default' });\n\nfunction Select({\n    size = 'default',\n    children,\n    ...props\n}: ComponentProps<typeof SelectPrimitive.Root> & { size?: SelectSize }) {\n    return (\n        <SelectContext.Provider value={{ size }}>\n            <SelectPrimitive.Root data-slot=\"select\" data-size={size} {...props}>\n                {children}\n            </SelectPrimitive.Root>\n        </SelectContext.Provider>\n    );\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n    return (\n        <SelectPrimitive.Group\n            data-slot=\"select-group\"\n            className={cn(\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n    return (\n        <SelectPrimitive.Value\n            data-slot=\"select-value\"\n            className={cn(\n                // Layout\n                'min-w-0 flex-1 basis-0 overflow-hidden text-left truncate',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectTrigger({\n    className,\n    size,\n    children,\n    ...props\n}: SelectPrimitive.Trigger.Props & {\n    size?: SelectSize;\n}) {\n    const context = useContext(SelectContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <SelectPrimitive.Trigger\n            data-slot=\"select-trigger\"\n            data-size={finalSize}\n            className={cn(\n                // Reset\n                'flex w-fit items-center justify-between whitespace-nowrap outline-none select-none transition-none',\n\n                // Layout\n                'gap-3',\n\n                // Theme\n                'bg-slate-250',\n                'border border-transparent',\n\n                // Hover\n                'hover:not-disabled:bg-slate-300',\n\n                // Value\n                '*:data-[slot=select-value]:flex',\n                '*:data-[slot=select-value]:items-center',\n                '*:data-[slot=select-value]:gap-1.5',\n                '*:data-[slot=select-value]:line-clamp-1',\n\n                // Focus\n                'focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'aria-invalid:border-rose-600! aria-invalid:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!',\n\n                // Disabled\n                'disabled:cursor-not-allowed disabled:opacity-50',\n\n                // Icons\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                selectTriggerVariants({ size: finalSize }),\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <SelectPrimitive.Icon\n                render={\n                    <FontAwesomeIcon\n                        icon={faChevronDown}\n                        className={cn(\n                            'pointer-events-none',\n                            selectTriggerIconVariants({ size: finalSize }),\n                        )}\n                    />\n                }\n            />\n        </SelectPrimitive.Trigger>\n    );\n}\n\n/* eslint-disable no-use-before-define */\nfunction SelectContent({\n    className,\n    children,\n    side = 'bottom',\n    sideOffset = 4,\n    align = 'center',\n    alignOffset = 0,\n    alignItemWithTrigger = true,\n    positionMethod,\n    ...props\n}: SelectPrimitive.Popup.Props &\n    Pick<\n        SelectPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger' | 'positionMethod'\n    >) {\n    const resolvedPortalClassName = getPortalClassName();\n    const resolvedPortalContainer = getPortalContainer();\n    const resolvedPositionMethod = positionMethod ?? (\n        resolvedPortalContainer instanceof ShadowRoot ? 'fixed' : undefined\n    );\n\n    return (\n        <SelectPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <SelectPrimitive.Positioner\n                side={side}\n                sideOffset={sideOffset}\n                align={align}\n                alignOffset={alignOffset}\n                alignItemWithTrigger={alignItemWithTrigger}\n                positionMethod={resolvedPositionMethod}\n                className=\"isolate z-50\"\n            >\n                <SelectPrimitive.Popup\n                    data-slot=\"select-content\"\n                    data-align-trigger={alignItemWithTrigger}\n                    className={cn(\n                        // Reset\n                        'relative isolate z-50 overflow-x-hidden overflow-y-auto',\n\n                        // Layout\n                        'min-w-(--anchor-width)',\n                        'max-w-[min(36rem,calc(100vw-2rem))]',\n\n                        // Theme\n                        'rounded-md bg-white',\n                        'shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]',\n\n                        // Animation\n                        'duration-100',\n                        'data-open:animate-in data-closed:animate-out',\n                        'data-open:fade-in-0 data-closed:fade-out-0',\n                        'data-open:zoom-in-95 data-closed:zoom-out-95',\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=inline-start]:slide-in-from-right-2',\n                        'data-[side=inline-end]:slide-in-from-left-2',\n                        'data-[align-trigger=true]:animate-none',\n                        'origin-(--transform-origin)',\n\n                        className,\n                    )}\n                    {...props}\n                >\n                    <SelectScrollUpButton />\n                    <SelectPrimitive.List>{children}</SelectPrimitive.List>\n                    <SelectScrollDownButton />\n                </SelectPrimitive.Popup>\n            </SelectPrimitive.Positioner>\n        </SelectPrimitive.Portal>\n    );\n}\n\nfunction SelectLabel({\n    className,\n    ...props\n}: SelectPrimitive.GroupLabel.Props) {\n    const { size } = useContext(SelectContext);\n\n    return (\n        <SelectPrimitive.GroupLabel\n            data-slot=\"select-label\"\n            className={cn(\n                // Theme\n                'text-slate-700',\n\n                // Size\n                selectLabelVariants({ size }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectItem({\n    className,\n    children,\n    ...props\n}: SelectPrimitive.Item.Props) {\n    const { size } = useContext(SelectContext);\n\n    return (\n        <SelectPrimitive.Item\n            data-slot=\"select-item\"\n            className={cn(\n                // Reset\n                'relative flex w-full cursor-default items-center outline-hidden select-none',\n\n                // Layout\n                'gap-1.5',\n                '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n\n                // Focus\n                'focus:bg-slate-100 data-[highlighted]:bg-slate-100',\n\n                // Disabled\n                'data-disabled:pointer-events-none data-disabled:opacity-50',\n\n                // Icons\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                selectItemVariants({ size }),\n\n                className,\n            )}\n            {...props}\n        >\n            <SelectPrimitive.ItemText className=\"flex min-w-0 items-center flex-1 gap-2 whitespace-nowrap\">\n                {children}\n            </SelectPrimitive.ItemText>\n            <SelectPrimitive.ItemIndicator\n                render={\n                    <span\n                        className={cn(\n                            'pointer-events-none absolute flex items-center justify-center',\n\n                            selectItemIndicatorVariants({ size }),\n                        )}\n                    >\n                        <FontAwesomeIcon\n                            icon={faCheck}\n                            className={cn(\n                                'pointer-events-none',\n                                selectItemIndicatorIconVariants({ size }),\n                            )}\n                        />\n                    </span>\n                }\n            />\n        </SelectPrimitive.Item>\n    );\n}\n\nfunction SelectSeparator({\n    className,\n    ...props\n}: SelectPrimitive.Separator.Props) {\n    return (\n        <SelectPrimitive.Separator\n            data-slot=\"select-separator\"\n            className={cn(\n                // Reset\n                'pointer-events-none',\n\n                // Layout\n                '-mx-1 my-1 h-px',\n\n                // Theme\n                'bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectScrollUpButton({\n    className,\n    ...props\n}: ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n    return (\n        <SelectPrimitive.ScrollUpArrow\n            data-slot=\"select-scroll-up-button\"\n            className={cn(\n                // Layout\n                'top-0 w-full flex items-center justify-center',\n                'cursor-default',\n\n                // Theme\n                'bg-white py-1',\n\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-3\",\n\n                className,\n            )}\n            {...props}\n        >\n            <FontAwesomeIcon icon={faChevronUp} className=\"size-3 pointer-events-none\" />\n        </SelectPrimitive.ScrollUpArrow>\n    );\n}\n\nfunction SelectScrollDownButton({\n    className,\n    ...props\n}: ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n    return (\n        <SelectPrimitive.ScrollDownArrow\n            data-slot=\"select-scroll-down-button\"\n            className={cn(\n                // Layout\n                'bottom-0 w-full flex items-center justify-center',\n                'cursor-default',\n\n                // Theme\n                'bg-white py-1',\n\n                // Icons\n                \"[&_svg:not([class*='size-'])]:size-3\",\n\n                className,\n            )}\n            {...props}\n        >\n            <FontAwesomeIcon icon={faChevronDown} className=\"size-3 pointer-events-none\" />\n        </SelectPrimitive.ScrollDownArrow>\n    );\n}\n/* eslint-enable no-use-before-define */\n\nexport {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectLabel,\n    SelectScrollDownButton,\n    SelectScrollUpButton,\n    SelectSeparator,\n    SelectTrigger,\n    SelectValue,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../src/components/Select.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { createPluginKitComponent } from '../utils/create-plugin-kit-component.js';\nimport { PkOption } from '@verbb/plugin-kit-web/components/select/pk-option.js';\nimport { PkOptionGroup } from '@verbb/plugin-kit-web/components/select/pk-option-group.js';\nimport { PkSelect, type PkSelectSize } from '@verbb/plugin-kit-web/components/select/pk-select.js';\n\nimport { trueBooleanProps } from '../utils/lit-react-booleans.js';\n\nconst PkSelectElement = createPluginKitComponent({\n    tagName: 'pk-select',\n    elementClass: PkSelect,\n    react: React,\n    events: {\n        onPkChange: 'pk-change',\n        onPkClear: 'pk-clear',\n        onInput: 'input',\n        onChange: 'change',\n        // `blur` does not bubble out of the delegatesFocus shadow root; `focusout` does.\n        onFocusOut: 'focusout',\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\nconst PkOptionElement = createPluginKitComponent({\n    tagName: 'pk-option',\n    elementClass: PkOption,\n    react: React,\n    events: {\n        onPkOptionSelect: 'pk-option-select',\n        onPkOptionHighlight: 'pk-option-highlight',\n    },\n});\n\nexport const PkOptionGroupElement = createPluginKitComponent({\n    tagName: 'pk-option-group',\n    elementClass: PkOptionGroup,\n    react: React,\n});\n\ntype PkSelectElementProps = React.ComponentProps<typeof PkSelectElement>;\ntype PkOptionElementProps = React.ComponentProps<typeof PkOptionElement>;\n\n/** React facades over the `<pk-select>` family. Behavior and styles live in the web components. */\nexport const Select = forwardRef<PkSelect, PkSelectElementProps>(function Select(props, ref) {\n    const {\n        disabled, invalid, clearable, multiple, open, ...rest\n    } = props;\n\n    return (\n        <PkSelectElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(\n                ['disabled', 'invalid', 'clearable', 'multiple', 'open'],\n                {\n                    disabled, invalid, clearable, multiple, open,\n                },\n            )}\n        />\n    );\n});\n\nSelect.displayName = 'Select';\n\nexport const Option = forwardRef<PkOption, PkOptionElementProps>(function Option(props, ref) {\n    const {\n        disabled, selected, highlighted, hidden, ...rest\n    } = props;\n\n    return (\n        <PkOptionElement\n            ref={ref}\n            {...rest}\n            {...trueBooleanProps(\n                ['disabled', 'selected', 'highlighted', 'hidden'],\n                {\n                    disabled, selected, highlighted, hidden,\n                },\n            )}\n        />\n    );\n});\n\nOption.displayName = 'Option';\n\nexport const OptionGroup = PkOptionGroupElement;\n\nexport { PkSelectElement, PkOptionElement };\nexport type SelectProps = PkSelectElementProps;\nexport type OptionProps = PkOptionElementProps;\nexport type OptionGroupProps = React.ComponentProps<typeof PkOptionGroupElement>;\nexport type { PkSelectSize };\n"],"mappings":";;;;;;;;AAQA,IAAM,kBAAkB,yBAAyB;CAC7C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,YAAY;EACZ,WAAW;EACX,SAAS;EACT,UAAU;EAEV,YAAY;EACZ,UAAU;EACV,eAAe;EACf,UAAU;EACV,eAAe;EACf,gBAAgB;EACnB;CACJ,CAAC;AAEF,IAAM,kBAAkB,yBAAyB;CAC7C,SAAS;CACT,cAAc;CACd,OAAO;CACP,QAAQ;EACJ,kBAAkB;EAClB,qBAAqB;EACxB;CACJ,CAAC;AAEF,IAAa,uBAAuB,yBAAyB;CACzD,SAAS;CACT,cAAc;CACd,OAAO;CACV,CAAC;;AAMF,IAAa,SAAS,WAA2C,SAAS,OAAO,OAAO,KAAK;CACzF,MAAM,EACF,UAAU,SAAS,WAAW,UAAU,MAAM,GAAG,SACjD;AAEJ,QACI,oBAAC,iBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBACA;GAAC;GAAY;GAAW;GAAa;GAAY;GAAO,EACxD;GACI;GAAU;GAAS;GAAW;GAAU;GAC3C,CACJ;EACH,CAAA;EAER;AAEF,OAAO,cAAc;AAErB,IAAa,SAAS,WAA2C,SAAS,OAAO,OAAO,KAAK;CACzF,MAAM,EACF,UAAU,UAAU,aAAa,QAAQ,GAAG,SAC5C;AAEJ,QACI,oBAAC,iBAAD;EACS;EACL,GAAI;EACJ,GAAI,iBACA;GAAC;GAAY;GAAY;GAAe;GAAS,EACjD;GACI;GAAU;GAAU;GAAa;GACpC,CACJ;EACH,CAAA;EAER;AAEF,OAAO,cAAc;AAErB,IAAa,cAAc"}

package/dist/components/SelectInput.d.ts

@@ -1,34 +1,41 @@
-import { Select } from '.';
-import { default as React, ComponentProps } from 'react';
-export interface Option<T = unknown> {
-    value: T;
+import { default as React } from 'react';
+import { PkSelect, PkSelectSize } from '@verbb/plugin-kit-web/components/select/pk-select.js';
+export interface SelectInputOption {
+    value: unknown;
     label: string;
     disabled?: boolean;
     status?: string;
 }
-type OptionGroup<T = unknown> = {
+export interface SelectInputOptionGroup {
     group: string;
-    options: Option<T>[];
-};
-type SelectBaseProps = ComponentProps<typeof Select>;
-interface SelectProps<T = unknown> extends Omit<SelectBaseProps, 'children' | 'value' | 'defaultValue' | 'onValueChange'> {
-    options: Array<Option<T> | OptionGroup<T>>;
+    options: SelectInputOption[];
+}
+export interface SelectInputProps {
+    options: Array<SelectInputOption | SelectInputOptionGroup>;
+    value?: unknown;
+    onChange?: (value: unknown) => void;
     placeholder?: string;
-    onChange?: (value: T) => void;
-    value?: T;
+    disabled?: boolean;
     isInvalid?: boolean;
-    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
-    triggerClassName?: string;
-    contentClassName?: string;
-    alignItemWithTrigger?: boolean;
+    clearable?: boolean;
+    size?: PkSelectSize;
+    /** When `full`, stretch the select host to the available width (table cells). */
+    width?: 'full';
+    name?: string;
     id?: string;
-    'aria-invalid'?: boolean | 'true' | 'false';
+    onBlur?: (event: Event) => void;
+    'aria-label'?: string;
     'aria-describedby'?: string;
     'aria-errormessage'?: string;
-    'aria-label'?: string;
     'aria-labelledby'?: string;
 }
-export declare const SelectInput: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLButtonElement>>;
-export default Select;
-export type { SelectProps };
+/**
+ * Convenience facade over `<pk-select>` matching the `plugin-kit-react` `SelectInput`
+ * ergonomics: an `options[]` array plus controlled `value`/`onChange`, instead of the
+ * slotted `<pk-option>` children the raw `Select` facade exposes.
+ *
+ * `pk-select` is string-valued, so option values are stringified for the element and
+ * mapped back to their original value on change.
+ */
+export declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<PkSelect>>;
 //# sourceMappingURL=SelectInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../src/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,MAAM,EAOT,MAAM,oCAAoC,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,OAAO;IAC/B,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,KAAK,WAAW,CAAC,CAAC,GAAG,OAAO,IAAI;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;CACxB,CAAC;AAoCF,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAErD,UAAU,WAAW,CAAC,CAAC,GAAG,OAAO,CAC7B,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC;IACtF,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,gGAkJtB,CAAC;AAEH,eAAe,MAAM,CAAC;AACtB,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../src/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAMnG,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,CAAC;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAUD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,mFA4EtB,CAAC"}