@verbb/plugin-kit-react 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 ## Unreleased
 
+## 1.0.7 - 2026-06-18
+
+### Added
+- Added datetime helpers (`parseDateTimeValue`, `parseLocalDate`, `formatDateTimeValue`, `resolveCalendarMonth`, and `startOfMonth`) for wall-clock `Y-m-d H:i:s` values without timezone conversion.
+- Exported the datetime helpers from `@verbb/plugin-kit-react/utils`.
+
+### Changed
+- Changed `DatePicker` to parse values with `parseLocalDate`, keep the visible calendar month in sync with the selected date, and reopen on that month when the popover opens.
+- Changed `DateTimeField` to read and write Craft-style wall-clock datetime strings through the form engine instead of maintaining mirrored local state or emitting ISO UTC values.
+- Changed `PopoverContent` and `SelectContent` to default to `positionMethod="fixed"` when portaling into a Shadow DOM container.
+- Changed `SelectContent` to accept an optional `positionMethod` prop.
+- Changed `TimePicker` to use `alignItemWithTrigger={false}` so its dropdown stays aligned in scrollable embedded CP panes.
+
+### Fixed
+- Fixed `DatePicker` opening on the current month instead of the selected date’s month.
+- Fixed `DateTimeField` shifting dates and times when values were formatted with `toISOString()`.
+- Fixed `DateTimeField` causing a React maximum update depth error while saving forms.
+- Fixed `TimePicker` and other select popovers rendering with a large positional offset inside Shadow DOM apps such as the Formie form builder.
+
+## 1.0.6 - 2026-06-14
+
+### Added
+- Added `ensureDocumentScrollStability()` and wire it into `configurePluginKitReact()` for Shadow DOM apps, reserving document scrollbar space so Base UI modal scroll lock does not shift Craft CP layouts.
+
+### Changed
+- Changed `SelectInput` to default to `modal={true}` for outside pointer isolation while keeping `alignItemWithTrigger={false}` to avoid the extra scroll-lock path that caused layout jumps in embedded CP panes.
+- Added an `alignItemWithTrigger` prop to `SelectInput` for cases that need the expand-to-trigger animation.
+
 ## 1.0.5 - 2026-06-12
 
 ### Fixed

package/dist/components/Command.d.ts

@@ -9,14 +9,14 @@ declare function CommandDialog({ title, description, children, showCloseButton,
 }): import("react/jsx-runtime").JSX.Element;
 declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
+    children?: import('react').ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: import('react').Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
     label?: string;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function CommandEmpty({ ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
 declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../src/components/Command.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAEpE,OAAO,EACH,MAAM,EACT,MAAM,oCAAoC,CAAC;AAI5C,iBAAS,OAAO,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAkBzC;AAED,iBAAS,aAAa,CAAC,EACnB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC5B,2CAyBA;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAyB/C;AAED,QAAA,MAAM,WAAW;;;;;;;;sFAoBf,CAAC;AAEH,iBAAS,YAAY,CAAC,EAClB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAc/C;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CA4B/C;AAED,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAmBnD;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAmB9C;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,MAAM,CAAC,2CAexB;AAED,OAAO,EACH,OAAO,EACP,aAAa,EACb,eAAe,EACf,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACnB,CAAC"}
+{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../src/components/Command.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAEpE,OAAO,EACH,MAAM,EACT,MAAM,oCAAoC,CAAC;AAI5C,iBAAS,OAAO,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAkBzC;AAED,iBAAS,aAAa,CAAC,EACnB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC5B,2CAyBA;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAyB/C;AAED,QAAA,MAAM,WAAW;;;;;;;;gGAoBf,CAAC;AAEH,iBAAS,YAAY,CAAC,EAClB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAc/C;AAED,iBAAS,YAAY,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CA4B/C;AAED,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAmBnD;AAED,iBAAS,WAAW,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAmB9C;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,MAAM,CAAC,2CAexB;AAED,OAAO,EACH,OAAO,EACP,aAAa,EACb,eAAe,EACf,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAeA,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,2CA8DA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,2CA6EA"}

package/dist/components/DatePicker.js

@@ -1,25 +1,37 @@
 import { cn } from "../utils/classes.js";
 import { hostFormatDate } from "../utils/hostBridge.js";
+import { parseLocalDate, resolveCalendarMonth } from "../utils/datetime.js";
 import "../utils/index.js";
 import { Calendar } from "./Calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
 import "./index.js";
 import { Button } from "./Button.js";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCalendar } from "@fortawesome/pro-solid-svg-icons";
 //#region src/components/DatePicker.tsx
+var toDate = (value) => {
+	return parseLocalDate(value);
+};
 function DatePicker({ value, onValueChange, placeholder = "", className, disabled = false, isInvalid = false, ...props }) {
 	const [open, setOpen] = useState(false);
-	const date = value ? new Date(value) : void 0;
+	const date = useMemo(() => toDate(value), [value]);
+	const [month, setMonth] = useState(() => resolveCalendarMonth(date));
+	useEffect(() => {
+		if (date) setMonth(resolveCalendarMonth(date));
+	}, [date]);
+	const handleOpenChange = (nextOpen) => {
+		if (nextOpen) setMonth(resolveCalendarMonth(date));
+		setOpen(nextOpen);
+	};
 	const handleSelect = (selectedDate) => {
 		onValueChange?.(selectedDate);
 		setOpen(false);
 	};
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
 			variant: "outline",
 			className: cn("min-h-[2.125rem] h-[2.125rem]", "w-[130px] px-[10px] !py-0", "!cursor-default", "justify-start text-left font-normal", "bg-transparent border border-slate-400", "hover:bg-slate-50!", "active:bg-slate-150!", "data-[popup-open]:bg-slate-150!", "[&>svg]:size-[14px]", isInvalid && ["border-rose-600!", "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)]!"], className),
@@ -34,6 +46,8 @@ function DatePicker({ value, onValueChange, placeholder = "", className, disable
 			children: /* @__PURE__ */ jsx(Calendar, {
 				mode: "single",
 				selected: date,
+				month,
+				onMonthChange: setMonth,
 				captionLayout: "dropdown",
 				onSelect: handleSelect
 			})

package/dist/components/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":[],"sources":["../../src/components/DatePicker.tsx"],"sourcesContent":["import { 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';\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\n    // Convert ISO date string to Date object for Calendar\n    const date = value ? new Date(value) : undefined;\n\n    const handleSelect = (selectedDate?: Date) => {\n        onValueChange?.(selectedDate);\n        setOpen(false);\n    };\n\n    return (\n        <Popover open={open} onOpenChange={setOpen}>\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                    captionLayout=\"dropdown\"\n                    onSelect={handleSelect}\n                />\n            </PopoverContent>\n        </Popover >\n    );\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAgB,WAAW,EACvB,OACA,eACA,cAAc,IACd,WACA,WAAW,OACX,YAAY,OACZ,GAAG,SAQJ;CACC,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CAGvC,MAAM,OAAO,QAAQ,IAAI,KAAK,MAAM,GAAG,KAAA;CAEvC,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;IACV,eAAc;IACd,UAAU;IACZ,CAAA;GACW,CAAA,CACV"}
+{"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"}

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

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

package/dist/components/Popover.js

@@ -20,6 +20,7 @@ function PopoverTrigger({ ...props }) {
 function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, positionMethod, collisionBoundary, collisionPadding, sticky, collisionAvoidance, portalClassName, portalContainer, ...props }) {
 	const resolvedPortalClassName = getPortalClassName(portalClassName);
 	const resolvedPortalContainer = getPortalContainer(portalContainer);
+	const resolvedPositionMethod = positionMethod ?? (resolvedPortalContainer instanceof ShadowRoot ? "fixed" : void 0);
 	return /* @__PURE__ */ jsx(Popover$1.Portal, {
 		"data-slot": "popover-portal",
 		className: resolvedPortalClassName,
@@ -29,7 +30,7 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
 			alignOffset,
 			side,
 			sideOffset,
-			positionMethod,
+			positionMethod: resolvedPositionMethod,
 			collisionBoundary,
 			collisionPadding,
 			sticky,

package/dist/components/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../src/components/Popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nfunction Popover({ ariaLabel = 'Popover', ...props }: PopoverPrimitive.Root.Props) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" ariaLabel={ariaLabel} {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n    return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n    className,\n    align = 'center',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    positionMethod,\n    collisionBoundary,\n    collisionPadding,\n    sticky,\n    collisionAvoidance,\n    portalClassName,\n    portalContainer,\n    ...props\n}: PopoverPrimitive.Popup.Props &\n    Pick<\n        PopoverPrimitive.Positioner.Props,\n        | 'align'\n        | 'alignOffset'\n        | 'side'\n        | 'sideOffset'\n        | 'positionMethod'\n        | 'collisionBoundary'\n        | 'collisionPadding'\n        | 'sticky'\n        | 'collisionAvoidance'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <PopoverPrimitive.Portal\n            data-slot=\"popover-portal\"\n            className={resolvedPortalClassName}\n            container={resolvedPortalContainer}\n        >\n            <PopoverPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                positionMethod={positionMethod}\n                collisionBoundary={collisionBoundary}\n                collisionPadding={collisionPadding}\n                sticky={sticky}\n                collisionAvoidance={collisionAvoidance}\n                className=\"isolate z-50\"\n            >\n                <PopoverPrimitive.Popup\n                    data-slot=\"popover-content\"\n                    className={cn(\n                        // Reset and base styles\n                        'z-50 w-72 rounded-md outline-hidden will-change-[transform,opacity]',\n\n                        // Themed styles (backgrounds, colors, shadows, spacing)\n                        'bg-white p-4',\n                        'shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]',\n                        'focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]',\n\n                        // Animation classes for open/closed states\n                        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n\n                        // Animation classes for side-based slide-ins\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n\n                        // Additional custom classes passed in as props\n                        className,\n                    )}\n                    {...props}\n                />\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"popover-header\"\n            className={cn(\n                'flex flex-col gap-0.5 text-sm',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n    return (\n        <PopoverPrimitive.Title\n            data-slot=\"popover-title\"\n            className={cn(\n                'font-medium text-sm',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction PopoverDescription({\n    className,\n    ...props\n}: PopoverPrimitive.Description.Props) {\n    return (\n        <PopoverPrimitive.Description\n            data-slot=\"popover-description\"\n            className={cn(\n                'text-gray-500',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\n\nexport {\n    Popover,\n    PopoverContent,\n    PopoverDescription,\n    PopoverHeader,\n    PopoverTitle,\n    PopoverTrigger,\n};\n"],"mappings":";;;;;;AAIA,SAAS,QAAQ,EAAE,YAAY,WAAW,GAAG,SAAsC;AAC/E,QAAO,oBAAC,UAAiB,MAAlB;EAAuB,aAAU;EAAqB;EAAW,GAAI;EAAS,CAAA;;AAGzF,SAAS,eAAe,EAAE,GAAG,SAAyC;AAClE,QAAO,oBAAC,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG9E,SAAS,eAAe,EACpB,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,gBACA,mBACA,kBACA,QACA,oBACA,iBACA,iBACA,GAAG,SAgBA;CACH,MAAM,0BAA0B,mBAAmB,gBAAgB;CACnE,MAAM,0BAA0B,mBAAmB,gBAAgB;AAEnE,QACI,oBAAC,UAAiB,QAAlB;EACI,aAAU;EACV,WAAW;EACX,WAAW;YAEX,oBAAC,UAAiB,YAAlB;GACW;GACM;GACP;GACM;GACI;GACG;GACD;GACV;GACY;GACpB,WAAU;aAEV,oBAAC,UAAiB,OAAlB;IACI,aAAU;IACV,WAAW,GAEP,uEAGA,gBACA,yFACA,+FAGA,gEACA,8DACA,gEAGA,0CACA,0CACA,0CACA,0CAGA,UACH;IACD,GAAI;IACN,CAAA;GACwB,CAAA;EACR,CAAA;;AAIlC,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AACzE,QACI,oBAAC,OAAD;EACI,aAAU;EACV,WAAW,GACP,iCAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;AACzE,QACI,oBAAC,UAAiB,OAAlB;EACI,aAAU;EACV,WAAW,GACP,uBAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,mBAAmB,EACxB,WACA,GAAG,SACgC;AACnC,QACI,oBAAC,UAAiB,aAAlB;EACI,aAAU;EACV,WAAW,GACP,iBAEA,UACH;EACD,GAAI;EACN,CAAA"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../src/components/Popover.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nfunction Popover({ ariaLabel = 'Popover', ...props }: PopoverPrimitive.Root.Props) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" ariaLabel={ariaLabel} {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n    return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n    className,\n    align = 'center',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    positionMethod,\n    collisionBoundary,\n    collisionPadding,\n    sticky,\n    collisionAvoidance,\n    portalClassName,\n    portalContainer,\n    ...props\n}: PopoverPrimitive.Popup.Props &\n    Pick<\n        PopoverPrimitive.Positioner.Props,\n        | 'align'\n        | 'alignOffset'\n        | 'side'\n        | 'sideOffset'\n        | 'positionMethod'\n        | 'collisionBoundary'\n        | 'collisionPadding'\n        | 'sticky'\n        | 'collisionAvoidance'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n    const resolvedPositionMethod = positionMethod ?? (\n        resolvedPortalContainer instanceof ShadowRoot ? 'fixed' : undefined\n    );\n\n    return (\n        <PopoverPrimitive.Portal\n            data-slot=\"popover-portal\"\n            className={resolvedPortalClassName}\n            container={resolvedPortalContainer}\n        >\n            <PopoverPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                positionMethod={resolvedPositionMethod}\n                collisionBoundary={collisionBoundary}\n                collisionPadding={collisionPadding}\n                sticky={sticky}\n                collisionAvoidance={collisionAvoidance}\n                className=\"isolate z-50\"\n            >\n                <PopoverPrimitive.Popup\n                    data-slot=\"popover-content\"\n                    className={cn(\n                        // Reset and base styles\n                        'z-50 w-72 rounded-md outline-hidden will-change-[transform,opacity]',\n\n                        // Themed styles (backgrounds, colors, shadows, spacing)\n                        'bg-white p-4',\n                        'shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]',\n                        'focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]',\n\n                        // Animation classes for open/closed states\n                        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n\n                        // Animation classes for side-based slide-ins\n                        'data-[side=bottom]:slide-in-from-top-2',\n                        'data-[side=left]:slide-in-from-right-2',\n                        'data-[side=right]:slide-in-from-left-2',\n                        'data-[side=top]:slide-in-from-bottom-2',\n\n                        // Additional custom classes passed in as props\n                        className,\n                    )}\n                    {...props}\n                />\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"popover-header\"\n            className={cn(\n                'flex flex-col gap-0.5 text-sm',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n    return (\n        <PopoverPrimitive.Title\n            data-slot=\"popover-title\"\n            className={cn(\n                'font-medium text-sm',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction PopoverDescription({\n    className,\n    ...props\n}: PopoverPrimitive.Description.Props) {\n    return (\n        <PopoverPrimitive.Description\n            data-slot=\"popover-description\"\n            className={cn(\n                'text-gray-500',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n\n\nexport {\n    Popover,\n    PopoverContent,\n    PopoverDescription,\n    PopoverHeader,\n    PopoverTitle,\n    PopoverTrigger,\n};\n"],"mappings":";;;;;;AAIA,SAAS,QAAQ,EAAE,YAAY,WAAW,GAAG,SAAsC;AAC/E,QAAO,oBAAC,UAAiB,MAAlB;EAAuB,aAAU;EAAqB;EAAW,GAAI;EAAS,CAAA;;AAGzF,SAAS,eAAe,EAAE,GAAG,SAAyC;AAClE,QAAO,oBAAC,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAG9E,SAAS,eAAe,EACpB,WACA,QAAQ,UACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,gBACA,mBACA,kBACA,QACA,oBACA,iBACA,iBACA,GAAG,SAgBA;CACH,MAAM,0BAA0B,mBAAmB,gBAAgB;CACnE,MAAM,0BAA0B,mBAAmB,gBAAgB;CACnE,MAAM,yBAAyB,mBAC3B,mCAAmC,aAAa,UAAU,KAAA;AAG9D,QACI,oBAAC,UAAiB,QAAlB;EACI,aAAU;EACV,WAAW;EACX,WAAW;YAEX,oBAAC,UAAiB,YAAlB;GACW;GACM;GACP;GACM;GACZ,gBAAgB;GACG;GACD;GACV;GACY;GACpB,WAAU;aAEV,oBAAC,UAAiB,OAAlB;IACI,aAAU;IACV,WAAW,GAEP,uEAGA,gBACA,yFACA,+FAGA,gEACA,8DACA,gEAGA,0CACA,0CACA,0CACA,0CAGA,UACH;IACD,GAAI;IACN,CAAA;GACwB,CAAA;EACR,CAAA;;AAIlC,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AACzE,QACI,oBAAC,OAAD;EACI,aAAU;EACV,WAAW,GACP,iCAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;AACzE,QACI,oBAAC,UAAiB,OAAlB;EACI,aAAU;EACV,WAAW,GACP,uBAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,mBAAmB,EACxB,WACA,GAAG,SACgC;AACnC,QACI,oBAAC,UAAiB,aAAlB;EACI,aAAU;EACV,WAAW,GACP,iBAEA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/Select.d.ts

@@ -13,7 +13,7 @@ declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Prop
 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, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>): 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;

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,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,CAC3E,2CAsDJ;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,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"}

package/dist/components/Select.js

@@ -117,9 +117,10 @@ function SelectTrigger({ className, size, children, ...props }) {
 		}) })]
 	});
 }
-function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
+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,
@@ -129,6 +130,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 			align,
 			alignOffset,
 			alignItemWithTrigger,
+			positionMethod: resolvedPositionMethod,
 			className: "isolate z-50",
 			children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 				"data-slot": "select-content",

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    ...props\n}: SelectPrimitive.Popup.Props &\n    Pick<\n        SelectPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n    >) {\n    const resolvedPortalClassName = getPortalClassName();\n    const resolvedPortalContainer = getPortalContainer();\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                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 { 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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"}

package/dist/components/SelectInput.d.ts

@@ -20,6 +20,7 @@ interface SelectProps<T = unknown> extends Omit<SelectBaseProps, 'children' | 'v
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;
     triggerClassName?: string;
     contentClassName?: string;
+    alignItemWithTrigger?: boolean;
     id?: string;
     'aria-invalid'?: boolean | 'true' | 'false';
     'aria-describedby'?: string;

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,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,gGA4ItB,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,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"}

package/dist/components/SelectInput.js

@@ -6,7 +6,7 @@ import "./index.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SelectInput.tsx
-var SelectInput = forwardRef(({ options, placeholder, size, onChange, value, triggerClassName, contentClassName, isInvalid, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...selectProps }, ref) => {
+var SelectInput = forwardRef(({ options, placeholder, size, onChange, value, triggerClassName, contentClassName, alignItemWithTrigger = false, isInvalid, id, modal = true, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...selectProps }, ref) => {
 	const handleValueChange = (nextValue) => {
 		if (onChange) onChange(nextValue);
 	};
@@ -35,6 +35,7 @@ var SelectInput = forwardRef(({ options, placeholder, size, onChange, value, tri
 		onValueChange: handleValueChange,
 		size,
 		items: flatOptions,
+		modal,
 		...selectProps,
 		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
 			ref,
@@ -62,6 +63,7 @@ var SelectInput = forwardRef(({ options, placeholder, size, onChange, value, tri
 			})]
 		}), options?.length > 0 && /* @__PURE__ */ jsx(SelectContent, {
 			className: contentClassName,
+			alignItemWithTrigger,
 			children: groupedOptions.map((group) => {
 				return /* @__PURE__ */ jsxs(SelectGroup, { children: [group.group && /* @__PURE__ */ jsx(SelectLabel, { children: group.group }), group.options?.map((option) => {
 					return /* @__PURE__ */ jsxs(SelectItem, {

package/dist/components/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","names":[],"sources":["../../src/components/SelectInput.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n    SelectLabel,\n} from '@verbb/plugin-kit-react/components';\n\nimport type React from 'react';\nimport { ComponentProps, forwardRef } from 'react';\nimport { Status } from '@verbb/plugin-kit-react/components/Status';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\n\nexport interface Option<T = unknown> {\n    value: T;\n    label: string;\n    disabled?: boolean;\n    status?: string;\n}\n\ntype OptionGroup<T = unknown> = {\n    group: string;\n    options: Option<T>[];\n};\n\n// const valueToString = (val: Option['value']) => {\n//     if (val === null) { return '__null__'; }\n//     if (val === undefined) {\n//         console.error('option value cannot be undefined');\n//         return '__undefined__';\n//     }\n//     if (val === Infinity) { return '__Infinity__'; }\n//     if (val === -Infinity) { return '__-Infinity__'; }\n//     if (Number.isNaN(val)) { return '__NaN__'; }\n//     if (typeof val === 'symbol') { return `__symbol__${val.description}`; }\n//     // console.log(JSON.stringify(val));\n//     return JSON.stringify(val);\n// };\n\n// const stringToValue = (str: string) => {\n//     switch (str) {\n//         case '__null__':\n//             return null;\n//         case '__undefined__':\n//             return undefined;\n//         case '__Infinity__':\n//             return Infinity;\n//         case '__-Infinity__':\n//             return -Infinity;\n//         case '__NaN__':\n//             return NaN;\n//         default:\n//             if (str.startsWith('__symbol__')) {\n//                 return Symbol(str.slice(10));\n//             }\n//             return JSON.parse(str);\n//     }\n// };\n\ntype SelectBaseProps = ComponentProps<typeof Select>;\n\ninterface SelectProps<T = unknown>\n    extends Omit<SelectBaseProps, 'children' | 'value' | 'defaultValue' | 'onValueChange'> {\n    options: Array<Option<T> | OptionGroup<T>>;\n    placeholder?: string;\n    onChange?: (value: T) => void;\n    value?: T;\n    isInvalid?: boolean;\n    onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n    triggerClassName?: string;\n    contentClassName?: string;\n    id?: string;\n    'aria-invalid'?: boolean | 'true' | 'false';\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nexport const SelectInput = forwardRef<HTMLButtonElement, SelectProps>(({\n    options,\n    placeholder,\n    size,\n    onChange,\n    value,\n    triggerClassName,\n    contentClassName,\n    isInvalid,\n    id,\n    'aria-invalid': ariaInvalid,\n    'aria-describedby': ariaDescribedBy,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...selectProps\n}, ref) => {\n    const handleValueChange = (nextValue: SelectProps['value']) => {\n        if (onChange) {\n            onChange(nextValue);\n        }\n    };\n\n    // const hasEmptyOption = options?.find((option) => { return option.value === ''; });\n\n    // let defaultValue = undefined;\n\n    // // Only show placeholder when value is initially undefined,\n    // // or when the value is an empty string and there's an empty option\n    // if (value === undefined || value === '') {\n    //     if (hasEmptyOption) {\n    //         defaultValue = valueToString('');\n    //     } else {\n    //         defaultValue = undefined;\n    //     }\n    // } else {\n    //     defaultValue = valueToString(value);\n    // }\n\n    const hasGroup = (option: Option<unknown> | OptionGroup<unknown>): option is OptionGroup<unknown> => {\n        return typeof option === 'object' && option !== null && 'group' in option;\n    };\n\n    const groupedOptions = options.map((option, index) => {\n        if (hasGroup(option)) {\n            return option;\n        }\n\n        return {\n            group: null,\n            options: [option],\n            _key: `ungrouped-${index}`,\n        };\n    });\n\n    const flatOptions = options.flatMap((option) => {\n        if (hasGroup(option)) {\n            return option.options;\n        }\n\n        return [option];\n    });\n\n    const selectedOption = flatOptions.find((option) => {\n        return String(option.value) === String(value);\n    });\n    const resolvedPlaceholder = placeholder || '';\n    const resolvedIsInvalid = Boolean(isInvalid || ariaInvalid === true || ariaInvalid === 'true');\n\n    return (\n        <Select\n            value={value}\n            onValueChange={handleValueChange}\n            size={size}\n            items={flatOptions as ComponentProps<typeof Select>['items']}\n            {...selectProps}\n        >\n            <SelectTrigger\n                ref={ref}\n                id={id}\n                aria-invalid={resolvedIsInvalid}\n                aria-describedby={ariaDescribedBy}\n                aria-errormessage={ariaErrorMessage}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                className={cn(\n                    selectedOption?.status && 'relative [&_[data-slot=select-value]]:pl-5',\n                    '[&_[data-slot=select-value]]:overflow-hidden [&_[data-slot=select-value]>span]:block [&_[data-slot=select-value]>span]:min-w-0 [&_[data-slot=select-value]>span]:max-w-full [&_[data-slot=select-value]>span]:truncate',\n                    triggerClassName,\n                )}\n            >\n                {selectedOption?.status && (\n                    <Status\n                        status={selectedOption.status}\n                        className=\"absolute left-2.5 top-1/2 -translate-y-1/2\"\n                    />\n                )}\n                <SelectValue placeholder={placeholder}>\n                    {selectedOption ? (\n                        <span className=\"block min-w-0 max-w-full truncate\" title={selectedOption.label}>\n                            {selectedOption.label}\n                        </span>\n                    ) : (\n                        <span className=\"block min-w-0 max-w-full truncate text-slate-500\" title={resolvedPlaceholder}>\n                            {resolvedPlaceholder}\n                        </span>\n                    )}\n                </SelectValue>\n            </SelectTrigger>\n\n            {options?.length > 0 && (\n                <SelectContent className={contentClassName}>\n                    {groupedOptions.map((group) => {\n                        return (\n                            <SelectGroup key={group.group ?? group._key}>\n                                {group.group && <SelectLabel>{group.group}</SelectLabel>}\n\n                                {group.options?.map((option) => {\n                                    return (\n                                        <SelectItem\n                                            key={String(option.value)}\n                                            value={option.value}\n                                            disabled={option.disabled}\n                                        >\n                                            {option.status && (\n                                                <Status status={option.status} />\n                                            )}\n                                            <span className=\"block min-w-0 flex-1 truncate\" title={option.label}>\n                                                {option.label}\n                                            </span>\n                                        </SelectItem>\n                                    );\n                                })}\n                            </SelectGroup>\n                        );\n                    })}\n                </SelectContent>\n            )}\n        </Select>\n    );\n});\n\nexport default Select;\nexport type { SelectProps };\n"],"mappings":";;;;;;;;AAkFA,IAAa,cAAc,YAA4C,EACnE,SACA,aACA,MACA,UACA,OACA,kBACA,kBACA,WACA,IACA,gBAAgB,aAChB,oBAAoB,iBACpB,qBAAqB,kBACrB,cAAc,WACd,mBAAmB,gBACnB,GAAG,eACJ,QAAQ;CACP,MAAM,qBAAqB,cAAoC;AAC3D,MAAI,SACA,UAAS,UAAU;;CAoB3B,MAAM,YAAY,WAAmF;AACjG,SAAO,OAAO,WAAW,YAAY,WAAW,QAAQ,WAAW;;CAGvE,MAAM,iBAAiB,QAAQ,KAAK,QAAQ,UAAU;AAClD,MAAI,SAAS,OAAO,CAChB,QAAO;AAGX,SAAO;GACH,OAAO;GACP,SAAS,CAAC,OAAO;GACjB,MAAM,aAAa;GACtB;GACH;CAEF,MAAM,cAAc,QAAQ,SAAS,WAAW;AAC5C,MAAI,SAAS,OAAO,CAChB,QAAO,OAAO;AAGlB,SAAO,CAAC,OAAO;GACjB;CAEF,MAAM,iBAAiB,YAAY,MAAM,WAAW;AAChD,SAAO,OAAO,OAAO,MAAM,KAAK,OAAO,MAAM;GAC/C;CACF,MAAM,sBAAsB,eAAe;CAC3C,MAAM,oBAAoB,QAAQ,aAAa,gBAAgB,QAAQ,gBAAgB,OAAO;AAE9F,QACI,qBAAC,QAAD;EACW;EACP,eAAe;EACT;EACN,OAAO;EACP,GAAI;YALR,CAOI,qBAAC,eAAD;GACS;GACD;GACJ,gBAAc;GACd,oBAAkB;GAClB,qBAAmB;GACnB,cAAY;GACZ,mBAAiB;GACjB,WAAW,GACP,gBAAgB,UAAU,8CAC1B,0NACA,iBACH;aAZL,CAcK,gBAAgB,UACb,oBAAC,QAAD;IACI,QAAQ,eAAe;IACvB,WAAU;IACZ,CAAA,EAEN,oBAAC,aAAD;IAA0B;cACrB,iBACG,oBAAC,QAAD;KAAM,WAAU;KAAoC,OAAO,eAAe;eACrE,eAAe;KACb,CAAA,GAEP,oBAAC,QAAD;KAAM,WAAU;KAAmD,OAAO;eACrE;KACE,CAAA;IAED,CAAA,CACF;MAEf,SAAS,SAAS,KACf,oBAAC,eAAD;GAAe,WAAW;aACrB,eAAe,KAAK,UAAU;AAC3B,WACI,qBAAC,aAAD,EAAA,UAAA,CACK,MAAM,SAAS,oBAAC,aAAD,EAAA,UAAc,MAAM,OAAoB,CAAA,EAEvD,MAAM,SAAS,KAAK,WAAW;AAC5B,YACI,qBAAC,YAAD;MAEI,OAAO,OAAO;MACd,UAAU,OAAO;gBAHrB,CAKK,OAAO,UACJ,oBAAC,QAAD,EAAQ,QAAQ,OAAO,QAAU,CAAA,EAErC,oBAAC,QAAD;OAAM,WAAU;OAAgC,OAAO,OAAO;iBACzD,OAAO;OACL,CAAA,CACE;QAVJ,OAAO,OAAO,MAAM,CAUhB;MAEnB,CACQ,EAAA,EAnBI,MAAM,SAAS,MAAM,KAmBzB;KAEpB;GACU,CAAA,CAEf;;EAEf;AAEF,IAAA,sBAAe"}
+{"version":3,"file":"SelectInput.js","names":[],"sources":["../../src/components/SelectInput.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n    SelectLabel,\n} from '@verbb/plugin-kit-react/components';\n\nimport type React from 'react';\nimport { ComponentProps, forwardRef } from 'react';\nimport { Status } from '@verbb/plugin-kit-react/components/Status';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\n\nexport interface Option<T = unknown> {\n    value: T;\n    label: string;\n    disabled?: boolean;\n    status?: string;\n}\n\ntype OptionGroup<T = unknown> = {\n    group: string;\n    options: Option<T>[];\n};\n\n// const valueToString = (val: Option['value']) => {\n//     if (val === null) { return '__null__'; }\n//     if (val === undefined) {\n//         console.error('option value cannot be undefined');\n//         return '__undefined__';\n//     }\n//     if (val === Infinity) { return '__Infinity__'; }\n//     if (val === -Infinity) { return '__-Infinity__'; }\n//     if (Number.isNaN(val)) { return '__NaN__'; }\n//     if (typeof val === 'symbol') { return `__symbol__${val.description}`; }\n//     // console.log(JSON.stringify(val));\n//     return JSON.stringify(val);\n// };\n\n// const stringToValue = (str: string) => {\n//     switch (str) {\n//         case '__null__':\n//             return null;\n//         case '__undefined__':\n//             return undefined;\n//         case '__Infinity__':\n//             return Infinity;\n//         case '__-Infinity__':\n//             return -Infinity;\n//         case '__NaN__':\n//             return NaN;\n//         default:\n//             if (str.startsWith('__symbol__')) {\n//                 return Symbol(str.slice(10));\n//             }\n//             return JSON.parse(str);\n//     }\n// };\n\ntype SelectBaseProps = ComponentProps<typeof Select>;\n\ninterface SelectProps<T = unknown>\n    extends Omit<SelectBaseProps, 'children' | 'value' | 'defaultValue' | 'onValueChange'> {\n    options: Array<Option<T> | OptionGroup<T>>;\n    placeholder?: string;\n    onChange?: (value: T) => void;\n    value?: T;\n    isInvalid?: boolean;\n    onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n    triggerClassName?: string;\n    contentClassName?: string;\n    alignItemWithTrigger?: boolean;\n    id?: string;\n    'aria-invalid'?: boolean | 'true' | 'false';\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nexport const SelectInput = forwardRef<HTMLButtonElement, SelectProps>(({\n    options,\n    placeholder,\n    size,\n    onChange,\n    value,\n    triggerClassName,\n    contentClassName,\n    alignItemWithTrigger = false,\n    isInvalid,\n    id,\n    modal = true,\n    'aria-invalid': ariaInvalid,\n    'aria-describedby': ariaDescribedBy,\n    'aria-errormessage': ariaErrorMessage,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...selectProps\n}, ref) => {\n    const handleValueChange = (nextValue: SelectProps['value']) => {\n        if (onChange) {\n            onChange(nextValue);\n        }\n    };\n\n    // const hasEmptyOption = options?.find((option) => { return option.value === ''; });\n\n    // let defaultValue = undefined;\n\n    // // Only show placeholder when value is initially undefined,\n    // // or when the value is an empty string and there's an empty option\n    // if (value === undefined || value === '') {\n    //     if (hasEmptyOption) {\n    //         defaultValue = valueToString('');\n    //     } else {\n    //         defaultValue = undefined;\n    //     }\n    // } else {\n    //     defaultValue = valueToString(value);\n    // }\n\n    const hasGroup = (option: Option<unknown> | OptionGroup<unknown>): option is OptionGroup<unknown> => {\n        return typeof option === 'object' && option !== null && 'group' in option;\n    };\n\n    const groupedOptions = options.map((option, index) => {\n        if (hasGroup(option)) {\n            return option;\n        }\n\n        return {\n            group: null,\n            options: [option],\n            _key: `ungrouped-${index}`,\n        };\n    });\n\n    const flatOptions = options.flatMap((option) => {\n        if (hasGroup(option)) {\n            return option.options;\n        }\n\n        return [option];\n    });\n\n    const selectedOption = flatOptions.find((option) => {\n        return String(option.value) === String(value);\n    });\n    const resolvedPlaceholder = placeholder || '';\n    const resolvedIsInvalid = Boolean(isInvalid || ariaInvalid === true || ariaInvalid === 'true');\n\n    return (\n        <Select\n            value={value}\n            onValueChange={handleValueChange}\n            size={size}\n            items={flatOptions as ComponentProps<typeof Select>['items']}\n            modal={modal}\n            {...selectProps}\n        >\n            <SelectTrigger\n                ref={ref}\n                id={id}\n                aria-invalid={resolvedIsInvalid}\n                aria-describedby={ariaDescribedBy}\n                aria-errormessage={ariaErrorMessage}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                className={cn(\n                    selectedOption?.status && 'relative [&_[data-slot=select-value]]:pl-5',\n                    '[&_[data-slot=select-value]]:overflow-hidden [&_[data-slot=select-value]>span]:block [&_[data-slot=select-value]>span]:min-w-0 [&_[data-slot=select-value]>span]:max-w-full [&_[data-slot=select-value]>span]:truncate',\n                    triggerClassName,\n                )}\n            >\n                {selectedOption?.status && (\n                    <Status\n                        status={selectedOption.status}\n                        className=\"absolute left-2.5 top-1/2 -translate-y-1/2\"\n                    />\n                )}\n                <SelectValue placeholder={placeholder}>\n                    {selectedOption ? (\n                        <span className=\"block min-w-0 max-w-full truncate\" title={selectedOption.label}>\n                            {selectedOption.label}\n                        </span>\n                    ) : (\n                        <span className=\"block min-w-0 max-w-full truncate text-slate-500\" title={resolvedPlaceholder}>\n                            {resolvedPlaceholder}\n                        </span>\n                    )}\n                </SelectValue>\n            </SelectTrigger>\n\n            {options?.length > 0 && (\n                <SelectContent\n                    className={contentClassName}\n                    alignItemWithTrigger={alignItemWithTrigger}\n                >\n                    {groupedOptions.map((group) => {\n                        return (\n                            <SelectGroup key={group.group ?? group._key}>\n                                {group.group && <SelectLabel>{group.group}</SelectLabel>}\n\n                                {group.options?.map((option) => {\n                                    return (\n                                        <SelectItem\n                                            key={String(option.value)}\n                                            value={option.value}\n                                            disabled={option.disabled}\n                                        >\n                                            {option.status && (\n                                                <Status status={option.status} />\n                                            )}\n                                            <span className=\"block min-w-0 flex-1 truncate\" title={option.label}>\n                                                {option.label}\n                                            </span>\n                                        </SelectItem>\n                                    );\n                                })}\n                            </SelectGroup>\n                        );\n                    })}\n                </SelectContent>\n            )}\n        </Select>\n    );\n});\n\nexport default Select;\nexport type { SelectProps };\n"],"mappings":";;;;;;;;AAmFA,IAAa,cAAc,YAA4C,EACnE,SACA,aACA,MACA,UACA,OACA,kBACA,kBACA,uBAAuB,OACvB,WACA,IACA,QAAQ,MACR,gBAAgB,aAChB,oBAAoB,iBACpB,qBAAqB,kBACrB,cAAc,WACd,mBAAmB,gBACnB,GAAG,eACJ,QAAQ;CACP,MAAM,qBAAqB,cAAoC;AAC3D,MAAI,SACA,UAAS,UAAU;;CAoB3B,MAAM,YAAY,WAAmF;AACjG,SAAO,OAAO,WAAW,YAAY,WAAW,QAAQ,WAAW;;CAGvE,MAAM,iBAAiB,QAAQ,KAAK,QAAQ,UAAU;AAClD,MAAI,SAAS,OAAO,CAChB,QAAO;AAGX,SAAO;GACH,OAAO;GACP,SAAS,CAAC,OAAO;GACjB,MAAM,aAAa;GACtB;GACH;CAEF,MAAM,cAAc,QAAQ,SAAS,WAAW;AAC5C,MAAI,SAAS,OAAO,CAChB,QAAO,OAAO;AAGlB,SAAO,CAAC,OAAO;GACjB;CAEF,MAAM,iBAAiB,YAAY,MAAM,WAAW;AAChD,SAAO,OAAO,OAAO,MAAM,KAAK,OAAO,MAAM;GAC/C;CACF,MAAM,sBAAsB,eAAe;CAC3C,MAAM,oBAAoB,QAAQ,aAAa,gBAAgB,QAAQ,gBAAgB,OAAO;AAE9F,QACI,qBAAC,QAAD;EACW;EACP,eAAe;EACT;EACN,OAAO;EACA;EACP,GAAI;YANR,CAQI,qBAAC,eAAD;GACS;GACD;GACJ,gBAAc;GACd,oBAAkB;GAClB,qBAAmB;GACnB,cAAY;GACZ,mBAAiB;GACjB,WAAW,GACP,gBAAgB,UAAU,8CAC1B,0NACA,iBACH;aAZL,CAcK,gBAAgB,UACb,oBAAC,QAAD;IACI,QAAQ,eAAe;IACvB,WAAU;IACZ,CAAA,EAEN,oBAAC,aAAD;IAA0B;cACrB,iBACG,oBAAC,QAAD;KAAM,WAAU;KAAoC,OAAO,eAAe;eACrE,eAAe;KACb,CAAA,GAEP,oBAAC,QAAD;KAAM,WAAU;KAAmD,OAAO;eACrE;KACE,CAAA;IAED,CAAA,CACF;MAEf,SAAS,SAAS,KACf,oBAAC,eAAD;GACI,WAAW;GACW;aAErB,eAAe,KAAK,UAAU;AAC3B,WACI,qBAAC,aAAD,EAAA,UAAA,CACK,MAAM,SAAS,oBAAC,aAAD,EAAA,UAAc,MAAM,OAAoB,CAAA,EAEvD,MAAM,SAAS,KAAK,WAAW;AAC5B,YACI,qBAAC,YAAD;MAEI,OAAO,OAAO;MACd,UAAU,OAAO;gBAHrB,CAKK,OAAO,UACJ,oBAAC,QAAD,EAAQ,QAAQ,OAAO,QAAU,CAAA,EAErC,oBAAC,QAAD;OAAM,WAAU;OAAgC,OAAO,OAAO;iBACzD,OAAO;OACL,CAAA,CACE;QAVJ,OAAO,OAAO,MAAM,CAUhB;MAEnB,CACQ,EAAA,EAnBI,MAAM,SAAS,MAAM,KAmBzB;KAEpB;GACU,CAAA,CAEf;;EAEf;AAEF,IAAA,sBAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../src/components/TimePicker.tsx"],"names":[],"mappings":"AAaA,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,2CAgDA"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../src/components/TimePicker.tsx"],"names":[],"mappings":"AAaA,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,2CAiDA"}

package/dist/components/TimePicker.js

@@ -24,6 +24,7 @@ function TimePicker({ value, onValueChange, placeholder = "", className, disable
 				className: cn("mr-1 text-gray-400")
 			}), /* @__PURE__ */ jsx(SelectValue, { placeholder })]
 		}), /* @__PURE__ */ jsx(SelectContent, {
+			alignItemWithTrigger: false,
 			className: cn("max-h-[15rem] min-w-[8rem]"),
 			children: timeOptions.map((option) => {
 				return /* @__PURE__ */ jsx(SelectItem, {

package/dist/components/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/TimePicker.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n} from '@verbb/plugin-kit-react/components';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faClock } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, generateTimeOptions } from '@verbb/plugin-kit-react/utils';\n\nexport function TimePicker({\n    value,\n    onValueChange,\n    placeholder = '',\n    className,\n    disabled = false,\n    isInvalid = false,\n    ...props\n}: {\n    value: string;\n    onValueChange?: (value: string) => void;\n    placeholder?: string;\n    className?: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n}) {\n    // Use cached time options instead of generating on every render\n    const timeOptions = generateTimeOptions();\n\n    return (\n        <Select\n            value={value}\n            onValueChange={(nextValue) => { onValueChange?.(String(nextValue ?? '')); }}\n            disabled={disabled}\n            {...props}\n        >\n            <SelectTrigger\n                aria-invalid={isInvalid}\n                className={cn(\n                    'min-w-[7rem] min-h-[2.125rem]! h-[2.125rem]!',\n                    'w-[130px] 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                    className,\n                )}>\n                <FontAwesomeIcon\n                    icon={faClock}\n                    className={cn(\n                        'mr-1 text-gray-400',\n                    )}\n                />\n                <SelectValue placeholder={placeholder} />\n            </SelectTrigger>\n            <SelectContent\n                className={cn(\n                    'max-h-[15rem] min-w-[8rem]',\n                )}\n            >\n                {timeOptions.map((option) => {\n                    return (\n                        <SelectItem\n                            key={option.value}\n                            value={option.value}\n                        >\n                            {option.label}\n                        </SelectItem>\n                    );\n                })}\n            </SelectContent>\n        </Select>\n    );\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,WAAW,EACvB,OACA,eACA,cAAc,IACd,WACA,WAAW,OACX,YAAY,OACZ,GAAG,SAQJ;CAEC,MAAM,cAAc,qBAAqB;AAEzC,QACI,qBAAC,QAAD;EACW;EACP,gBAAgB,cAAc;AAAE,mBAAgB,OAAO,aAAa,GAAG,CAAC;;EAC9D;EACV,GAAI;YAJR,CAMI,qBAAC,eAAD;GACI,gBAAc;GACd,WAAW,GACP,gDACA,iDACA,2CACA,sBACA,wBACA,mCACA,UACH;aAVL,CAWI,oBAAC,iBAAD;IACI,MAAM;IACN,WAAW,GACP,qBACH;IACH,CAAA,EACF,oBAAC,aAAD,EAA0B,aAAe,CAAA,CAC7B;MAChB,oBAAC,eAAD;GACI,WAAW,GACP,6BACH;aAEA,YAAY,KAAK,WAAW;AACzB,WACI,oBAAC,YAAD;KAEI,OAAO,OAAO;eAEb,OAAO;KACC,EAJJ,OAAO,MAIH;KAEnB;GACU,CAAA,CACX"}
+{"version":3,"file":"TimePicker.js","names":[],"sources":["../../src/components/TimePicker.tsx"],"sourcesContent":["import {\n    Select,\n    SelectContent,\n    SelectItem,\n    SelectTrigger,\n    SelectValue,\n} from '@verbb/plugin-kit-react/components';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faClock } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, generateTimeOptions } from '@verbb/plugin-kit-react/utils';\n\nexport function TimePicker({\n    value,\n    onValueChange,\n    placeholder = '',\n    className,\n    disabled = false,\n    isInvalid = false,\n    ...props\n}: {\n    value: string;\n    onValueChange?: (value: string) => void;\n    placeholder?: string;\n    className?: string;\n    disabled?: boolean;\n    isInvalid?: boolean;\n}) {\n    // Use cached time options instead of generating on every render\n    const timeOptions = generateTimeOptions();\n\n    return (\n        <Select\n            value={value}\n            onValueChange={(nextValue) => { onValueChange?.(String(nextValue ?? '')); }}\n            disabled={disabled}\n            {...props}\n        >\n            <SelectTrigger\n                aria-invalid={isInvalid}\n                className={cn(\n                    'min-w-[7rem] min-h-[2.125rem]! h-[2.125rem]!',\n                    'w-[130px] 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                    className,\n                )}>\n                <FontAwesomeIcon\n                    icon={faClock}\n                    className={cn(\n                        'mr-1 text-gray-400',\n                    )}\n                />\n                <SelectValue placeholder={placeholder} />\n            </SelectTrigger>\n            <SelectContent\n                alignItemWithTrigger={false}\n                className={cn(\n                    'max-h-[15rem] min-w-[8rem]',\n                )}\n            >\n                {timeOptions.map((option) => {\n                    return (\n                        <SelectItem\n                            key={option.value}\n                            value={option.value}\n                        >\n                            {option.label}\n                        </SelectItem>\n                    );\n                })}\n            </SelectContent>\n        </Select>\n    );\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,WAAW,EACvB,OACA,eACA,cAAc,IACd,WACA,WAAW,OACX,YAAY,OACZ,GAAG,SAQJ;CAEC,MAAM,cAAc,qBAAqB;AAEzC,QACI,qBAAC,QAAD;EACW;EACP,gBAAgB,cAAc;AAAE,mBAAgB,OAAO,aAAa,GAAG,CAAC;;EAC9D;EACV,GAAI;YAJR,CAMI,qBAAC,eAAD;GACI,gBAAc;GACd,WAAW,GACP,gDACA,iDACA,2CACA,sBACA,wBACA,mCACA,UACH;aAVL,CAWI,oBAAC,iBAAD;IACI,MAAM;IACN,WAAW,GACP,qBACH;IACH,CAAA,EACF,oBAAC,aAAD,EAA0B,aAAe,CAAA,CAC7B;MAChB,oBAAC,eAAD;GACI,sBAAsB;GACtB,WAAW,GACP,6BACH;aAEA,YAAY,KAAK,WAAW;AACzB,WACI,oBAAC,YAAD;KAEI,OAAO,OAAO;eAEb,OAAO;KACC,EAJJ,OAAO,MAIH;KAEnB;GACU,CAAA,CACX"}

package/dist/forms/fields/DateTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/DateTimeField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CAgDhE,CAAC"}
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/forms/fields/DateTimeField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,iBAAiB,kBAAkB,4CAoChE,CAAC"}

package/dist/forms/fields/DateTimeField.js

@@ -1,28 +1,21 @@
+import { formatDateTimeValue, parseDateTimeValue } from "../../utils/datetime.js";
 import { DatePicker } from "../../components/DatePicker.js";
 import { TimePicker } from "../../components/TimePicker.js";
 import "../../components/index.js";
 import { FieldLayout } from "../Field.js";
 import { useEngineField } from "../useEngineField.js";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/forms/fields/DateTimeField.tsx
 var DateTimeField = ({ form, field }) => {
 	const { value, setValue, errors } = useEngineField(form, field.name);
-	const initialDate = value ? new Date(String(value)) : null;
-	const initialTime = initialDate ? initialDate.toTimeString().slice(0, 5) : "";
-	const [dateValue, setDateValue] = useState(initialDate);
-	const [timeValue, setTimeValue] = useState(initialTime);
-	useEffect(() => {
-		let nextValue = "";
-		if (dateValue && timeValue) nextValue = (/* @__PURE__ */ new Date(`${dateValue.toISOString().split("T")[0]}T${timeValue}`)).toISOString();
-		else if (dateValue) nextValue = (/* @__PURE__ */ new Date(`${dateValue.toISOString().split("T")[0]}T00:00:00`)).toISOString();
-		if (String(value ?? "") !== nextValue) setValue(nextValue);
-	}, [
-		dateValue,
-		timeValue,
-		setValue,
-		value
-	]);
+	const parsedValue = useMemo(() => parseDateTimeValue(value), [value]);
+	const handleDateChange = (nextValue) => {
+		setValue(formatDateTimeValue(nextValue ?? null, parsedValue.time));
+	};
+	const handleTimeChange = (nextTime) => {
+		setValue(formatDateTimeValue(parsedValue.date, nextTime));
+	};
 	return /* @__PURE__ */ jsx(FieldLayout, {
 		name: field.name,
 		label: field.label,
@@ -34,14 +27,12 @@ var DateTimeField = ({ form, field }) => {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2",
 			children: [/* @__PURE__ */ jsx(DatePicker, {
-				value: dateValue,
-				onValueChange: (nextValue) => {
-					setDateValue(nextValue ?? null);
-				},
+				value: parsedValue.date,
+				onValueChange: handleDateChange,
 				isInvalid: errors.length > 0
 			}), /* @__PURE__ */ jsx(TimePicker, {
-				value: timeValue,
-				onValueChange: setTimeValue,
+				value: parsedValue.time,
+				onValueChange: handleTimeChange,
 				isInvalid: errors.length > 0
 			})]
 		})

package/dist/forms/fields/DateTimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeField.js","names":[],"sources":["../../../src/forms/fields/DateTimeField.tsx"],"sourcesContent":["import { DatePicker, TimePicker } from '@verbb/plugin-kit-react/components';\nimport { useEffect, useState } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype DateTimeFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n    };\n};\n\nexport const DateTimeField = ({ form, field }: DateTimeFieldProps) => {\n    const { value, setValue, errors } = useEngineField(form, field.name);\n    const initialDate = value ? new Date(String(value)) : null;\n    const initialTime = initialDate ? initialDate.toTimeString().slice(0, 5) : '';\n\n    const [dateValue, setDateValue] = useState<Date | null>(initialDate);\n    const [timeValue, setTimeValue] = useState<string>(initialTime);\n\n    useEffect(() => {\n        let nextValue = '';\n\n        if (dateValue && timeValue) {\n            const combinedDateTime = new Date(`${dateValue.toISOString().split('T')[0]}T${timeValue}`);\n            nextValue = combinedDateTime.toISOString();\n        } else if (dateValue) {\n            const dateOnly = new Date(`${dateValue.toISOString().split('T')[0]}T00:00:00`);\n            nextValue = dateOnly.toISOString();\n        }\n\n        if (String(value ?? '') !== nextValue) {\n            setValue(nextValue);\n        }\n    }, [dateValue, timeValue, setValue, value]);\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            <div className=\"flex gap-2\">\n                <DatePicker\n                    value={dateValue}\n                    onValueChange={(nextValue) => { setDateValue(nextValue ?? null); }}\n                    isInvalid={errors.length > 0}\n                />\n                <TimePicker\n                    value={timeValue}\n                    onValueChange={setTimeValue}\n                    isInvalid={errors.length > 0}\n                />\n            </div>\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EAAE,OAAO,UAAU,WAAW,eAAe,MAAM,MAAM,KAAK;CACpE,MAAM,cAAc,QAAQ,IAAI,KAAK,OAAO,MAAM,CAAC,GAAG;CACtD,MAAM,cAAc,cAAc,YAAY,cAAc,CAAC,MAAM,GAAG,EAAE,GAAG;CAE3E,MAAM,CAAC,WAAW,gBAAgB,SAAsB,YAAY;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAiB,YAAY;AAE/D,iBAAgB;EACZ,IAAI,YAAY;AAEhB,MAAI,aAAa,UAEb,8BAAY,IADiB,KAAK,GAAG,UAAU,aAAa,CAAC,MAAM,IAAI,CAAC,GAAG,GAAG,YAClE,EAAiB,aAAa;WACnC,UAEP,8BAAY,IADS,KAAK,GAAG,UAAU,aAAa,CAAC,MAAM,IAAI,CAAC,GAAG,WACvD,EAAS,aAAa;AAGtC,MAAI,OAAO,SAAS,GAAG,KAAK,UACxB,UAAS,UAAU;IAExB;EAAC;EAAW;EAAW;EAAU;EAAM,CAAC;AAE3C,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,qBAAC,OAAD;GAAK,WAAU;aAAf,CACI,oBAAC,YAAD;IACI,OAAO;IACP,gBAAgB,cAAc;AAAE,kBAAa,aAAa,KAAK;;IAC/D,WAAW,OAAO,SAAS;IAC7B,CAAA,EACF,oBAAC,YAAD;IACI,OAAO;IACP,eAAe;IACf,WAAW,OAAO,SAAS;IAC7B,CAAA,CACA;;EACI,CAAA"}
+{"version":3,"file":"DateTimeField.js","names":[],"sources":["../../../src/forms/fields/DateTimeField.tsx"],"sourcesContent":["import { DatePicker, TimePicker } from '@verbb/plugin-kit-react/components';\nimport { formatDateTimeValue, parseDateTimeValue } from '@verbb/plugin-kit-react/utils/datetime';\nimport { useMemo } from 'react';\nimport { FieldLayout } from '../Field';\nimport type { SchemaFormEngineApi } from '../engine/context';\nimport { useEngineField } from '../useEngineField';\n\ntype DateTimeFieldProps = {\n    form: SchemaFormEngineApi;\n    field: {\n        name: string;\n        label?: string;\n        instructions?: string;\n        warning?: string;\n        required?: boolean;\n    };\n};\n\nexport const DateTimeField = ({ form, field }: DateTimeFieldProps) => {\n    const { value, setValue, errors } = useEngineField(form, field.name);\n    const parsedValue = useMemo(() => parseDateTimeValue(value), [value]);\n\n    const handleDateChange = (nextValue?: Date) => {\n        setValue(formatDateTimeValue(nextValue ?? null, parsedValue.time));\n    };\n\n    const handleTimeChange = (nextTime: string) => {\n        setValue(formatDateTimeValue(parsedValue.date, nextTime));\n    };\n\n    return (\n        <FieldLayout\n            name={field.name}\n            label={field.label}\n            instructions={field.instructions}\n            warning={field.warning}\n            required={field.required}\n            errors={errors}\n            withControl={false}\n        >\n            <div className=\"flex gap-2\">\n                <DatePicker\n                    value={parsedValue.date}\n                    onValueChange={handleDateChange}\n                    isInvalid={errors.length > 0}\n                />\n                <TimePicker\n                    value={parsedValue.time}\n                    onValueChange={handleTimeChange}\n                    isInvalid={errors.length > 0}\n                />\n            </div>\n        </FieldLayout>\n    );\n};\n"],"mappings":";;;;;;;;;AAkBA,IAAa,iBAAiB,EAAE,MAAM,YAAgC;CAClE,MAAM,EAAE,OAAO,UAAU,WAAW,eAAe,MAAM,MAAM,KAAK;CACpE,MAAM,cAAc,cAAc,mBAAmB,MAAM,EAAE,CAAC,MAAM,CAAC;CAErE,MAAM,oBAAoB,cAAqB;AAC3C,WAAS,oBAAoB,aAAa,MAAM,YAAY,KAAK,CAAC;;CAGtE,MAAM,oBAAoB,aAAqB;AAC3C,WAAS,oBAAoB,YAAY,MAAM,SAAS,CAAC;;AAG7D,QACI,oBAAC,aAAD;EACI,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,SAAS,MAAM;EACf,UAAU,MAAM;EACR;EACR,aAAa;YAEb,qBAAC,OAAD;GAAK,WAAU;aAAf,CACI,oBAAC,YAAD;IACI,OAAO,YAAY;IACnB,eAAe;IACf,WAAW,OAAO,SAAS;IAC7B,CAAA,EACF,oBAAC,YAAD;IACI,OAAO,YAAY;IACnB,eAAe;IACf,WAAW,OAAO,SAAS;IAC7B,CAAA,CACA;;EACI,CAAA"}

package/dist/utils/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/utils/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAgD,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAiB,KAAK,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAE5E,KAAK,iBAAiB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC;AAEjG,MAAM,MAAM,oBAAoB,GAAG;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,oBAAoB,KAAG,IAwBtE,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/utils/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAgD,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACnG,OAAO,EAAiB,KAAK,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAG5E,KAAK,iBAAiB,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,MAAM,CAAC;AAEjG,MAAM,MAAM,oBAAoB,GAAG;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAClD,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,QAAQ,oBAAoB,KAAG,IA4BtE,CAAC"}

package/dist/utils/config.js

@@ -1,10 +1,14 @@
 import { setPortalClassName, setPortalContainer, setShadowRootSelectors } from "./portal.js";
 import { setTranslateFunction, setTranslationCategory } from "./translation.js";
 import { setHostBridge } from "./hostBridge.js";
+import { ensureDocumentScrollStability } from "./documentScrollStability.js";
 //#region src/utils/config.ts
 var configurePluginKitReact = (config) => {
 	if (config.portalClassName) setPortalClassName(config.portalClassName);
-	if (config.portalContainer) setPortalContainer(config.portalContainer);
+	if (config.portalContainer) {
+		setPortalContainer(config.portalContainer);
+		if (config.portalContainer instanceof ShadowRoot) ensureDocumentScrollStability();
+	}
 	if (config.shadowRootSelectors) setShadowRootSelectors(config.shadowRootSelectors);
 	if (config.translationCategory) setTranslationCategory(config.translationCategory);
 	if (config.translate) setTranslateFunction(config.translate);

package/dist/utils/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":[],"sources":["../../src/utils/config.ts"],"sourcesContent":["import { setPortalClassName, setPortalContainer, setShadowRootSelectors } from './portal';\nimport { setTranslationCategory, setTranslateFunction, type TranslateParams } from './translation';\nimport { setHostBridge, type PluginKitReactHostBridge } from './hostBridge';\n\ntype TranslateFunction = (category: string, message: string, params?: TranslateParams) => string;\n\nexport type PluginKitReactConfig = {\n    portalClassName?: string;\n    portalContainer?: HTMLElement | ShadowRoot | null;\n    shadowRootSelectors?: string[];\n    translationCategory?: string;\n    translate?: TranslateFunction;\n    hostBridge?: Partial<PluginKitReactHostBridge>;\n};\n\nexport const configurePluginKitReact = (config: PluginKitReactConfig): void => {\n    if (config.portalClassName) {\n        setPortalClassName(config.portalClassName);\n    }\n\n    if (config.portalContainer) {\n        setPortalContainer(config.portalContainer);\n    }\n\n    if (config.shadowRootSelectors) {\n        setShadowRootSelectors(config.shadowRootSelectors);\n    }\n\n    if (config.translationCategory) {\n        setTranslationCategory(config.translationCategory);\n    }\n\n    if (config.translate) {\n        setTranslateFunction(config.translate);\n    }\n\n    if (config.hostBridge) {\n        setHostBridge(config.hostBridge);\n    }\n};\n"],"mappings":";;;;AAeA,IAAa,2BAA2B,WAAuC;AAC3E,KAAI,OAAO,gBACP,oBAAmB,OAAO,gBAAgB;AAG9C,KAAI,OAAO,gBACP,oBAAmB,OAAO,gBAAgB;AAG9C,KAAI,OAAO,oBACP,wBAAuB,OAAO,oBAAoB;AAGtD,KAAI,OAAO,oBACP,wBAAuB,OAAO,oBAAoB;AAGtD,KAAI,OAAO,UACP,sBAAqB,OAAO,UAAU;AAG1C,KAAI,OAAO,WACP,eAAc,OAAO,WAAW"}
+{"version":3,"file":"config.js","names":[],"sources":["../../src/utils/config.ts"],"sourcesContent":["import { setPortalClassName, setPortalContainer, setShadowRootSelectors } from './portal';\nimport { setTranslationCategory, setTranslateFunction, type TranslateParams } from './translation';\nimport { setHostBridge, type PluginKitReactHostBridge } from './hostBridge';\nimport { ensureDocumentScrollStability } from './documentScrollStability';\n\ntype TranslateFunction = (category: string, message: string, params?: TranslateParams) => string;\n\nexport type PluginKitReactConfig = {\n    portalClassName?: string;\n    portalContainer?: HTMLElement | ShadowRoot | null;\n    shadowRootSelectors?: string[];\n    translationCategory?: string;\n    translate?: TranslateFunction;\n    hostBridge?: Partial<PluginKitReactHostBridge>;\n};\n\nexport const configurePluginKitReact = (config: PluginKitReactConfig): void => {\n    if (config.portalClassName) {\n        setPortalClassName(config.portalClassName);\n    }\n\n    if (config.portalContainer) {\n        setPortalContainer(config.portalContainer);\n\n        if (config.portalContainer instanceof ShadowRoot) {\n            ensureDocumentScrollStability();\n        }\n    }\n\n    if (config.shadowRootSelectors) {\n        setShadowRootSelectors(config.shadowRootSelectors);\n    }\n\n    if (config.translationCategory) {\n        setTranslationCategory(config.translationCategory);\n    }\n\n    if (config.translate) {\n        setTranslateFunction(config.translate);\n    }\n\n    if (config.hostBridge) {\n        setHostBridge(config.hostBridge);\n    }\n};\n"],"mappings":";;;;;AAgBA,IAAa,2BAA2B,WAAuC;AAC3E,KAAI,OAAO,gBACP,oBAAmB,OAAO,gBAAgB;AAG9C,KAAI,OAAO,iBAAiB;AACxB,qBAAmB,OAAO,gBAAgB;AAE1C,MAAI,OAAO,2BAA2B,WAClC,gCAA+B;;AAIvC,KAAI,OAAO,oBACP,wBAAuB,OAAO,oBAAoB;AAGtD,KAAI,OAAO,oBACP,wBAAuB,OAAO,oBAAoB;AAGtD,KAAI,OAAO,UACP,sBAAqB,OAAO,UAAU;AAG1C,KAAI,OAAO,WACP,eAAc,OAAO,WAAW"}

package/dist/utils/datetime.d.ts

@@ -0,0 +1,10 @@
+export type ParsedDateTimeValue = {
+    date: Date | null;
+    time: string;
+};
+export declare const parseLocalDate: (value: unknown) => Date | undefined;
+export declare const parseDateTimeValue: (value: unknown) => ParsedDateTimeValue;
+export declare const startOfMonth: (value: Date) => Date;
+export declare const resolveCalendarMonth: (selected?: Date) => Date;
+export declare const formatDateTimeValue: (date: Date | null, time: string) => string;
+//# sourceMappingURL=datetime.d.ts.map

package/dist/utils/datetime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.d.ts","sourceRoot":"","sources":["../../src/utils/datetime.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,IAAI,GAAG,SAEtD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,OAAO,KAAG,mBA2CnD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,KAAG,IAE1C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,WAAW,IAAI,KAAG,IAEtD,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,GAAG,IAAI,EAAE,MAAM,MAAM,KAAG,MAQrE,CAAC"}

package/dist/utils/datetime.js

@@ -0,0 +1,60 @@
+//#region src/utils/datetime.ts
+var pad2 = (value) => {
+	return String(value).padStart(2, "0");
+};
+var parseLocalDate = (value) => {
+	return parseDateTimeValue(value).date ?? void 0;
+};
+var parseDateTimeValue = (value) => {
+	if (value === null || value === void 0 || value === "") return {
+		date: null,
+		time: ""
+	};
+	if (value instanceof Date) {
+		if (Number.isNaN(value.getTime())) return {
+			date: null,
+			time: ""
+		};
+		return {
+			date: new Date(value.getFullYear(), value.getMonth(), value.getDate()),
+			time: `${pad2(value.getHours())}:${pad2(value.getMinutes())}`
+		};
+	}
+	const stringValue = String(value).trim();
+	if (!stringValue) return {
+		date: null,
+		time: ""
+	};
+	const localMatch = stringValue.match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?/);
+	if (localMatch && !/[zZ]$/.test(stringValue) && !/[+-]\d{2}:?\d{2}$/.test(stringValue)) {
+		const [, year, month, day, hour = "00", minute = "00"] = localMatch;
+		return {
+			date: new Date(Number(year), Number(month) - 1, Number(day)),
+			time: `${hour}:${minute}`
+		};
+	}
+	const parsed = new Date(stringValue);
+	if (Number.isNaN(parsed.getTime())) return {
+		date: null,
+		time: ""
+	};
+	return {
+		date: new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate()),
+		time: `${pad2(parsed.getHours())}:${pad2(parsed.getMinutes())}`
+	};
+};
+var startOfMonth = (value) => {
+	return new Date(value.getFullYear(), value.getMonth(), 1);
+};
+var resolveCalendarMonth = (selected) => {
+	return startOfMonth(selected ?? /* @__PURE__ */ new Date());
+};
+var formatDateTimeValue = (date, time) => {
+	if (!date) return "";
+	const [hour = "00", minute = "00"] = (time || "00:00").split(":");
+	return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${pad2(Number(hour))}:${pad2(Number(minute))}:00`;
+};
+//#endregion
+export { formatDateTimeValue, parseDateTimeValue, parseLocalDate, resolveCalendarMonth, startOfMonth };
+
+//# sourceMappingURL=datetime.js.map

package/dist/utils/datetime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime.js","names":[],"sources":["../../src/utils/datetime.ts"],"sourcesContent":["const pad2 = (value: number): string => {\n    return String(value).padStart(2, '0');\n};\n\nexport type ParsedDateTimeValue = {\n    date: Date | null;\n    time: string;\n};\n\nexport const parseLocalDate = (value: unknown): Date | undefined => {\n    return parseDateTimeValue(value).date ?? undefined;\n};\n\nexport const parseDateTimeValue = (value: unknown): ParsedDateTimeValue => {\n    if (value === null || value === undefined || value === '') {\n        return { date: null, time: '' };\n    }\n\n    if (value instanceof Date) {\n        if (Number.isNaN(value.getTime())) {\n            return { date: null, time: '' };\n        }\n\n        return {\n            date: new Date(value.getFullYear(), value.getMonth(), value.getDate()),\n            time: `${pad2(value.getHours())}:${pad2(value.getMinutes())}`,\n        };\n    }\n\n    const stringValue = String(value).trim();\n\n    if (!stringValue) {\n        return { date: null, time: '' };\n    }\n\n    const localMatch = stringValue.match(/^(\\d{4})-(\\d{2})-(\\d{2})(?:[ T](\\d{2}):(\\d{2})(?::(\\d{2}))?)?/);\n\n    if (localMatch && !/[zZ]$/.test(stringValue) && !/[+-]\\d{2}:?\\d{2}$/.test(stringValue)) {\n        const [, year, month, day, hour = '00', minute = '00'] = localMatch;\n\n        return {\n            date: new Date(Number(year), Number(month) - 1, Number(day)),\n            time: `${hour}:${minute}`,\n        };\n    }\n\n    const parsed = new Date(stringValue);\n\n    if (Number.isNaN(parsed.getTime())) {\n        return { date: null, time: '' };\n    }\n\n    return {\n        date: new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate()),\n        time: `${pad2(parsed.getHours())}:${pad2(parsed.getMinutes())}`,\n    };\n};\n\nexport const startOfMonth = (value: Date): Date => {\n    return new Date(value.getFullYear(), value.getMonth(), 1);\n};\n\nexport const resolveCalendarMonth = (selected?: Date): Date => {\n    return startOfMonth(selected ?? new Date());\n};\n\nexport const formatDateTimeValue = (date: Date | null, time: string): string => {\n    if (!date) {\n        return '';\n    }\n\n    const [hour = '00', minute = '00'] = (time || '00:00').split(':');\n\n    return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${pad2(Number(hour))}:${pad2(Number(minute))}:00`;\n};\n"],"mappings":";AAAA,IAAM,QAAQ,UAA0B;AACpC,QAAO,OAAO,MAAM,CAAC,SAAS,GAAG,IAAI;;AAQzC,IAAa,kBAAkB,UAAqC;AAChE,QAAO,mBAAmB,MAAM,CAAC,QAAQ,KAAA;;AAG7C,IAAa,sBAAsB,UAAwC;AACvE,KAAI,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU,GACnD,QAAO;EAAE,MAAM;EAAM,MAAM;EAAI;AAGnC,KAAI,iBAAiB,MAAM;AACvB,MAAI,OAAO,MAAM,MAAM,SAAS,CAAC,CAC7B,QAAO;GAAE,MAAM;GAAM,MAAM;GAAI;AAGnC,SAAO;GACH,MAAM,IAAI,KAAK,MAAM,aAAa,EAAE,MAAM,UAAU,EAAE,MAAM,SAAS,CAAC;GACtE,MAAM,GAAG,KAAK,MAAM,UAAU,CAAC,CAAC,GAAG,KAAK,MAAM,YAAY,CAAC;GAC9D;;CAGL,MAAM,cAAc,OAAO,MAAM,CAAC,MAAM;AAExC,KAAI,CAAC,YACD,QAAO;EAAE,MAAM;EAAM,MAAM;EAAI;CAGnC,MAAM,aAAa,YAAY,MAAM,gEAAgE;AAErG,KAAI,cAAc,CAAC,QAAQ,KAAK,YAAY,IAAI,CAAC,oBAAoB,KAAK,YAAY,EAAE;EACpF,MAAM,GAAG,MAAM,OAAO,KAAK,OAAO,MAAM,SAAS,QAAQ;AAEzD,SAAO;GACH,MAAM,IAAI,KAAK,OAAO,KAAK,EAAE,OAAO,MAAM,GAAG,GAAG,OAAO,IAAI,CAAC;GAC5D,MAAM,GAAG,KAAK,GAAG;GACpB;;CAGL,MAAM,SAAS,IAAI,KAAK,YAAY;AAEpC,KAAI,OAAO,MAAM,OAAO,SAAS,CAAC,CAC9B,QAAO;EAAE,MAAM;EAAM,MAAM;EAAI;AAGnC,QAAO;EACH,MAAM,IAAI,KAAK,OAAO,aAAa,EAAE,OAAO,UAAU,EAAE,OAAO,SAAS,CAAC;EACzE,MAAM,GAAG,KAAK,OAAO,UAAU,CAAC,CAAC,GAAG,KAAK,OAAO,YAAY,CAAC;EAChE;;AAGL,IAAa,gBAAgB,UAAsB;AAC/C,QAAO,IAAI,KAAK,MAAM,aAAa,EAAE,MAAM,UAAU,EAAE,EAAE;;AAG7D,IAAa,wBAAwB,aAA0B;AAC3D,QAAO,aAAa,4BAAY,IAAI,MAAM,CAAC;;AAG/C,IAAa,uBAAuB,MAAmB,SAAyB;AAC5E,KAAI,CAAC,KACD,QAAO;CAGX,MAAM,CAAC,OAAO,MAAM,SAAS,SAAS,QAAQ,SAAS,MAAM,IAAI;AAEjE,QAAO,GAAG,KAAK,aAAa,CAAC,GAAG,KAAK,KAAK,UAAU,GAAG,EAAE,CAAC,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,GAAG,KAAK,OAAO,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,OAAO,CAAC,CAAC"}

package/dist/utils/documentScrollStability.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reserve scrollbar space on the document root so Base UI modal scroll lock
+ * can use the stable gutter path instead of padding/body width compensation.
+ * Safe to call multiple times; only injects once.
+ */
+export declare const ensureDocumentScrollStability: () => void;
+//# sourceMappingURL=documentScrollStability.d.ts.map

package/dist/utils/documentScrollStability.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentScrollStability.d.ts","sourceRoot":"","sources":["../../src/utils/documentScrollStability.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,QAAO,IAahD,CAAC"}

package/dist/utils/documentScrollStability.js

@@ -0,0 +1,19 @@
+//#region src/utils/documentScrollStability.ts
+var DOCUMENT_SCROLL_STABILITY_STYLE_ID = "plugin-kit-document-scroll-stability";
+/**
+* Reserve scrollbar space on the document root so Base UI modal scroll lock
+* can use the stable gutter path instead of padding/body width compensation.
+* Safe to call multiple times; only injects once.
+*/
+var ensureDocumentScrollStability = () => {
+	if (typeof document === "undefined") return;
+	if (document.querySelector(`style[data-plugin-kit-style-id="${DOCUMENT_SCROLL_STABILITY_STYLE_ID}"]`)) return;
+	const style = document.createElement("style");
+	style.setAttribute("data-plugin-kit-style-id", DOCUMENT_SCROLL_STABILITY_STYLE_ID);
+	style.textContent = "html { scrollbar-gutter: stable; }";
+	document.head.appendChild(style);
+};
+//#endregion
+export { ensureDocumentScrollStability };
+
+//# sourceMappingURL=documentScrollStability.js.map

package/dist/utils/documentScrollStability.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"documentScrollStability.js","names":[],"sources":["../../src/utils/documentScrollStability.ts"],"sourcesContent":["const DOCUMENT_SCROLL_STABILITY_STYLE_ID = 'plugin-kit-document-scroll-stability';\n\n/**\n * Reserve scrollbar space on the document root so Base UI modal scroll lock\n * can use the stable gutter path instead of padding/body width compensation.\n * Safe to call multiple times; only injects once.\n */\nexport const ensureDocumentScrollStability = (): void => {\n    if (typeof document === 'undefined') {\n        return;\n    }\n\n    if (document.querySelector(`style[data-plugin-kit-style-id=\"${DOCUMENT_SCROLL_STABILITY_STYLE_ID}\"]`)) {\n        return;\n    }\n\n    const style = document.createElement('style');\n    style.setAttribute('data-plugin-kit-style-id', DOCUMENT_SCROLL_STABILITY_STYLE_ID);\n    style.textContent = 'html { scrollbar-gutter: stable; }';\n    document.head.appendChild(style);\n};\n"],"mappings":";AAAA,IAAM,qCAAqC;;;;;;AAO3C,IAAa,sCAA4C;AACrD,KAAI,OAAO,aAAa,YACpB;AAGJ,KAAI,SAAS,cAAc,mCAAmC,mCAAmC,IAAI,CACjG;CAGJ,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,aAAa,4BAA4B,mCAAmC;AAClF,OAAM,cAAc;AACpB,UAAS,KAAK,YAAY,MAAM"}

package/dist/utils/index.d.ts

@@ -1,6 +1,8 @@
 export * from '@verbb/plugin-kit';
 export * from './classes';
 export * from './config';
+export * from './datetime';
+export * from './documentScrollStability';
 export * from './craftHostBridge';
 export * from './handle';
 export * from './hostBridge';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAGlC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAC;AAGlC,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC"}

package/dist/utils/index.js

@@ -3,7 +3,9 @@ import { cn } from "./classes.js";
 import { getPortalClassName, getPortalContainer, getPortalTargetForAppend, getShadowRootSelectors, setPortalClassName, setPortalContainer, setShadowRootSelectors } from "./portal.js";
 import { setTranslateFunction, setTranslationCategory, translate } from "./translation.js";
 import { getHostBridge, hostFormatDate, hostGetLocale, hostGetTimepickerOptions, hostOpenElementSelector, hostRequest, setHostBridge } from "./hostBridge.js";
+import { ensureDocumentScrollStability } from "./documentScrollStability.js";
 import { configurePluginKitReact } from "./config.js";
+import { formatDateTimeValue, parseDateTimeValue, parseLocalDate, resolveCalendarMonth, startOfMonth } from "./datetime.js";
 import { createCraftHostBridge } from "./craftHostBridge.js";
 import { buildUniqueHandleFromSource, getDynamicReservedHandles } from "./handle.js";
 import { evaluateCondition, extractFieldNames, extractFields, normalizeAttrs, traverseSchema } from "./schema.js";
@@ -24,9 +26,11 @@ var utils_exports = /* @__PURE__ */ __exportAll({
 	configurePluginKitReact: () => configurePluginKitReact,
 	createCraftHostBridge: () => createCraftHostBridge,
 	createSchemaFieldIndex: () => createSchemaFieldIndex,
+	ensureDocumentScrollStability: () => ensureDocumentScrollStability,
 	evaluateCondition: () => evaluateCondition,
 	extractFieldNames: () => extractFieldNames,
 	extractFields: () => extractFields,
+	formatDateTimeValue: () => formatDateTimeValue,
 	generateTimeOptions: () => generateTimeOptions,
 	getDynamicReservedHandles: () => getDynamicReservedHandles,
 	getHostBridge: () => getHostBridge,
@@ -47,12 +51,16 @@ var utils_exports = /* @__PURE__ */ __exportAll({
 	hostRequest: () => hostRequest,
 	normalizeAttrs: () => normalizeAttrs,
 	normalizeSchemaNode: () => normalizeSchemaNode,
+	parseDateTimeValue: () => parseDateTimeValue,
+	parseLocalDate: () => parseLocalDate,
+	resolveCalendarMonth: () => resolveCalendarMonth,
 	setHostBridge: () => setHostBridge,
 	setPortalClassName: () => setPortalClassName,
 	setPortalContainer: () => setPortalContainer,
 	setShadowRootSelectors: () => setShadowRootSelectors,
 	setTranslateFunction: () => setTranslateFunction,
 	setTranslationCategory: () => setTranslationCategory,
+	startOfMonth: () => startOfMonth,
 	translate: () => translate,
 	traverseSchema: () => traverseSchema,
 	validateFormValues: () => validateFormValues,
@@ -61,6 +69,6 @@ var utils_exports = /* @__PURE__ */ __exportAll({
 import * as import__verbb_plugin_kit from "@verbb/plugin-kit";
 __reExport(utils_exports, import__verbb_plugin_kit);
 //#endregion
-export { buildUniqueHandleFromSource, clearTimeOptionsCache, cn, configurePluginKitReact, createCraftHostBridge, createSchemaFieldIndex, evaluateCondition, extractFieldNames, extractFields, generateTimeOptions, getDynamicReservedHandles, getHostBridge, getPortalClassName, getPortalContainer, getPortalTargetForAppend, getRichTextHtml, getRichTextText, getSchemaFieldIndex, getSchemaFieldNames, getShadowRootSelectors, hasSchemaErrors, hasSchemaErrorsCached, hostFormatDate, hostGetLocale, hostGetTimepickerOptions, hostOpenElementSelector, hostRequest, normalizeAttrs, normalizeSchemaNode, setHostBridge, setPortalClassName, setPortalContainer, setShadowRootSelectors, setTranslateFunction, setTranslationCategory, translate, traverseSchema, utils_exports, validateFormValues, zustandHmrFix };
+export { buildUniqueHandleFromSource, clearTimeOptionsCache, cn, configurePluginKitReact, createCraftHostBridge, createSchemaFieldIndex, ensureDocumentScrollStability, evaluateCondition, extractFieldNames, extractFields, formatDateTimeValue, generateTimeOptions, getDynamicReservedHandles, getHostBridge, getPortalClassName, getPortalContainer, getPortalTargetForAppend, getRichTextHtml, getRichTextText, getSchemaFieldIndex, getSchemaFieldNames, getShadowRootSelectors, hasSchemaErrors, hasSchemaErrorsCached, hostFormatDate, hostGetLocale, hostGetTimepickerOptions, hostOpenElementSelector, hostRequest, normalizeAttrs, normalizeSchemaNode, parseDateTimeValue, parseLocalDate, resolveCalendarMonth, setHostBridge, setPortalClassName, setPortalContainer, setShadowRootSelectors, setTranslateFunction, setTranslationCategory, startOfMonth, translate, traverseSchema, utils_exports, validateFormValues, zustandHmrFix };
 
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/utils/index.ts"],"sourcesContent":["// Re-export all utilities from the base plugin-kit package\nexport * from '@verbb/plugin-kit';\n\n// Export local utilities\nexport * from './classes';\nexport * from './config';\nexport * from './craftHostBridge';\nexport * from './handle';\nexport * from './hostBridge';\nexport * from './portal';\nexport * from './schema';\nexport * from './schemaFieldNames';\nexport * from './schemaIndex';\nexport * from './schemaIndexCache';\nexport * from './schemaNormalize';\nexport * from './store';\nexport * from './timeOptions';\nexport * from './tiptap';\nexport * from './translation';\nexport * from './validation';\n"],"mappings":""}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/utils/index.ts"],"sourcesContent":["// Re-export all utilities from the base plugin-kit package\nexport * from '@verbb/plugin-kit';\n\n// Export local utilities\nexport * from './classes';\nexport * from './config';\nexport * from './datetime';\nexport * from './documentScrollStability';\nexport * from './craftHostBridge';\nexport * from './handle';\nexport * from './hostBridge';\nexport * from './portal';\nexport * from './schema';\nexport * from './schemaFieldNames';\nexport * from './schemaIndex';\nexport * from './schemaIndexCache';\nexport * from './schemaNormalize';\nexport * from './store';\nexport * from './timeOptions';\nexport * from './tiptap';\nexport * from './translation';\nexport * from './validation';\n"],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verbb/plugin-kit-react",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -154,7 +154,7 @@
         "@tiptap/react": "^3.22.4",
         "@types/prismjs": "^1.26.6",
         "@uiw/react-codemirror": "^4.25.10",
-        "@verbb/plugin-kit": "1.0.0",
+        "@verbb/plugin-kit": "1.0.7",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",