@verbb/plugin-kit-react 1.0.0

package/dist/components/DropdownMenu.js

@@ -0,0 +1,240 @@
+import { cn } from "../utils/classes.js";
+import { getPortalClassName, getPortalContainer } from "../utils/portal.js";
+import "../utils/index.js";
+import { createContext, useContext } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/DropdownMenu.tsx
+var dropdownMenuItemVariants = cva([
+	"relative flex w-full cursor-default items-center outline-hidden select-none",
+	"focus:bg-slate-100 data-[highlighted]:bg-slate-100",
+	"data-disabled:pointer-events-none data-disabled:opacity-50",
+	"[&_svg:not([class*=\"size-\"])]:[width:var(--icon-size)]",
+	"[&_svg:not([class*=\"size-\"])]:[height:var(--icon-size)]",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+], {
+	variants: {
+		size: {
+			xs: "py-[3px] px-[8px] gap-1.5 text-[12px] [--icon-size:10px]",
+			sm: "py-[4px] px-[10px] gap-1.75 text-[13px] [--icon-size:11px]",
+			default: "py-[8px] px-[12px] gap-2.5 text-sm [--icon-size:12px]",
+			lg: "py-[10px] px-[14px] gap-3 text-base [--icon-size:12px]",
+			xl: "py-[12px] px-[16px] gap-3 text-lg [--icon-size:12px]"
+		},
+		variant: {
+			default: "",
+			destructive: "text-error"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	}
+});
+var dropdownMenuLabelVariants = cva(["text-slate-700"], {
+	variants: { size: {
+		xs: "py-[0px] px-[8px] text-[11px]",
+		sm: "py-[0px] px-[10px] text-[11px]",
+		default: "py-[0px] px-[12px] text-[13px]",
+		lg: "py-[0px] px-[14px] text-[14px]",
+		xl: "py-[0px] px-[16px] text-[15px]"
+	} },
+	defaultVariants: { size: "default" }
+});
+var dropdownMenuShortcutVariants = cva("", {
+	variants: { size: {
+		xs: "text-[11px]",
+		sm: "text-xs",
+		default: "text-sm",
+		lg: "text-sm",
+		xl: "text-base"
+	} },
+	defaultVariants: { size: "default" }
+});
+var DropdownMenuContext = createContext({});
+function DropdownMenu({ size, children, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(Menu.Root, {
+			"data-slot": "dropdown-menu",
+			...props,
+			children
+		})
+	});
+}
+function DropdownMenuPortal({ container, ...props }) {
+	const resolvedPortalContainer = getPortalContainer(container);
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		container: resolvedPortalContainer,
+		...props
+	});
+}
+function DropdownMenuTrigger({ size, ...props }) {
+	const context = useContext(DropdownMenuContext);
+	const finalSize = size || context.size || "default";
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		"data-size": finalSize,
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, portalClassName, portalContainer, ...props }) {
+	const resolvedPortalClassName = getPortalClassName(portalClassName);
+	const resolvedPortalContainer = getPortalContainer(portalContainer);
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		className: resolvedPortalClassName,
+		container: resolvedPortalContainer,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: "z-[250]",
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-content",
+				className: cn("relative isolate z-[250] overflow-x-hidden overflow-y-auto", "min-w-(--anchor-width)", "py-1", "rounded-md bg-white", "shadow-[0_0_0_1px_rgba(31,41,51,0.1),0_5px_20px_rgba(31,41,51,0.25)]", "duration-100", "data-open:animate-in data-closed:animate-out", "data-open:fade-in-0 data-closed:fade-out-0", "data-open:zoom-in-95 data-closed:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=top]:slide-in-from-bottom-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=inline-start]:slide-in-from-right-2", "data-[side=inline-end]:slide-in-from-left-2", "data-[align-trigger=true]:animate-none", "origin-(--transform-origin)", className),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuLabel({ className, inset, size, ...props }) {
+	const context = useContext(DropdownMenuContext);
+	const finalSize = size || context.size || "default";
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		"data-size": finalSize,
+		className: cn(dropdownMenuLabelVariants({
+			size: finalSize,
+			className
+		})),
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, size, variant = "default", ...props }) {
+	const context = useContext(DropdownMenuContext);
+	const finalSize = size || context.size || "default";
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		"data-size": finalSize,
+		className: cn(dropdownMenuItemVariants({
+			size: finalSize,
+			variant,
+			className
+		}), inset && "pl-8"),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, size, ...props }) {
+	const context = useContext(DropdownMenuContext);
+	const finalSize = size || context.size || "default";
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		"data-size": finalSize,
+		className: cn(dropdownMenuItemVariants({ size: finalSize }), "data-[popup-open]:bg-slate-100", "[&_svg]:pointer-events-none [&_svg]:shrink-0", inset && "pl-8", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(FontAwesomeIcon, {
+			icon: faChevronRight,
+			className: "ml-auto size-3 text-slate-700"
+		})]
+	});
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("min-w-32 w-auto", className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	const finalSize = useContext(DropdownMenuContext)?.size || "default";
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuItemVariants({
+			size: finalSize,
+			className
+		})),
+		checked,
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			className: cn("ml-auto pl-4"),
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faCheck,
+				className: cn("size-3")
+			}) })
+		})]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	const finalSize = useContext(DropdownMenuContext)?.size || "default";
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuItemVariants({
+			size: finalSize,
+			className
+		})),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			className: cn("ml-auto pl-4"),
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+				icon: faCheck,
+				className: cn("size-3")
+			}) })
+		})]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("my-1 h-px bg-slate-200", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("text-slate-700 group-focus/dropdown-menu-item:text-slate-700 ml-auto tracking-widest", dropdownMenuShortcutVariants({
+			size: useContext(DropdownMenuContext)?.size || "default",
+			className
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["import { ComponentProps, createContext, useContext } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faCheck, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\n\nimport { cn, getPortalClassName, getPortalContainer } from '@verbb/plugin-kit-react/utils';\n\nconst dropdownMenuItemVariants = cva([\n    // Reset\n    'relative flex w-full cursor-default items-center outline-hidden select-none',\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    // SVG\n    '[&_svg:not([class*=\"size-\"])]:[width:var(--icon-size)]',\n    '[&_svg:not([class*=\"size-\"])]:[height:var(--icon-size)]',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n], {\n    variants: {\n        size: {\n            xs: 'py-[3px] px-[8px] gap-1.5 text-[12px] [--icon-size:10px]',\n            sm: 'py-[4px] px-[10px] gap-1.75 text-[13px] [--icon-size:11px]',\n            default: 'py-[8px] px-[12px] gap-2.5 text-sm [--icon-size:12px]',\n            lg: 'py-[10px] px-[14px] gap-3 text-base [--icon-size:12px]',\n            xl: 'py-[12px] px-[16px] gap-3 text-lg [--icon-size:12px]',\n        },\n        variant: {\n            default: '',\n            destructive: 'text-error',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        variant: 'default',\n    },\n});\n\nconst dropdownMenuLabelVariants = cva([\n    // Theme\n    'text-slate-700',\n], {\n    variants: {\n        size: {\n            xs: 'py-[0px] px-[8px] text-[11px]',\n            sm: 'py-[0px] px-[10px] text-[11px]',\n            default: 'py-[0px] px-[12px] text-[13px]',\n            lg: 'py-[0px] px-[14px] text-[14px]',\n            xl: 'py-[0px] px-[16px] text-[15px]',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst dropdownMenuShortcutVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'text-[11px]',\n            sm: 'text-xs',\n            default: 'text-sm',\n            lg: 'text-sm',\n            xl: 'text-base',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\ntype DropdownMenuSize = VariantProps<typeof dropdownMenuItemVariants>['size'];\n\nconst DropdownMenuContext = createContext<{ size?: DropdownMenuSize }>({});\n\nfunction DropdownMenu({\n    size,\n    children,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Root> & { size?: DropdownMenuSize }) {\n    return (\n        <DropdownMenuContext.Provider value={{ size }}>\n            <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props}>\n                {children}\n            </MenuPrimitive.Root>\n        </DropdownMenuContext.Provider>\n    );\n}\nfunction DropdownMenuPortal({\n    container,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Portal>) {\n    const resolvedPortalContainer = getPortalContainer(container);\n\n    return (\n        <MenuPrimitive.Portal\n            data-slot=\"dropdown-menu-portal\"\n            container={resolvedPortalContainer}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuTrigger({\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Trigger> & { size?: DropdownMenuSize }) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Trigger\n            data-slot=\"dropdown-menu-trigger\"\n            data-size={finalSize}\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuContent({\n    align = 'start',\n    alignOffset = 0,\n    side = 'bottom',\n    sideOffset = 4,\n    className,\n    portalClassName,\n    portalContainer,\n    ...props\n}: MenuPrimitive.Popup.Props &\n    Pick<\n        MenuPrimitive.Positioner.Props,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n    > & {\n        portalClassName?: string\n        portalContainer?: HTMLElement | ShadowRoot | null\n    }) {\n    const resolvedPortalClassName = getPortalClassName(portalClassName);\n    const resolvedPortalContainer = getPortalContainer(portalContainer);\n\n    return (\n        <MenuPrimitive.Portal className={resolvedPortalClassName} container={resolvedPortalContainer}>\n            <MenuPrimitive.Positioner\n                align={align}\n                alignOffset={alignOffset}\n                side={side}\n                sideOffset={sideOffset}\n                className=\"z-[250]\"\n            >\n                <MenuPrimitive.Popup\n                    data-slot=\"dropdown-menu-content\"\n                    className={cn(\n                        // Reset\n                        'relative isolate z-[250] overflow-x-hidden overflow-y-auto',\n\n                        // Layout\n                        'min-w-(--anchor-width)',\n                        // \"min-w-36 max-h-(--available-height) w-(--anchor-width)\",\n\n                        // Theme\n                        'py-1',\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            </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n    );\n};\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n    return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuLabel({\n    className,\n    inset,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & VariantProps<typeof dropdownMenuLabelVariants> & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.GroupLabel\n            data-slot=\"dropdown-menu-label\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuLabelVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuItem({\n    className,\n    inset,\n    size,\n    variant = 'default',\n    ...props\n}: ComponentProps<typeof MenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {\n    inset?: boolean\n    variant?: 'default' | 'destructive'\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.Item\n            data-slot=\"dropdown-menu-item\"\n            data-inset={inset}\n            data-variant={variant}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, variant, className }),\n\n                inset && 'pl-8',\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuSub({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuRoot>) {\n    return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n    className,\n    inset,\n    children,\n    size,\n    ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n    inset?: boolean\n    size?: DropdownMenuSize\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = size || context.size || 'default';\n\n    return (\n        <MenuPrimitive.SubmenuTrigger\n            data-slot=\"dropdown-menu-sub-trigger\"\n            data-inset={inset}\n            data-size={finalSize}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize }),\n\n                // Keep submenu triggers visually active while their child menu is open\n                'data-[popup-open]:bg-slate-100',\n\n                // SVG\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n\n                inset && 'pl-8',\n\n                className,\n            )}\n            {...props}\n        >\n            {children}\n            <FontAwesomeIcon icon={faChevronRight} className=\"ml-auto size-3 text-slate-700\" />\n        </MenuPrimitive.SubmenuTrigger>\n    );\n};\n\nfunction DropdownMenuSubContent({\n    align = 'start',\n    alignOffset = -3,\n    side = 'right',\n    sideOffset = 0,\n    className,\n    ...props\n}: ComponentProps<typeof DropdownMenuContent>) {\n\n    return (\n        <DropdownMenuContent\n            data-slot=\"dropdown-menu-sub-content\"\n            className={cn(\n                'min-w-32 w-auto',\n                className,\n            )}\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuCheckboxItem({\n    className,\n    children,\n    checked,\n    inset,\n    ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.CheckboxItem\n            data-slot=\"dropdown-menu-checkbox-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            checked={checked}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-checkbox-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.CheckboxItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.CheckboxItemIndicator>\n            </span>\n        </MenuPrimitive.CheckboxItem>\n    );\n};\n\nfunction DropdownMenuRadioGroup({\n    ...props\n}: ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n    return (\n        <MenuPrimitive.RadioGroup\n            data-slot=\"dropdown-menu-radio-group\"\n            {...props}\n        />\n    );\n}\n\nfunction DropdownMenuRadioItem({\n    className,\n    children,\n    inset,\n    ...props\n}: MenuPrimitive.RadioItem.Props & {\n    inset?: boolean\n}) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <MenuPrimitive.RadioItem\n            data-slot=\"dropdown-menu-radio-item\"\n            data-inset={inset}\n            className={cn(\n                dropdownMenuItemVariants({ size: finalSize, className }),\n            )}\n            {...props}\n        >\n            {children}\n            <span\n                data-slot=\"dropdown-menu-radio-item-indicator\"\n                className={cn(\n                    'ml-auto pl-4',\n                )}\n            >\n                <MenuPrimitive.RadioItemIndicator>\n                    <FontAwesomeIcon icon={faCheck} className={cn('size-3')} />\n                </MenuPrimitive.RadioItemIndicator>\n            </span>\n        </MenuPrimitive.RadioItem>\n    );\n};\n\nfunction DropdownMenuSeparator({\n    className,\n    ...props\n}: MenuPrimitive.Separator.Props) {\n    return (\n        <MenuPrimitive.Separator\n            data-slot=\"dropdown-menu-separator\"\n            className={cn(\n                // Theme\n                'my-1 h-px bg-slate-200',\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nfunction DropdownMenuShortcut({\n    className,\n    ...props\n}: ComponentProps<'span'>) {\n    const context = useContext(DropdownMenuContext);\n    const finalSize = context?.size || 'default';\n\n    return (\n        <span\n            data-slot=\"dropdown-menu-shortcut\"\n            className={cn(\n                'text-slate-700 group-focus/dropdown-menu-item:text-slate-700 ml-auto tracking-widest',\n\n                dropdownMenuShortcutVariants({ size: finalSize, className }),\n\n                className,\n            )}\n            {...props}\n        />\n    );\n};\n\nexport {\n    DropdownMenu,\n    DropdownMenuPortal,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuLabel,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuSub,\n    DropdownMenuSubTrigger,\n    DropdownMenuSubContent,\n};\n"],"mappings":"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"}

package/dist/components/EditableTable.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { EditableTableColumn, EditableTableModifyColumn, EditableTableOnCellChange, EditableTableRow, EditableTableRowActionArgs } from './editable-table/types';
+export type EditableTableProps = {
+    columns: EditableTableColumn[];
+    rows: EditableTableRow[];
+    onChange: (rows: EditableTableRow[]) => void;
+    onCellChange?: EditableTableOnCellChange;
+    addRowLabel?: string;
+    allowReorder?: boolean;
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+    className?: string;
+    modifyColumn?: EditableTableModifyColumn;
+    fieldName?: string;
+    cellErrors?: Record<string, unknown>;
+    newRowDefaults?: Record<string, unknown>;
+    renderActions?: (args: {
+        rows: EditableTableRow[];
+        addRow: () => void;
+        isDragging: boolean;
+    }) => React.ReactNode;
+    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;
+    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;
+    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;
+    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;
+};
+export declare function EditableTable({ columns, rows, onChange, onCellChange, addRowLabel, allowReorder, allowAdd, allowDelete, className, modifyColumn, fieldName, cellErrors, newRowDefaults, renderActions, renderRowActions, renderRowMenuItemsBeforeCore, renderRowMenuItemsAfterCore, renderRowMenuItems, }: EditableTableProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditableTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableTable.d.ts","sourceRoot":"","sources":["../../src/components/EditableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAoBpD,OAAO,KAAK,EACR,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,0BAA0B,EAC7B,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,yBAAyB,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,yBAAyB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,4BAA4B,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACrF,2BAA2B,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9E,CAAC;AAwBF,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,YAAwB,EACxB,WAAW,EACX,YAAmB,EACnB,QAAe,EACf,WAAkB,EAClB,SAAc,EACd,YAAwB,EACxB,SAAqB,EACrB,UAAe,EACf,cAAmB,EACnB,aAAyB,EACzB,gBAA4B,EAC5B,4BAAwC,EACxC,2BAAuC,EACvC,kBAA8B,GACjC,EAAE,kBAAkB,2CA8KpB"}

package/dist/components/EditableTable.js

@@ -0,0 +1,145 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { useTranslation } from "../hooks/useTranslation.js";
+import "../hooks/index.js";
+import { TableRow } from "./editable-table/TableRow.js";
+import { isGeneratedColumn, isThinColumn } from "./editable-table/helpers.js";
+import { useEditableTableRows } from "./editable-table/useEditableTableRows.js";
+import { useEditableTableDnd } from "./editable-table/useEditableTableDnd.js";
+import { useEditableTableCellChange } from "./editable-table/useEditableTableCellChange.js";
+import { Table, TableBody, TableHead, TableHeader, TableRow as TableRow$1 } from "./Table.js";
+import "./index.js";
+import { Button } from "./Button.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/pro-solid-svg-icons";
+import { DragDropProvider } from "@dnd-kit/react";
+import { AutoScroller } from "@dnd-kit/dom";
+//#region src/components/EditableTable.tsx
+function EditableTable({ columns, rows, onChange, onCellChange = void 0, addRowLabel, allowReorder = true, allowAdd = true, allowDelete = true, className = "", modifyColumn = void 0, fieldName = void 0, cellErrors = {}, newRowDefaults = {}, renderActions = void 0, renderRowActions = void 0, renderRowMenuItemsBeforeCore = void 0, renderRowMenuItemsAfterCore = void 0, renderRowMenuItems = void 0 }) {
+	const TableRowComponent = TableRow;
+	const t = useTranslation();
+	const normalizedColumns = useMemo(() => {
+		const sourceColumns = Array.isArray(columns) ? columns : [];
+		const validColumns = sourceColumns.filter((column) => {
+			return typeof column?.name === "string" && column.name.trim() !== "";
+		});
+		if (validColumns.length !== sourceColumns.length) {
+			const invalidColumns = sourceColumns.filter((column) => {
+				return !(typeof column?.name === "string" && column.name.trim() !== "");
+			});
+			console.error("EditableTable: column definitions must include a non-empty `name`.", {
+				invalidColumns,
+				columns: sourceColumns
+			});
+		}
+		return validColumns;
+	}, [columns]);
+	const generatedColumns = useMemo(() => {
+		return normalizedColumns.filter(isGeneratedColumn);
+	}, [normalizedColumns]);
+	const columnsSignature = useMemo(() => {
+		return JSON.stringify(normalizedColumns.map((column) => {
+			return {
+				name: column.name,
+				type: column.type,
+				label: column.label,
+				required: column.required,
+				placeholder: column.placeholder,
+				options: column.options
+			};
+		}));
+	}, [normalizedColumns]);
+	const { internalData, setInternalData, internalDataRef, skipNextRowsSyncRef, handleChange, addRow, removeRow, updateRow, moveRow } = useEditableTableRows({
+		rows,
+		onChange,
+		newRowDefaults
+	});
+	const { isDragging, isDndHydrated, effectiveAllowReorder, handleDragStart, handleDragEnd } = useEditableTableDnd({
+		allowReorder,
+		internalData,
+		handleChange
+	});
+	const { handleCellValueChange } = useEditableTableCellChange({
+		internalData,
+		internalDataRef,
+		setInternalData,
+		skipNextRowsSyncRef,
+		generatedColumns,
+		onCellChange,
+		updateRow,
+		handleChange
+	});
+	const getCellErrors = useCallback((rowIndex, columnName) => {
+		if (!fieldName) return [];
+		const key = `${fieldName}.${rowIndex}.${columnName}`;
+		const errors = cellErrors?.[key];
+		if (!errors) return [];
+		return Array.isArray(errors) ? errors : [errors];
+	}, [cellErrors, fieldName]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [
+			typeof renderActions === "function" ? renderActions({
+				rows: internalData,
+				addRow,
+				isDragging
+			}) : null,
+			/* @__PURE__ */ jsx(DragDropProvider, {
+				plugins: useCallback((defaults) => {
+					return defaults.filter((plugin) => {
+						return plugin !== AutoScroller;
+					});
+				}, []),
+				onDragStart: handleDragStart,
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow$1, { children: [normalizedColumns.map((column) => {
+					return /* @__PURE__ */ jsxs(TableHead, {
+						className: cn(column.className, isThinColumn(column) && "w-[1%] whitespace-nowrap"),
+						children: [column.label, column.required && /* @__PURE__ */ jsx("span", {
+							className: "text-error ml-1",
+							children: "*"
+						})]
+					}, column.name);
+				}), (allowReorder || allowDelete) && /* @__PURE__ */ jsx(TableHead, { className: "p-0 w-0" })] }) }), /* @__PURE__ */ jsx(TableBody, { children: internalData.map((row, rowIndex) => {
+					return /* @__PURE__ */ jsx(TableRowComponent, {
+						row,
+						rowIndex,
+						rowCount: internalData.length,
+						columns: normalizedColumns,
+						columnsSignature,
+						useDnd: allowReorder && isDndHydrated,
+						allowReorder: effectiveAllowReorder && isDndHydrated,
+						showReorderControls: allowReorder,
+						allowDelete,
+						modifyColumn,
+						getCellErrors,
+						onUpdateCell: handleCellValueChange,
+						moveRow,
+						removeRow,
+						t,
+						renderRowActions,
+						renderRowMenuItemsBeforeCore,
+						renderRowMenuItemsAfterCore,
+						renderRowMenuItems
+					}, row._id);
+				}) })] })
+			}),
+			allowAdd && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "dashed",
+				onClick: addRow,
+				className: cn("w-full rounded-t-none! border-t-0!", isDragging && "pointer-events-none"),
+				children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faPlus,
+					className: "size-3 mr-1"
+				}), addRowLabel || t("Add row")]
+			})
+		]
+	});
+}
+//#endregion
+export { EditableTable };
+
+//# sourceMappingURL=EditableTable.js.map

package/dist/components/EditableTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableTable.js","names":[],"sources":["../../src/components/EditableTable.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { DragDropProvider } from '@dnd-kit/react';\nimport { AutoScroller } from '@dnd-kit/dom';\nimport {\n    Button,\n    Table,\n    TableHeader,\n    TableBody,\n    TableRow as UITableRow,\n    TableHead,\n} from '@verbb/plugin-kit-react/components';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { TableRow } from './editable-table/TableRow';\nimport { isGeneratedColumn, isThinColumn } from './editable-table/helpers';\nimport { useEditableTableRows } from './editable-table/useEditableTableRows';\nimport { useEditableTableDnd } from './editable-table/useEditableTableDnd';\nimport { useEditableTableCellChange } from './editable-table/useEditableTableCellChange';\nimport type {\n    EditableTableColumn,\n    EditableTableModifyColumn,\n    EditableTableOnCellChange,\n    EditableTableRow,\n    EditableTableRowActionArgs,\n} from './editable-table/types';\n\nexport type EditableTableProps = {\n    columns: EditableTableColumn[];\n    rows: EditableTableRow[];\n    onChange: (rows: EditableTableRow[]) => void;\n    onCellChange?: EditableTableOnCellChange;\n    addRowLabel?: string;\n    allowReorder?: boolean;\n    allowAdd?: boolean;\n    allowDelete?: boolean;\n    className?: string;\n    modifyColumn?: EditableTableModifyColumn;\n    fieldName?: string;\n    cellErrors?: Record<string, unknown>;\n    newRowDefaults?: Record<string, unknown>;\n    renderActions?: (args: { rows: EditableTableRow[]; addRow: () => void; isDragging: boolean }) => React.ReactNode;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\ntype TableRowComponentProps = {\n    row: EditableTableRow;\n    rowIndex: number;\n    rowCount: number;\n    columns: EditableTableColumn[];\n    columnsSignature: string;\n    useDnd: boolean;\n    allowReorder: boolean;\n    showReorderControls: boolean;\n    allowDelete: boolean;\n    modifyColumn?: EditableTableModifyColumn;\n    getCellErrors: (rowIndex: number, columnName: string) => unknown[];\n    onUpdateCell: (rowIndex: number, row: EditableTableRow, column: EditableTableColumn, newValue: unknown) => void;\n    moveRow: (row: EditableTableRow, direction: number) => void;\n    removeRow: (row: EditableTableRow) => void;\n    t: (key: string) => string;\n    renderRowActions?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsBeforeCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItemsAfterCore?: (args: EditableTableRowActionArgs) => React.ReactNode;\n    renderRowMenuItems?: (args: EditableTableRowActionArgs) => React.ReactNode;\n};\n\nexport function EditableTable({\n    columns,\n    rows,\n    onChange,\n    onCellChange = undefined,\n    addRowLabel,\n    allowReorder = true,\n    allowAdd = true,\n    allowDelete = true,\n    className = '',\n    modifyColumn = undefined,\n    fieldName = undefined,\n    cellErrors = {},\n    newRowDefaults = {},\n    renderActions = undefined,\n    renderRowActions = undefined,\n    renderRowMenuItemsBeforeCore = undefined,\n    renderRowMenuItemsAfterCore = undefined,\n    renderRowMenuItems = undefined,\n}: EditableTableProps) {\n    const TableRowComponent = TableRow as React.ComponentType<TableRowComponentProps>;\n    const t = useTranslation();\n    const normalizedColumns = useMemo(() => {\n        const sourceColumns = Array.isArray(columns) ? columns : [];\n        const validColumns = sourceColumns.filter((column) => {\n            return typeof column?.name === 'string' && column.name.trim() !== '';\n        });\n\n        if (validColumns.length !== sourceColumns.length) {\n            const invalidColumns = sourceColumns.filter((column) => {\n                return !(typeof column?.name === 'string' && column.name.trim() !== '');\n            });\n\n            console.error(\n                'EditableTable: column definitions must include a non-empty `name`.',\n                { invalidColumns, columns: sourceColumns },\n            );\n        }\n\n        return validColumns;\n    }, [columns]);\n\n    const generatedColumns = useMemo(() => {\n        return normalizedColumns.filter(isGeneratedColumn);\n    }, [normalizedColumns]);\n\n    const columnsSignature = useMemo(() => {\n        return JSON.stringify(normalizedColumns.map((column) => {\n            return {\n                name: column.name,\n                type: column.type,\n                label: column.label,\n                required: column.required,\n                placeholder: column.placeholder,\n                options: column.options,\n            };\n        }));\n    }, [normalizedColumns]);\n\n    const {\n        internalData,\n        setInternalData,\n        internalDataRef,\n        skipNextRowsSyncRef,\n        handleChange,\n        addRow,\n        removeRow,\n        updateRow,\n        moveRow,\n    } = useEditableTableRows({\n        rows,\n        onChange,\n        newRowDefaults,\n    });\n\n    const {\n        isDragging,\n        isDndHydrated,\n        effectiveAllowReorder,\n        handleDragStart,\n        handleDragEnd,\n    } = useEditableTableDnd({\n        allowReorder,\n        internalData,\n        handleChange,\n    });\n\n    const {\n        handleCellValueChange,\n    } = useEditableTableCellChange({\n        internalData,\n        internalDataRef,\n        setInternalData,\n        skipNextRowsSyncRef,\n        generatedColumns,\n        onCellChange,\n        updateRow,\n        handleChange,\n    });\n\n    const getCellErrors = useCallback((rowIndex: number, columnName: string) => {\n        if (!fieldName) {\n            return [];\n        }\n\n        const key = `${fieldName}.${rowIndex}.${columnName}`;\n        const errors = cellErrors?.[key];\n        if (!errors) {\n            return [];\n        }\n\n        return Array.isArray(errors) ? errors : [errors];\n    }, [cellErrors, fieldName]);\n\n    const actions = typeof renderActions === 'function'\n        ? renderActions({\n            rows: internalData,\n            addRow,\n            isDragging,\n        })\n        : null;\n\n    const dragDropPlugins = useCallback((defaults) => {\n        return defaults.filter((plugin) => { return plugin !== AutoScroller; });\n    }, []);\n\n    return (\n        <div className={className}>\n            {actions}\n\n            <DragDropProvider\n                plugins={dragDropPlugins}\n                onDragStart={handleDragStart}\n                onDragEnd={handleDragEnd}\n            >\n                <Table>\n                    <TableHeader>\n                        <UITableRow>\n                            {normalizedColumns.map((column) => {\n                                return (\n                                    <TableHead key={column.name} className={cn(column.className, isThinColumn(column) && 'w-[1%] whitespace-nowrap')}>\n                                        {column.label}\n                                        {column.required && <span className=\"text-error ml-1\">*</span>}\n                                    </TableHead>\n                                );\n                            })}\n                            {(allowReorder || allowDelete) && <TableHead className=\"p-0 w-0\"></TableHead>}\n                        </UITableRow>\n                    </TableHeader>\n                    <TableBody>\n                        {internalData.map((row, rowIndex) => {\n                            return (\n                                <TableRowComponent\n                                    key={row._id}\n                                    row={row}\n                                    rowIndex={rowIndex}\n                                    rowCount={internalData.length}\n                                    columns={normalizedColumns}\n                                    columnsSignature={columnsSignature}\n                                    useDnd={allowReorder && isDndHydrated}\n                                    allowReorder={effectiveAllowReorder && isDndHydrated}\n                                    showReorderControls={allowReorder}\n                                    allowDelete={allowDelete}\n                                    modifyColumn={modifyColumn}\n                                    getCellErrors={getCellErrors}\n                                    onUpdateCell={handleCellValueChange}\n                                    moveRow={moveRow}\n                                    removeRow={removeRow}\n                                    t={t}\n                                    renderRowActions={renderRowActions}\n                                    renderRowMenuItemsBeforeCore={renderRowMenuItemsBeforeCore}\n                                    renderRowMenuItemsAfterCore={renderRowMenuItemsAfterCore}\n                                    renderRowMenuItems={renderRowMenuItems}\n                                />\n                            );\n                        })}\n                    </TableBody>\n                </Table>\n            </DragDropProvider>\n\n            {allowAdd && (\n                <Button\n                    type=\"button\"\n                    variant=\"dashed\"\n                    onClick={addRow}\n                    className={cn('w-full rounded-t-none! border-t-0!', isDragging && 'pointer-events-none')}\n                >\n                    <FontAwesomeIcon icon={faPlus} className=\"size-3 mr-1\" />\n                    {addRowLabel || t('Add row')}\n                </Button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/FadeIn.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from 'react';
+import { motion, Easing } from 'framer-motion';
+export interface FadeInProps extends Omit<ComponentProps<typeof motion.div>, 'children'> {
+    show?: boolean;
+    children?: ReactNode;
+    className?: string;
+    duration?: number;
+    delay?: number;
+    ease?: Easing;
+}
+export declare const FadeIn: ({ show, children, className, duration, delay, ease, ...props }: FadeInProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FadeIn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FadeIn.d.ts","sourceRoot":"","sources":["../../src/components/FadeIn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAmB,MAAM,EAAE,MAAM,eAAe,CAAC;AAGhE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IACpF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,GAAI,gEAQpB,WAAW,4CAqBb,CAAC"}

package/dist/components/FadeIn.js

@@ -0,0 +1,24 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/FadeIn.tsx
+var FadeIn = ({ show = true, children, className, duration = .2, delay = 0, ease = "easeInOut", ...props }) => {
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: show && /* @__PURE__ */ jsx(motion.div, {
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: {
+			duration,
+			delay,
+			ease
+		},
+		className: cn(className),
+		...props,
+		children
+	}) });
+};
+//#endregion
+export { FadeIn };
+
+//# sourceMappingURL=FadeIn.js.map

package/dist/components/FadeIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadeIn.js","names":[],"sources":["../../src/components/FadeIn.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { motion, AnimatePresence, Easing } from 'framer-motion';\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nexport interface FadeInProps extends Omit<ComponentProps<typeof motion.div>, 'children'> {\n    show?: boolean;\n    children?: ReactNode;\n    className?: string;\n    duration?: number;\n    delay?: number;\n    ease?: Easing;\n}\n\nexport const FadeIn = ({\n    show = true,\n    children,\n    className,\n    duration = 0.2,\n    delay = 0,\n    ease = 'easeInOut',\n    ...props\n}: FadeInProps) => {\n    return (\n        <AnimatePresence>\n            {show && (\n                <motion.div\n                    initial={{ opacity: 0 }}\n                    animate={{ opacity: 1 }}\n                    exit={{ opacity: 0 }}\n                    transition={{\n                        duration,\n                        delay,\n                        ease,\n                    }}\n                    className={cn(className)}\n                    {...props}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n"],"mappings":";;;;;AAaA,IAAa,UAAU,EACnB,OAAO,MACP,UACA,WACA,WAAW,IACX,QAAQ,GACR,OAAO,aACP,GAAG,YACY;AACf,QACI,oBAAC,iBAAD,EAAA,UACK,QACG,oBAAC,OAAO,KAAR;EACI,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,MAAM,EAAE,SAAS,GAAG;EACpB,YAAY;GACR;GACA;GACA;GACH;EACD,WAAW,GAAG,UAAU;EACxB,GAAI;EAEH;EACQ,CAAA,EAEH,CAAA"}

package/dist/components/Input.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
+    width?: "xs" | "sm" | "lg" | "xl" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Input({ className, type, size, width, ...props }: Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>): import("react/jsx-runtime").JSX.Element;
+export { Input };
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;;8EAqBjB,CAAC;AAEH,iBAAS,KAAK,CAAC,EACX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAc,EACd,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAiC5E;AACD,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Input.js

@@ -0,0 +1,43 @@
+import { cn } from "../utils/classes.js";
+import "../utils/index.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/Input.tsx
+var inputVariants = cva("", {
+	variants: {
+		size: {
+			xs: "px-1.5 py-1 text-[11px]",
+			sm: "px-2 py-1 text-[12px]",
+			default: "px-2 py-1.5 text-sm",
+			lg: "px-3 py-2 text-sm",
+			xl: "px-4 py-2.5 text-base"
+		},
+		width: {
+			xs: "w-4",
+			sm: "w-8",
+			lg: "w-12",
+			xl: "w-16",
+			full: "w-full"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		width: "full"
+	}
+});
+function Input({ className, type, size, width = "full", ...props }) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		type,
+		"data-slot": "input",
+		className: cn("flex outline-none bg-clip-padding", "rounded-sm", "border border-[rgba(96,125,159,0.4)]", "bg-[rgb(251,252,254)]", inputVariants({
+			size,
+			width
+		}), "placeholder:text-[#7c8793]", "focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]", "aria-invalid:border-rose-600! aria-invalid:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!", "disabled:cursor-not-allowed disabled:opacity-50", "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Input };
+
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@verbb/plugin-kit-react/utils';\n\nconst inputVariants = cva('', {\n    variants: {\n        size: {\n            xs: 'px-1.5 py-1 text-[11px]',\n            sm: 'px-2 py-1 text-[12px]',\n            default: 'px-2 py-1.5 text-sm',\n            lg: 'px-3 py-2 text-sm',\n            xl: 'px-4 py-2.5 text-base',\n        },\n        width: {\n            xs: 'w-4',\n            sm: 'w-8',\n            lg: 'w-12',\n            xl: 'w-16',\n            full: 'w-full',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        width: 'full',\n    },\n});\n\nfunction Input({\n    className,\n    type,\n    size,\n    width = 'full',\n    ...props\n}: Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof inputVariants>) {\n    return (\n        <InputPrimitive\n            type={type}\n            data-slot=\"input\"\n            className={cn(\n                // Reset\n                'flex outline-none bg-clip-padding',\n\n                'rounded-sm',\n                'border border-[rgba(96,125,159,0.4)]',\n                'bg-[rgb(251,252,254)]',\n\n                // Themes\n                inputVariants({ size, width }),\n\n                // Hover & Focus\n                'placeholder:text-[#7c8793]',\n                'focus-visible:border-sky-600 focus-visible:shadow-[0_0_0_1px_var(--color-sky-600),0_0_4px_0_hsl(from_var(--color-sky-600)_h_s_l/0.7)]',\n                'aria-invalid:border-rose-600! aria-invalid:focus-visible:shadow-[0_0_0_1px_var(--color-rose-600),0_0_4px_0_hsl(from_var(--color-rose-600)_h_s_l/0.7)]!',\n\n                // Data States\n                'disabled:cursor-not-allowed disabled:opacity-50',\n\n                // File\n                'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',\n\n                // Custom Classes\n                className,\n            )}\n            {...props}\n        />\n    );\n}\nexport { Input };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IAAI,IAAI;CAC1B,UAAU;EACN,MAAM;GACF,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACP;EACD,OAAO;GACH,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACT;EACJ;CACD,iBAAiB;EACb,MAAM;EACN,OAAO;EACV;CACJ,CAAC;AAEF,SAAS,MAAM,EACX,WACA,MACA,MACA,QAAQ,QACR,GAAG,SACwE;AAC3E,QACI,oBAAC,SAAD;EACU;EACN,aAAU;EACV,WAAW,GAEP,qCAEA,cACA,wCACA,yBAGA,cAAc;GAAE;GAAM;GAAO,CAAC,EAG9B,8BACA,yIACA,0JAGA,mDAGA,wFAGA,UACH;EACD,GAAI;EACN,CAAA"}

package/dist/components/InputGroup.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Button } from '.';
+declare function InputGroup({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: Omit<ComponentProps<'input'>, 'size' | 'width'>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
+//# sourceMappingURL=InputGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../src/components/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAI5D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,2CAmCjE;AAED,QAAA,MAAM,uBAAuB;;8EA2D5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,2CAgBtE;AAED,QAAA,MAAM,wBAAwB;;8EA0B7B,CAAC;AAEF,iBAAS,gBAAgB,CAAC,EACtB,SAAS,EACT,IAAe,EACf,OAAgB,EAChB,IAAW,EACX,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB,2CAUJ;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,2CAmBtE;AAED,iBAAS,eAAe,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,2CAqBjD;AAED,iBAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,CAAC,UAAU,CAAC,2CAsB5B;AAED,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACrB,CAAC"}