@verbb/plugin-kit-react 1.0.0

package/dist/components/ComboboxInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../src/components/ComboboxInput.tsx"],"sourcesContent":["import {\n    Fragment, useCallback, useEffect, useMemo, useRef, useState,\n} from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { Spinner } from '@verbb/plugin-kit-react/components';\nimport {\n    Combobox,\n    ComboboxPrimitiveInput,\n    ComboboxContent,\n    ComboboxEmpty,\n    ComboboxList,\n    ComboboxItem,\n    ComboboxValue,\n    ComboboxChips,\n    ComboboxChip,\n    ComboboxChipsInput,\n    ComboboxHighlightedText,\n    useComboboxAnchor,\n} from '@verbb/plugin-kit-react/components/Combobox';\n\nexport type ComboboxInputOption = {\n    label: string;\n    value: string | number;\n    [key: string]: unknown;\n};\n\nexport type ComboboxInputProps = {\n    options?: ComboboxInputOption[];\n    fetchOptions?: () => Promise<ComboboxInputOption[]>;\n    value?: string | number | Array<string | number> | null;\n    onValueChange?: (value: string | number | Array<string | number> | null) => void;\n    multiple?: boolean;\n    disabled?: boolean;\n    placeholder?: string;\n    emptyMessage?: string;\n    className?: string;\n    contentClassName?: string;\n    withLoadingIndicator?: boolean;\n    showClear?: boolean;\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onInputValueChange?: (value: string) => void;\n    cacheKey?: string;\n    cacheTtlMs?: number;\n    disableCache?: boolean;\n};\n\ntype CacheEntry = {\n    options: ComboboxInputOption[];\n    expiresAt: number;\n};\n\nconst optionsCache = new Map<string, CacheEntry>();\n\nconst toStringValue = (value: unknown): string => {\n    return String(value ?? '');\n};\n\nexport const ComboboxInput = ({\n    options,\n    fetchOptions,\n    value = null,\n    onValueChange,\n    multiple = false,\n    disabled = false,\n    placeholder = 'Select an option',\n    emptyMessage = 'No options found.',\n    className,\n    contentClassName,\n    withLoadingIndicator = true,\n    showClear = true,\n    open,\n    defaultOpen,\n    onOpenChange,\n    onInputValueChange,\n    cacheKey,\n    cacheTtlMs = 5 * 60 * 1000,\n    disableCache = false,\n}: ComboboxInputProps) => {\n    const [fetchedOptions, setFetchedOptions] = useState<ComboboxInputOption[] | null>(null);\n    const [loading, setLoading] = useState(false);\n    const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));\n    const [searchValue, setSearchValue] = useState('');\n    const hasLoadedRef = useRef(false);\n    const anchor = useComboboxAnchor();\n    const isMultiple = multiple;\n    const isOpen = open ?? internalOpen;\n\n    const resolvedOptions = useMemo(() => {\n        return fetchedOptions ?? options ?? [];\n    }, [fetchedOptions, options]);\n\n    const resolveCachedOptions = useCallback(() => {\n        if (disableCache || !cacheKey) {\n            return null;\n        }\n\n        const cached = optionsCache.get(cacheKey);\n        if (!cached) {\n            return null;\n        }\n\n        if (cached.expiresAt <= Date.now()) {\n            optionsCache.delete(cacheKey);\n            return null;\n        }\n\n        return cached.options;\n    }, [cacheKey, disableCache]);\n\n    const persistCachedOptions = useCallback((nextOptions: ComboboxInputOption[]) => {\n        if (disableCache || !cacheKey) {\n            return;\n        }\n\n        optionsCache.set(cacheKey, {\n            options: nextOptions,\n            expiresAt: Date.now() + cacheTtlMs,\n        });\n    }, [cacheKey, cacheTtlMs, disableCache]);\n\n    useEffect(() => {\n        if (!fetchOptions || !isOpen) {\n            return;\n        }\n\n        const cachedOptions = resolveCachedOptions();\n        if (cachedOptions) {\n            setFetchedOptions(cachedOptions);\n            hasLoadedRef.current = true;\n            return;\n        }\n\n        if (hasLoadedRef.current && fetchedOptions) {\n            return;\n        }\n\n        let isMounted = true;\n\n        const loadOptions = async() => {\n            setLoading(true);\n\n            try {\n                const fetchedOptions = await fetchOptions();\n\n                if (isMounted) {\n                    setFetchedOptions(fetchedOptions);\n                    persistCachedOptions(fetchedOptions);\n                    hasLoadedRef.current = true;\n                }\n            } catch (error) {\n                console.error('Failed to load combobox options:', error);\n            } finally {\n                if (isMounted) {\n                    setLoading(false);\n                }\n            }\n        };\n\n        loadOptions();\n\n        return () => {\n            isMounted = false;\n        };\n    }, [fetchOptions, fetchedOptions, isOpen, persistCachedOptions, resolveCachedOptions]);\n\n    const selectedValue = useMemo(() => {\n        if (isMultiple) {\n            const selectedValues = Array.isArray(value) ? new Set(value.map((item) => { return toStringValue(item); })) : new Set<string>();\n            return resolvedOptions.filter((option) => { return selectedValues.has(toStringValue(option.value)); });\n        }\n\n        return resolvedOptions.find((option) => { return toStringValue(option.value) === toStringValue(value); }) ?? null;\n    }, [isMultiple, resolvedOptions, value]);\n\n    const handleChange = (nextValue: unknown) => {\n        if (!onValueChange) {\n            return;\n        }\n\n        if (isMultiple) {\n            const nextItems = Array.isArray(nextValue) ? nextValue : [];\n            onValueChange(nextItems.map((item) => { return item.value; }));\n            return;\n        }\n\n        onValueChange(nextValue?.value ?? null);\n    };\n\n    return (\n        <div className=\"flex items-center gap-2\">\n            <Combobox\n                multiple={isMultiple}\n                items={resolvedOptions}\n                value={selectedValue as ComponentProps<typeof Combobox>['value']}\n                onValueChange={handleChange}\n                open={open}\n                defaultOpen={defaultOpen}\n                onOpenChange={(nextOpen) => {\n                    setInternalOpen(nextOpen);\n                    onOpenChange?.(nextOpen);\n\n                    if (!nextOpen) {\n                        setSearchValue('');\n                    }\n                }}\n                onInputValueChange={(nextValue) => {\n                    const nextSearchValue = String(nextValue ?? '');\n                    setSearchValue(nextSearchValue);\n                    onInputValueChange?.(nextSearchValue);\n                }}\n                itemToStringLabel={(item) => { return (item as ComboboxInputOption | null)?.label ?? ''; }}\n                itemToStringValue={(item) => { return toStringValue((item as ComboboxInputOption | null)?.value); }}\n                disabled={disabled}\n            >\n                {isMultiple ? (\n                    <ComboboxChips ref={anchor} className={className}>\n                        <ComboboxValue>\n                            {(items) => {\n                                return (\n                                    <Fragment>\n                                        {items.map((item) => {\n                                            return (\n                                                <ComboboxChip key={toStringValue(item.value)}>\n                                                    {item.label}\n                                                </ComboboxChip>\n                                            );\n                                        })}\n                                        <ComboboxChipsInput placeholder={placeholder} />\n                                    </Fragment>\n                                );\n                            }}\n                        </ComboboxValue>\n                    </ComboboxChips>\n                ) : (\n                    <ComboboxPrimitiveInput\n                        className={className}\n                        placeholder={placeholder}\n                        showClear={showClear}\n                        disabled={disabled}\n                    />\n                )}\n\n                <ComboboxContent\n                    anchor={isMultiple ? anchor : undefined}\n                    className={contentClassName}\n                >\n                    <ComboboxEmpty>{emptyMessage}</ComboboxEmpty>\n                    <ComboboxList>\n                        {(item) => {\n                            return (\n                                <ComboboxItem key={toStringValue(item.value)} value={item}>\n                                    <ComboboxHighlightedText text={item.label} search={searchValue} />\n                                </ComboboxItem>\n                            );\n                        }}\n                    </ComboboxList>\n                </ComboboxContent>\n            </Combobox>\n\n            {withLoadingIndicator && loading && <Spinner size=\"xs\" />}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/components/Command.d.ts

@@ -0,0 +1,26 @@
+import { default as React, ComponentProps } from 'react';
+import { Command as CommandPrimitive, useCommandState } from 'cmdk';
+import { Dialog } from '.';
+declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, showCloseButton, ...props }: ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+}): 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>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & 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;
+declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, useCommandState, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+//# sourceMappingURL=Command.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Command.js

@@ -0,0 +1,94 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./Dialog.js";
+import "./index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/pro-solid-svg-icons";
+import { Command as Command$1, useCommandState } from "cmdk";
+//#region src/components/Command.tsx
+function Command({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1, {
+		"data-slot": "command",
+		className: cn("flex h-full w-full flex-col", "text-xs", "rounded shadow-md focus:shadow-md", className),
+		...props
+	});
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...props,
+		children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ jsx(DialogContent, {
+			className: "p-0 shadow-lg",
+			showCloseButton,
+			children: /* @__PURE__ */ jsx(Command, {
+				className: cn("[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5", "[&_[cmdk-group-heading]]:font-medium", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"),
+				children
+			})
+		})]
+	});
+}
+function CommandInput({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "command-input-wrapper",
+		className: "flex items-center border-b border-slate-150 px-2",
+		children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+			icon: faSearch,
+			className: "mr-2 size-3 shrink-0 opacity-50"
+		}), /* @__PURE__ */ jsx(Command$1.Input, {
+			"data-slot": "command-input",
+			className: cn("flex w-full py-2.5", "rounded-md text-xs", "shadow-none outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+			...props
+		})]
+	});
+}
+var CommandList = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Command$1.List, {
+		ref,
+		"data-slot": "command-list",
+		className: cn("max-h-[300px] overflow-y-auto", className),
+		...props
+	});
+});
+function CommandEmpty({ ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		"data-slot": "command-empty",
+		className: cn("pt-4 pb-3 text-center", "text-xs"),
+		...props
+	});
+}
+function CommandGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		"data-slot": "command-group",
+		className: cn("text-xs", "text-gray-600", "**:[[cmdk-group-heading]]:text-gray-500", "overflow-hidden", "py-1", "**:[[cmdk-group-heading]]:px-2", "**:[[cmdk-group-heading]]:py-1", "**:[[cmdk-group-heading]]:text-[11px]", "**:[[cmdk-group-heading]]:font-medium", className),
+		...props
+	});
+}
+function CommandSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"data-slot": "command-separator",
+		className: cn("pointer-events-none", "h-px", "bg-slate-200", className),
+		...props
+	});
+}
+function CommandItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		"data-slot": "command-item",
+		className: cn("relative flex gap-2 items-center px-2 py-1.5", "text-xs data-[selected=true]:bg-slate-100", "cursor-default select-none outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", "[&_svg]:pointer-events-none [&_svg]:not([class*=\"size-\"]):size-3 [&_svg]:shrink-0", className),
+		...props
+	});
+}
+function CommandShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-shortcut",
+		className: cn("ml-auto", "text-xs tracking-widest", className),
+		...props
+	});
+}
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, useCommandState };
+
+//# sourceMappingURL=Command.js.map

package/dist/components/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","names":[],"sources":["../../src/components/Command.tsx"],"sourcesContent":["import React, { ComponentProps, type ReactNode } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faSearch } from '@fortawesome/pro-solid-svg-icons';\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk';\n\nimport {\n    Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,\n} from '@verbb/plugin-kit-react/components';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nfunction Command({\n    className,\n    ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n    return (\n        <CommandPrimitive\n            data-slot=\"command\"\n            className={cn(\n                // Layout\n                'flex h-full w-full flex-col',\n\n                'text-xs',\n\n                // Appearance\n                'rounded shadow-md focus:shadow-md',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction CommandDialog({\n    title = 'Command Palette',\n    description = 'Search for a command to run...',\n    children,\n    showCloseButton = true,\n    ...props\n}: ComponentProps<typeof Dialog> & {\n    title?: string\n    description?: string\n    showCloseButton?: boolean\n}) {\n    return (\n        <Dialog {...props}>\n            <DialogHeader className=\"sr-only\">\n                <DialogTitle>{title}</DialogTitle>\n                <DialogDescription>{description}</DialogDescription>\n            </DialogHeader>\n\n            <DialogContent\n                className=\"p-0 shadow-lg\"\n                showCloseButton={showCloseButton}\n            >\n                <Command className={cn(\n                    // Layout\n                    '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5',\n\n                    // Appearance\n                    '[&_[cmdk-group-heading]]:font-medium',\n                    '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5',\n                )}>\n                    {children as ReactNode}\n                </Command>\n            </DialogContent>\n        </Dialog>\n    );\n};\n\nfunction CommandInput({\n    className,\n    ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n    return (\n        <div\n            data-slot=\"command-input-wrapper\"\n            className=\"flex items-center border-b border-slate-150 px-2\"\n        >\n            <FontAwesomeIcon icon={faSearch} className=\"mr-2 size-3 shrink-0 opacity-50\" />\n\n            <CommandPrimitive.Input\n                data-slot=\"command-input\"\n                className={cn(\n                    // Layout\n                    'flex w-full py-2.5',\n\n                    // Appearance\n                    'rounded-md text-xs',\n\n                    // State\n                    'shadow-none outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                    className,\n                )}\n                {...props}\n            />\n        </div>\n    );\n};\n\nconst CommandList = React.forwardRef<\n    HTMLDivElement,\n    ComponentProps<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => {\n    return (\n        <CommandPrimitive.List\n            ref={ref}\n            data-slot=\"command-list\"\n            className={cn(\n                // Layout\n                'max-h-[300px] overflow-y-auto',\n\n                // Appearance\n                // 'text-xs',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n});\n\nfunction CommandEmpty({\n    ...props\n}: ComponentProps<typeof CommandPrimitive.Empty>) {\n    return (\n        <CommandPrimitive.Empty\n            data-slot=\"command-empty\"\n            className={cn(\n                // Layout\n                'pt-4 pb-3 text-center',\n\n                // Appearance\n                'text-xs',\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction CommandGroup({\n    className,\n    ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n    return (\n        <CommandPrimitive.Group\n            data-slot=\"command-group\"\n            className={cn(\n                // Layout\n                // 'my-1',\n\n                'text-xs',\n                \"text-gray-600\",\n                \"**:[[cmdk-group-heading]]:text-gray-500\",\n                \"overflow-hidden\",\n                'py-1',\n                '**:[[cmdk-group-heading]]:px-2',\n                '**:[[cmdk-group-heading]]:py-1',\n                '**:[[cmdk-group-heading]]:text-[11px]',\n                '**:[[cmdk-group-heading]]:font-medium',\n\n\n                // Appearance\n                // '[&_[cmdk-group-heading]]:px-2',\n                // '[&_[cmdk-group-heading]]:text-[11px]',\n                // '[&_[cmdk-group-heading]]:text-slate-700',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction CommandSeparator({\n    className,\n    ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n    return (\n        <CommandPrimitive.Separator\n            data-slot=\"command-separator\"\n            className={cn(\n                // Reset\n                'pointer-events-none',\n\n                // Layout\n                'h-px',\n\n                // Theme\n                'bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction CommandItem({\n    className,\n    ...props\n}: ComponentProps<typeof CommandPrimitive.Item>) {\n    return (\n        <CommandPrimitive.Item\n            data-slot=\"command-item\"\n            className={cn(\n                // Layout\n                'relative flex gap-2 items-center px-2 py-1.5',\n\n                // Appearance\n                'text-xs data-[selected=true]:bg-slate-100',\n\n                // State\n                'cursor-default select-none outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                '[&_svg]:pointer-events-none [&_svg]:not([class*=\"size-\"]):size-3 [&_svg]:shrink-0',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction CommandShortcut({\n    className,\n    ...props\n}: ComponentProps<'span'>) {\n    return (\n        <span\n            data-slot=\"command-shortcut\"\n            className={cn(\n                // Layout\n                'ml-auto',\n\n                // Appearance\n                'text-xs tracking-widest',\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    Command,\n    CommandDialog,\n    useCommandState,\n    CommandInput,\n    CommandList,\n    CommandEmpty,\n    CommandGroup,\n    CommandItem,\n    CommandShortcut,\n    CommandSeparator,\n};\n"],"mappings":";;;;;;;;;;AAWA,SAAS,QAAQ,EACb,WACA,GAAG,SACqC;AACxC,QACI,oBAAC,WAAD;EACI,aAAU;EACV,WAAW,GAEP,+BAEA,WAGA,qCAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,cAAc,EACnB,QAAQ,mBACR,cAAc,kCACd,UACA,kBAAkB,MAClB,GAAG,SAKJ;AACC,QACI,qBAAC,QAAD;EAAQ,GAAI;YAAZ,CACI,qBAAC,cAAD;GAAc,WAAU;aAAxB,CACI,oBAAC,aAAD,EAAA,UAAc,OAAoB,CAAA,EAClC,oBAAC,mBAAD,EAAA,UAAoB,aAAgC,CAAA,CACzC;MAEf,oBAAC,eAAD;GACI,WAAU;GACO;aAEjB,oBAAC,SAAD;IAAS,WAAW,GAEhB,yHAGA,wCACA,oKACH;IACI;IACK,CAAA;GACE,CAAA,CACX;;;AAIjB,SAAS,aAAa,EAClB,WACA,GAAG,SAC2C;AAC9C,QACI,qBAAC,OAAD;EACI,aAAU;EACV,WAAU;YAFd,CAII,oBAAC,iBAAD;GAAiB,MAAM;GAAU,WAAU;GAAoC,CAAA,EAE/E,oBAAC,UAAiB,OAAlB;GACI,aAAU;GACV,WAAW,GAEP,sBAGA,sBAGA,8EACA,UACH;GACD,GAAI;GACN,CAAA,CACA;;;AAId,IAAM,cAAc,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAAQ;AAChC,QACI,oBAAC,UAAiB,MAAlB;EACS;EACL,aAAU;EACV,WAAW,GAEP,iCAKA,UACH;EACD,GAAI;EACN,CAAA;EAER;AAEF,SAAS,aAAa,EAClB,GAAG,SAC2C;AAC9C,QACI,oBAAC,UAAiB,OAAlB;EACI,aAAU;EACV,WAAW,GAEP,yBAGA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,aAAa,EAClB,WACA,GAAG,SAC2C;AAC9C,QACI,oBAAC,UAAiB,OAAlB;EACI,aAAU;EACV,WAAW,GAIP,WACA,iBACA,2CACA,mBACA,QACA,kCACA,kCACA,yCACA,yCAOA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,iBAAiB,EACtB,WACA,GAAG,SAC+C;AAClD,QACI,oBAAC,UAAiB,WAAlB;EACI,aAAU;EACV,WAAW,GAEP,uBAGA,QAGA,gBAEA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,YAAY,EACjB,WACA,GAAG,SAC0C;AAC7C,QACI,oBAAC,UAAiB,MAAlB;EACI,aAAU;EACV,WAAW,GAEP,gDAGA,6CAGA,sHACA,uFACA,UACH;EACD,GAAI;EACN,CAAA;;AAIV,SAAS,gBAAgB,EACrB,WACA,GAAG,SACoB;AACvB,QACI,oBAAC,QAAD;EACI,aAAU;EACV,WAAW,GAEP,WAGA,2BACA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,9 @@
+export declare function copyToClipboardWithMeta(value: any): Promise<void>;
+export declare function CopyButton({ value, className, variant, ...props }: {
+    value: string;
+    className?: string;
+    src?: string;
+    variant?: 'link' | 'none' | 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'ghost';
+    event?: Event;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/components/CopyButton.tsx"],"names":[],"mappings":"AAOA,wBAAsB,uBAAuB,CAAC,KAAK,KAAA,iBAElD;AAED,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAuB,EACvB,GAAG,KAAK,EACX,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,OAAO,CAAC;IACjH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,2CA+BA"}

package/dist/components/CopyButton.js

@@ -0,0 +1,40 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { Button } from "./Button.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faClipboard } from "@fortawesome/pro-solid-svg-icons";
+//#region src/components/CopyButton.tsx
+async function copyToClipboardWithMeta(value) {
+	await navigator.clipboard.writeText(value);
+}
+function CopyButton({ value, className, variant = "transparent", ...props }) {
+	const [hasCopied, setHasCopied] = useState(false);
+	useEffect(() => {
+		const timeoutId = window.setTimeout(() => {
+			setHasCopied(false);
+		}, 2e3);
+		return () => {
+			window.clearTimeout(timeoutId);
+		};
+	}, [hasCopied]);
+	return /* @__PURE__ */ jsxs(Button, {
+		size: "icon",
+		variant,
+		className: cn(className),
+		onClick: () => {
+			copyToClipboardWithMeta(value);
+			setHasCopied(true);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Copy"
+		}), hasCopied ? /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faCheck }) : /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faClipboard })]
+	});
+}
+//#endregion
+export { CopyButton, copyToClipboardWithMeta };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../src/components/CopyButton.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faClipboard } from '@fortawesome/pro-solid-svg-icons';\n\nimport { Button } from './Button';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nexport async function copyToClipboardWithMeta(value) {\n    await navigator.clipboard.writeText(value);\n}\n\nexport function CopyButton({\n    value,\n    className,\n    variant = 'transparent',\n    ...props\n}: {\n    value: string;\n    className?: string;\n    src?: string;\n    variant?: 'link' | 'none' | 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'ghost';\n    event?: Event;\n}) {\n    const [hasCopied, setHasCopied] = useState(false);\n\n    useEffect(() => {\n        const timeoutId = window.setTimeout(() => {\n            setHasCopied(false);\n        }, 2000);\n\n        return () => {\n            window.clearTimeout(timeoutId);\n        };\n    }, [hasCopied]);\n\n    return (\n        <Button\n            size=\"icon\"\n            variant={variant}\n            className={cn(\n                className,\n            )}\n            onClick={() => {\n                copyToClipboardWithMeta(value);\n\n                setHasCopied(true);\n            }}\n            {...props}\n        >\n            <span className=\"sr-only\">Copy</span>\n            {hasCopied ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faClipboard} />}\n        </Button>\n    );\n}\n"],"mappings":";;;;;;;;AAOA,eAAsB,wBAAwB,OAAO;AACjD,OAAM,UAAU,UAAU,UAAU,MAAM;;AAG9C,SAAgB,WAAW,EACvB,OACA,WACA,UAAU,eACV,GAAG,SAOJ;CACC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,iBAAgB;EACZ,MAAM,YAAY,OAAO,iBAAiB;AACtC,gBAAa,MAAM;KACpB,IAAK;AAER,eAAa;AACT,UAAO,aAAa,UAAU;;IAEnC,CAAC,UAAU,CAAC;AAEf,QACI,qBAAC,QAAD;EACI,MAAK;EACI;EACT,WAAW,GACP,UACH;EACD,eAAe;AACX,2BAAwB,MAAM;AAE9B,gBAAa,KAAK;;EAEtB,GAAI;YAXR,CAaI,oBAAC,QAAD;GAAM,WAAU;aAAU;GAAW,CAAA,EACpC,YAAY,oBAAC,iBAAD,EAAiB,MAAM,SAAW,CAAA,GAAG,oBAAC,iBAAD,EAAiB,MAAM,aAAe,CAAA,CACnF"}

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,9 @@
+export declare function DatePicker({ value, onValueChange, placeholder, className, disabled, isInvalid, ...props }: {
+    value: Date | string | null;
+    onValueChange?: (value: Date | undefined) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    isInvalid?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/DatePicker.js

@@ -0,0 +1,46 @@
+import { cn } from "../utils/classes.js";
+import { hostFormatDate } from "../utils/hostBridge.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 { 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
+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 handleSelect = (selectedDate) => {
+		onValueChange?.(selectedDate);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		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),
+			disabled,
+			...props,
+			children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faCalendar,
+				className: cn("mr-1 text-gray-400")
+			}), date ? hostFormatDate(date) : placeholder]
+		}) }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: cn("w-auto p-0!"),
+			children: /* @__PURE__ */ jsx(Calendar, {
+				mode: "single",
+				selected: date,
+				captionLayout: "dropdown",
+				onSelect: handleSelect
+			})
+		})]
+	});
+}
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker.js.map

@@ -0,0 +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"}

package/dist/components/Dialog.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, autoFocusFirstInput, portalClassName, portalContainer, ...props }: ComponentProps<typeof DialogPrimitive.Popup> & {
+    showCloseButton?: boolean;
+    autoFocusFirstInput?: boolean;
+    portalClassName?: string;
+    portalContainer?: HTMLElement | ShadowRoot | null;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, showCloseButton, children, ...props }: ComponentProps<'div'> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+//# sourceMappingURL=Dialog.d.ts.map

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

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

package/dist/components/Dialog.js

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

package/dist/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import { ComponentProps, useCallback, useEffect, useRef } from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nfunction Dialog({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Root>) {\n    return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\nfunction DialogTrigger({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Trigger>) {\n    return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\nfunction DialogPortal({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Portal>) {\n    return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\nfunction DialogClose({\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Close>) {\n    return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n    className,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Backdrop>) {\n    return (\n        <DialogPrimitive.Backdrop\n            data-slot=\"dialog-overlay\"\n            forceRender\n            className={cn(\n                // Reset\n                'fixed isolate z-50 inset-0',\n\n                // Ensure we play well with Craft's modals\n                // 'z-[99]',\n\n                // Theme\n                'bg-gray-900/20',\n\n                // State\n                'data-[open]:animate-in data-[closed]:animate-out',\n                'data-[closed]:fade-out-0 data-[open]:fade-in-0',\n\n                // \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n\n                className,\n            )}\n            onPointerDown={(event) => {\n                const { target } = event;\n\n                // If we've got a Garnish modal open, allow that to take focus. Includes the shade and the modal content.\n                if (target instanceof HTMLElement && target.classList.contains('modal-shade')) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                // If we've got a Garnish modal open, allow that to take focus. Includes the shade and the modal content.\n                if (target instanceof HTMLElement && target.closest('.modal')) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            }}\n            {...props}\n        />\n    );\n};\n\nfunction DialogContent({\n    className,\n    children,\n    showCloseButton = false,\n    autoFocusFirstInput = true,\n    portalClassName,\n    portalContainer,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Popup> & {\n    showCloseButton?: boolean\n    autoFocusFirstInput?: boolean\n    portalClassName?: string\n    portalContainer?: HTMLElement | ShadowRoot | null\n}) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n    const t = useTranslation();\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const findFirstInput = useCallback((root: HTMLElement): HTMLElement | null => {\n        const focusSelector = [\n            'input:not([type=\"hidden\"]):not([disabled])',\n            'textarea:not([disabled])',\n            'select:not([disabled])',\n        ].join(', ');\n\n        return root.querySelector<HTMLElement>(focusSelector);\n    }, []);\n\n    const focusFirstInput = useCallback((root: HTMLElement): boolean => {\n        const candidate = findFirstInput(root);\n\n        if (!candidate) {\n            return false;\n        }\n\n        // Do not autofocus a pre-populated input/textarea, and do not\n        // fall through to later fields.\n        if (candidate instanceof HTMLInputElement || candidate instanceof HTMLTextAreaElement) {\n            if (candidate.value.length > 0) {\n                return true;\n            }\n        }\n\n        candidate.focus?.();\n\n        // Place a caret for text-like inputs so users can type immediately.\n        if (candidate instanceof HTMLInputElement || candidate instanceof HTMLTextAreaElement) {\n            const cursorPosition = candidate.value.length;\n\n            window.setTimeout(() => {\n                candidate.setSelectionRange?.(cursorPosition, cursorPosition);\n            }, 0);\n        }\n\n        return true;\n    }, [findFirstInput]);\n\n    useEffect(() => {\n        if (!autoFocusFirstInput) {\n            return;\n        }\n\n        const root = contentRef.current;\n\n        if (!root) {\n            return;\n        }\n\n        let attemptCount = 0;\n        const maxAttempts = 10;\n\n        const attemptFocus = () => {\n            const activeElement = document.activeElement as HTMLElement | null;\n\n            // Stop once an input inside this dialog is already focused.\n            if (activeElement && root.contains(activeElement)) {\n                if (activeElement.matches('input, textarea, select')) {\n                    return;\n                }\n            }\n\n            if (focusFirstInput(root)) {\n                return;\n            }\n\n            attemptCount += 1;\n\n            if (attemptCount < maxAttempts) {\n                window.setTimeout(attemptFocus, 50);\n            }\n        };\n\n        // Defer one frame to allow lazy schema hydration to mount fields.\n        const frame = window.requestAnimationFrame(attemptFocus);\n\n        return () => {\n            window.cancelAnimationFrame(frame);\n        };\n    }, [autoFocusFirstInput, children, focusFirstInput]);\n\n    return (\n        <DialogPortal\n            data-slot=\"dialog-portal\"\n            className={resolvedPortalClassName}\n            container={resolvedPortalContainer}\n        >\n            <DialogOverlay data-slot=\"dialog-overlay\" />\n\n            <DialogPrimitive.Popup\n                data-slot=\"dialog-content\"\n                ref={contentRef}\n                initialFocus={() => {\n                    if (!autoFocusFirstInput) {\n                        return false;\n                    }\n\n                    const root = contentRef.current;\n\n                    if (!root) {\n                        return true;\n                    }\n\n                    return !focusFirstInput(root);\n                }}\n                className={cn(\n                    // Reset\n                    'fixed z-50 left-[50%] top-[50%] w-full max-w-5xl',\n                    'flex flex-col',\n\n                    // Ensure we play well with Craft's modals; nested dialogs stack above parent\n                    // 'z-[99] data-[nested]:z-[100]',\n\n                    // Theme\n                    'bg-white',\n                    'rounded-lg',\n                    'shadow-modal',\n\n                    // Transform\n                    'translate-x-[-50%] translate-y-[-50%]',\n\n                    // State Animations\n                    'data-[open]:animate-in data-[closed]:animate-out',\n                    'data-[closed]:fade-out-0 data-[open]:fade-in-0',\n                    'data-[closed]:zoom-out-95 data-[open]:zoom-in-95',\n\n                    className,\n                )}\n                {...props}\n            >\n                {showCloseButton && (\n                    <DialogPrimitive.Close\n                        data-slot=\"dialog-close\"\n                        className={cn(\n                            // Reset\n                            'absolute right-4 top-4 rounded-sm cursor-pointer',\n\n                            // Theme\n                            'opacity-70 ring-offset-background transition-opacity',\n\n                            // State\n                            'hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',\n                            'data-[open]:bg-blue-500 data-[open]:text-white',\n                        )}\n                    >\n                        <FontAwesomeIcon icon={faXmark} className=\"size-4.5\" />\n                        <span className=\"sr-only\">{t('Close')}</span>\n                    </DialogPrimitive.Close>\n                )}\n                {children}\n            </DialogPrimitive.Popup>\n        </DialogPortal>\n    );\n};\n\nfunction DialogHeader({\n    className,\n    showCloseButton = true,\n    children,\n    ...props\n}: ComponentProps<'div'> & {\n    showCloseButton?: boolean\n}) {\n    const t = useTranslation();\n\n    return (\n        <div\n            data-slot=\"dialog-header\"\n            className={cn(\n                // Reset\n                'relative flex flex-col space-y-1.5',\n                'text-left',\n                'rounded-t-lg',\n                'gap-1',\n\n                // Theme\n                'bg-[#f3f7fb] py-4 px-4',\n                'border-b border-b-gray-150',\n\n                className,\n            )}\n            {...props}\n        >\n            {showCloseButton && (\n                <DialogPrimitive.Close\n                    data-slot=\"dialog-close\"\n                    className={cn(\n                        // Reset\n                        'absolute right-4 top-[50%] translate-y-[-50%] rounded-sm cursor-pointer',\n\n                        // Theme\n                        'opacity-70 ring-offset-background transition-opacity',\n\n                        // State\n                        'hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none',\n                        'data-[open]:bg-blue-500 data-[open]:text-white',\n                    )}\n                >\n                    <FontAwesomeIcon icon={faXmark} className=\"size-4.5\" />\n                    <span className=\"sr-only\">{t('Close')}</span>\n                </DialogPrimitive.Close>\n            )}\n            {children}\n        </div>\n    );\n};\n\nfunction DialogFooter({ className, ...props }: ComponentProps<'div'>) {\n    return (\n        <div\n            data-slot=\"dialog-footer\"\n            className={cn(\n                // Reset\n                'flex flex-row justify-end',\n                'rounded-b-lg',\n\n                // Theme\n                'bg-[#e4edf6] py-[10px] px-4',\n                'border-t border-t-gray-150',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DialogTitle({\n    className,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Title>) {\n    return (\n        <DialogPrimitive.Title\n            data-slot=\"dialog-title\"\n            className={cn(\n                // Reset\n                'text-[15px] font-semibold leading-none m-0',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DialogDescription({\n    className,\n    ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\n    return (\n        <DialogPrimitive.Description\n            data-slot=\"dialog-description\"\n            className={cn(\n                // Reset\n                'text-xs text-gray-500',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    Dialog,\n    DialogPortal,\n    DialogOverlay,\n    DialogClose,\n    DialogTrigger,\n    DialogContent,\n    DialogHeader,\n    DialogFooter,\n    DialogTitle,\n    DialogDescription,\n};\n"],"mappings":"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"}

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { VariantProps } from 'class-variance-authority';
+declare const dropdownMenuItemVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    variant?: "default" | "destructive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const dropdownMenuLabelVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];
+declare function DropdownMenu({ size, children, ...props }: ComponentProps<typeof MenuPrimitive.Root> & {
+    size?: DropdownMenuSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ container, ...props }: ComponentProps<typeof MenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ size, ...props }: ComponentProps<typeof MenuPrimitive.Trigger> & {
+    size?: DropdownMenuSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, portalClassName, portalContainer, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {
+    portalClassName?: string;
+    portalContainer?: HTMLElement | ShadowRoot | null;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, size, ...props }: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, size, variant, ...props }: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: ComponentProps<typeof MenuPrimitive.SubmenuRoot>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, size, ...props }: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
+    inset?: boolean;
+    size?: DropdownMenuSize;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof MenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+//# sourceMappingURL=DropdownMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"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"}