@keboola/design 11.0.0 → 11.2.0

package/dist/DropdownMenu-t90tVw6l.js

@@ -0,0 +1,327 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { Check, ChevronRight, Circle, Loader2, ToggleRight } from "./icons-Cek151jC.js";
+import { ScrollArea } from "./internal/components/ScrollArea.js";
+import { Root, Slottable } from "@radix-ui/react-slot";
+import { createContext, use, useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Group, Root as Root$1, Trigger } from "@radix-ui/react-dropdown-menu";
+//#region src/components/DropdownMenu/DropdownMenuItemIndicator.tsx
+const variants = cva([
+	"tailwindcss-preflight",
+	"tw:pointer-events-none",
+	"tw:size-4",
+	"tw:aspect-square",
+	"tw:shrink-0",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center"
+], { variants: { variant: {
+	none: [],
+	radio: [
+		"tw:border",
+		"tw:border-solid",
+		"tw:border-border",
+		"tw:rounded-full",
+		"tw:group-data-[variant=default]/dropdown-menu-content:bg-input-background",
+		"tw:group-data-[variant=argo]/dropdown-menu-content:bg-background",
+		"tw:[&_svg:not([class*=\"tw:size-\"])]:size-2",
+		"tw:data-[state=unchecked]:[&_svg]:hidden",
+		"tw:[&_svg]:fill-current",
+		"tw:group-data-[variant=argo]/dropdown-menu-content:[&_svg]:text-primary",
+		"tw:group-data-[variant=default]/dropdown-menu-content:[&_svg]:text-primary"
+	],
+	check: ["tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5", "tw:[&_svg]:text-primary"],
+	checkbox: [
+		"tw:[&_svg]:text-primary-foreground",
+		"tw:border",
+		"tw:border-solid",
+		"tw:rounded",
+		"tw:group-data-[variant=default]/dropdown-menu-content:border-input",
+		"tw:group-data-[variant=argo]/dropdown-menu-content:border-input",
+		"tw:[&_svg:not([class*=\"tw:size-\"])]:size-3",
+		"tw:data-[state=unchecked]:[&_svg]:hidden",
+		"tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:border-primary",
+		"tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary",
+		"tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:border-primary",
+		"tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:bg-primary"
+	],
+	switch: [
+		"tw:size-5",
+		"tw:[&_svg:not([class*=\"tw:size-\"])]:size-5",
+		"tw:text-muted-foreground",
+		"tw:data-[state=unchecked]:rotate-180",
+		"tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:text-primary",
+		"tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:text-primary"
+	]
+} } });
+const DropdownMenuItemIndicator = ({ variant, className, forceMount: forceMountProp, ...rest }) => {
+	const IconComp = (() => {
+		if (variant === "switch") return ToggleRight;
+		if (variant === "radio") return Circle;
+		return Check;
+	})();
+	const forceMount = (() => {
+		if (forceMountProp) return true;
+		return variant === "check" ? void 0 : true;
+	})();
+	if (variant === "none") return null;
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
+		...rest,
+		forceMount,
+		className: variants({
+			variant,
+			className
+		}),
+		children: /* @__PURE__ */ jsx(IconComp, {})
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/ItemIcon.tsx
+const ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx("span", {
+	...props,
+	className: cn("tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:aspect-square", "tw:size-5", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", "tw:group-data-[variant=default]/dropdown-menu-content:text-muted-foreground", "tw:group-data-[variant=argo]/dropdown-menu-content:text-primary", "tw:group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:text-muted-foreground", "tw:group-data-[variant=default]/dropdown-menu-content:group-hover:text-primary", className),
+	children
+});
+//#endregion
+//#region src/components/DropdownMenu/styles.ts
+const itemVariants = cn("tailwindcss-preflight", "tw:outline-hidden", "tw:group", "tw:peer", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", "tw:cursor-pointer", "tw:select-none", "tw:transition-colors", "tw:p-2", "tw:font-sans", "tw:text-sm", "tw:aria-disabled:pointer-events-none", "tw:aria-disabled:opacity-50", "tw:focus-visible:outline-hidden", "tw:group-data-[variant=default]/dropdown-menu-content:rounded", "tw:group-data-[variant=default]/dropdown-menu-content:focus:bg-muted", "tw:group-data-[variant=default]/dropdown-menu-content:focus:text-foreground", "tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-muted", "tw:group-data-[variant=default]/dropdown-menu-content:hover:text-foreground", "tw:group-data-[variant=argo]/dropdown-menu-content:rounded-md", "tw:group-data-[variant=argo]/dropdown-menu-content:text-popover-foreground", "tw:group-data-[variant=argo]/dropdown-menu-content:focus:text-primary", "tw:group-data-[variant=argo]/dropdown-menu-content:focus:bg-primary/10", "tw:group-data-[variant=argo]/dropdown-menu-content:hover:text-primary", "tw:group-data-[variant=argo]/dropdown-menu-content:hover:bg-primary/10");
+const contentVariants = cn("tailwindcss-preflight", "tw:group/dropdown-menu-content", "tw:z-[1055]", "tw:flex", "tw:flex-col", "tw:origin-(--radix-dropdown-menu-content-transform-origin)", "tw:max-h-[var(--radix-dropdown-menu-content-available-height)]", "tw:min-w-32", "tw:border", "tw:border-border", "tw:shadow-md", "tw:bg-popover", "tw:text-popover-foreground", "tw:data-[variant=default]:rounded-md", "tw:data-[variant=argo]:rounded-2xl", "tw:data-[state=open]:animate-in", "tw:data-[state=open]:fade-in-0", "tw:data-[state=open]:zoom-in-95", "tw:data-[state=closed]:animate-out", "tw:data-[state=closed]:fade-out-0", "tw:data-[state=closed]:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=top]:slide-in-from-bottom-2");
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx
+const DropdownMenuCheckboxItem = ({ className, children, checked, closeOnSelect = false, onSelect, indicatorAlign = "start", indicator = "checkbox", isLoading = false, ...props }) => {
+	const isAtStart = indicatorAlign === "start";
+	const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, {
+		className: isAtStart ? "" : "tw:ml-auto",
+		children: /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" })
+	}) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, {
+		variant: indicator,
+		className: isAtStart ? "" : "tw:ml-auto"
+	});
+	const handleSelect = (event) => {
+		if (!closeOnSelect) event.preventDefault();
+		onSelect?.(event);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
+		className: cn(itemVariants, className),
+		checked,
+		onSelect: handleSelect,
+		...props,
+		children: [
+			isAtStart && indicatorEle,
+			children,
+			!isAtStart && indicatorEle
+		]
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuContext.tsx
+const DropdownMenuContext = createContext({ variant: "default" });
+const useDropdownMenuContext = () => use(DropdownMenuContext);
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuContent.tsx
+const DropdownMenuContent = ({ className, sideOffset = 4, forceMount, children, viewPortClassName, container, ...props }) => {
+	const { variant } = useDropdownMenuContext();
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
+		forceMount: forceMount || void 0,
+		container,
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+			...props,
+			"data-variant": variant,
+			sideOffset,
+			className: contentVariants,
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				className,
+				viewPortClassName: cn("tw:p-2", "tw:max-h-[var(--radix-dropdown-menu-content-available-height)]", viewPortClassName),
+				scrollBarClassName: "tw:w-1.5",
+				children
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuItem.tsx
+const DropdownMenuItem = ({ ref, className, asModalTrigger = false, onSelect, onPointerLeave, onPointerMove, children, asChild, icon, iconClassName, isLoading = false, ...props }) => {
+	const Comp = asChild ? Root : "div";
+	const adornment = isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" }) : icon;
+	const handleOnSelect = (event) => {
+		if (asModalTrigger) event.preventDefault();
+		onSelect?.(event);
+	};
+	const handlePointerLeave = (event) => {
+		if (asModalTrigger) event.preventDefault();
+		onPointerLeave?.(event);
+	};
+	const handlePointerMove = (event) => {
+		if (asModalTrigger) event.preventDefault();
+		onPointerMove?.(event);
+	};
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+		...props,
+		ref,
+		onSelect: handleOnSelect,
+		onPointerLeave: handlePointerLeave,
+		onPointerMove: handlePointerMove,
+		className: cn(itemVariants, asChild && "tw:text-inherit", className),
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Comp, { children: [adornment && /* @__PURE__ */ jsx(ItemIcon, {
+			className: iconClassName,
+			children: adornment
+		}), /* @__PURE__ */ jsx(Slottable, { children })] })
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuItemDescription.tsx
+const descriptionVariants = cva([
+	"tw:box-border",
+	"tw:ml-auto",
+	"tw:font-sans",
+	"tw:tracking-normal",
+	"tw:font-normal",
+	"tw:text-xs",
+	"tw:text-muted-foreground"
+], {
+	variants: { hideOnHover: {
+		true: ["tw:group-focus-within:hidden", "tw:group-hover:hidden"],
+		false: []
+	} },
+	defaultVariants: {}
+});
+const DropdownMenuItemDescription = ({ className, children, hideOnHover = false, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: cn(descriptionVariants({ hideOnHover }), className),
+		children
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuLabel.tsx
+const DropdownMenuLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
+		className: cn("tw:p-2", "tw:font-medium", "tw:text-xs", "tw:text-muted-foreground", className),
+		...props
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioGroup.tsx
+const DropdownMenuRadioGroup = ({ value, defaultValue, onValueChange, ...props }) => {
+	const handleChange = (value) => {
+		onValueChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, {
+		...props,
+		value,
+		defaultValue,
+		onValueChange: handleChange
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx
+const DropdownMenuRadioItem = ({ className, children, closeOnSelect, onSelect, indicatorAlign = "start", indicator = "radio", icon, iconClassName, isLoading = false, ...props }) => {
+	const isAtStart = indicatorAlign === "start";
+	const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, {
+		className: iconClassName,
+		children: /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" })
+	}) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator });
+	const handleSelect = (event) => {
+		if (!closeOnSelect) event.preventDefault();
+		onSelect?.(event);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
+		className: cn(itemVariants, "tw:data-[state=checked]:cursor-default", {
+			"tw:data-[state=checked]:bg-neutral-100": indicator === "none",
+			"tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary/10": indicator === "check"
+		}, className),
+		onSelect: handleSelect,
+		...props,
+		children: [
+			isAtStart && indicatorEle,
+			icon && /* @__PURE__ */ jsx(ItemIcon, {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-2",
+				children
+			}),
+			!isAtStart && indicatorEle
+		]
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuSeparator.tsx
+const DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+	className: cn("tw:relative", "tw:z-10", "tw:flex", "tw:items-center", "tw:justify-center", "tw:w-full", "tw:before:content-[\"\"]", "tw:before:w-full", "tw:before:h-px", "tw:group-data-[variant=default]/dropdown-menu-content:py-2", "tw:group-data-[variant=default]/dropdown-menu-content:before:bg-border", "tw:group-data-[variant=argo]/dropdown-menu-content:py-1", "tw:group-data-[variant=argo]/dropdown-menu-content:before:bg-border", className),
+	...props
+});
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSub.tsx
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx
+const DropdownMenuSubContent = ({ className, ...props }) => {
+	const { variant } = useDropdownMenuContext();
+	return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+		"data-variant": variant,
+		className: cn(contentVariants, "tw:z-[1041]", "tw:p-2", className),
+		...props
+	}) });
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx
+const DropdownMenuSubTrigger = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
+		className: cn(itemVariants, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "tw:ml-auto tw:size-5" })]
+	});
+};
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenuTrigger.tsx
+const DropdownMenuTrigger = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(Trigger, {
+	...props,
+	ref,
+	"data-slot": "dropdown-menu-trigger",
+	className: cn("tw:group/dropdown-menu-trigger", className)
+});
+//#endregion
+//#region src/components/DropdownMenu/DropdownMenu.tsx
+const DropdownMenu = ({ modal = false, ...props }) => {
+	const effectiveVariant = useArgoDesign() ? "argo" : "default";
+	const contextValue = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
+	return /* @__PURE__ */ jsx(DropdownMenuContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Root$1, {
+			...props,
+			modal
+		})
+	});
+};
+/**
+* Main Layout
+*/
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Group = Group;
+/**
+* Sub Layout
+*/
+DropdownMenu.Sub = DropdownMenuSub;
+DropdownMenu.SubContent = DropdownMenuSubContent;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+/**
+* Items can be used either Sub ar Main Layout
+*/
+DropdownMenu.Separator = DropdownMenuSeparator;
+DropdownMenu.Label = DropdownMenuLabel;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.CheckboxItem = DropdownMenuCheckboxItem;
+DropdownMenu.RadioGroup = DropdownMenuRadioGroup;
+DropdownMenu.RadioItem = DropdownMenuRadioItem;
+DropdownMenu.ItemDescription = DropdownMenuItemDescription;
+//#endregion
+export { DropdownMenu };
+
+//# sourceMappingURL=DropdownMenu-t90tVw6l.js.map

package/dist/DropdownMenu-t90tVw6l.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu-t90tVw6l.js","names":["Root"],"sources":["../src/components/DropdownMenu/DropdownMenuItemIndicator.tsx","../src/components/DropdownMenu/ItemIcon.tsx","../src/components/DropdownMenu/styles.ts","../src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx","../src/components/DropdownMenu/DropdownMenuContext.tsx","../src/components/DropdownMenu/DropdownMenuContent.tsx","../src/components/DropdownMenu/DropdownMenuItem.tsx","../src/components/DropdownMenu/DropdownMenuItemDescription.tsx","../src/components/DropdownMenu/DropdownMenuLabel.tsx","../src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioGroup.tsx","../src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx","../src/components/DropdownMenu/DropdownMenuSeparator.tsx","../src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSub.tsx","../src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx","../src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx","../src/components/DropdownMenu/DropdownMenuTrigger.tsx","../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Check, Circle, ToggleRight } from '../../icons';\n\nconst variants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:pointer-events-none',\n\n    // sizing\n    'tw:size-4',\n    'tw:aspect-square',\n    'tw:shrink-0',\n\n    // layout\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n  ],\n  {\n    variants: {\n      variant: {\n        none: [],\n        radio: [\n          'tw:border',\n          'tw:border-solid',\n          'tw:border-border',\n          'tw:rounded-full',\n          'tw:group-data-[variant=default]/dropdown-menu-content:bg-input-background',\n          'tw:group-data-[variant=argo]/dropdown-menu-content:bg-background',\n\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-2',\n          'tw:data-[state=unchecked]:[&_svg]:hidden',\n          // Lucide Circle is stroke-only — force fill to match the stroke\n          // (currentColor) so the indicator reads as a solid dot.\n          'tw:[&_svg]:fill-current',\n          'tw:group-data-[variant=argo]/dropdown-menu-content:[&_svg]:text-primary',\n          'tw:group-data-[variant=default]/dropdown-menu-content:[&_svg]:text-primary',\n        ],\n        check: ['tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5', 'tw:[&_svg]:text-primary'],\n        checkbox: [\n          'tw:[&_svg]:text-primary-foreground',\n          'tw:border',\n          'tw:border-solid',\n          'tw:rounded',\n          'tw:group-data-[variant=default]/dropdown-menu-content:border-input',\n          'tw:group-data-[variant=argo]/dropdown-menu-content:border-input',\n\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n          'tw:data-[state=unchecked]:[&_svg]:hidden',\n          'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:border-primary',\n          'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary',\n          'tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:border-primary',\n          'tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:bg-primary',\n        ],\n        switch: [\n          'tw:size-5',\n          // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight\n          // to the indicator slot so it doesn't overflow.\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n          'tw:text-muted-foreground',\n          'tw:data-[state=unchecked]:rotate-180',\n          'tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:text-primary',\n          'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:text-primary',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator> &\n  VariantProps<typeof variants>;\n\nexport const DropdownMenuItemIndicator = ({\n  variant,\n  className,\n  forceMount: forceMountProp,\n  ...rest\n}: Props) => {\n  const IconComp = (() => {\n    if (variant === 'switch') return ToggleRight;\n    if (variant === 'radio') return Circle;\n    return Check;\n  })();\n\n  const forceMount = (() => {\n    if (forceMountProp) return true;\n    // All variants, except for check, require rendering at all times.\n    return variant === 'check' ? undefined : true;\n  })();\n\n  if (variant === 'none') return null;\n\n  return (\n    <DropdownMenuPrimitive.ItemIndicator\n      {...rest}\n      forceMount={forceMount}\n      className={variants({ variant, className })}\n    >\n      <IconComp />\n    </DropdownMenuPrimitive.ItemIndicator>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'> & {\n  children: ReactNode;\n};\n\nexport const ItemIcon = ({ className, children, ...props }: Props) => (\n  <span\n    {...props}\n    className={cn(\n      'tw:inline-flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:aspect-square',\n      // 20px container fits the 16px Lucide glyph plus 2px breathing room\n      // each side — the previous tw:size-4 + tw:p-0.5 clipped the 16px child.\n      'tw:size-5',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      'tw:group-data-[variant=default]/dropdown-menu-content:text-muted-foreground',\n      'tw:group-data-[variant=argo]/dropdown-menu-content:text-primary',\n      'tw:group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:text-muted-foreground',\n      'tw:group-data-[variant=default]/dropdown-menu-content:group-hover:text-primary',\n      className,\n    )}\n  >\n    {children}\n  </span>\n);\n","import { cn } from '../../utils';\n\nexport const itemVariants = cn(\n  // reset\n  'tailwindcss-preflight',\n  'tw:outline-hidden',\n  'tw:group',\n  'tw:peer',\n  'tw:relative',\n\n  // positioning\n  'tw:flex',\n  'tw:flex-1',\n  'tw:items-center',\n  'tw:gap-2',\n\n  // An icon passed as `children` rather than via the `icon` prop misses `ItemIcon`,\n  // so without this it falls back to Lucide's 24px default and towers over the\n  // siblings this row is laid out for. The `:not()` keeps a call-site size winning.\n  'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n\n  'tw:cursor-pointer',\n  'tw:select-none',\n  'tw:transition-colors',\n\n  // spacing\n  'tw:p-2',\n\n  // typography\n  'tw:font-sans',\n  'tw:text-sm',\n\n  'tw:aria-disabled:pointer-events-none',\n  'tw:aria-disabled:opacity-50',\n\n  'tw:focus-visible:outline-hidden',\n\n  'tw:group-data-[variant=default]/dropdown-menu-content:rounded',\n  'tw:group-data-[variant=default]/dropdown-menu-content:focus:bg-muted',\n  'tw:group-data-[variant=default]/dropdown-menu-content:focus:text-foreground',\n  'tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-muted',\n  'tw:group-data-[variant=default]/dropdown-menu-content:hover:text-foreground',\n\n  'tw:group-data-[variant=argo]/dropdown-menu-content:rounded-md',\n  'tw:group-data-[variant=argo]/dropdown-menu-content:text-popover-foreground',\n  'tw:group-data-[variant=argo]/dropdown-menu-content:focus:text-primary',\n  'tw:group-data-[variant=argo]/dropdown-menu-content:focus:bg-primary/10',\n  'tw:group-data-[variant=argo]/dropdown-menu-content:hover:text-primary',\n  'tw:group-data-[variant=argo]/dropdown-menu-content:hover:bg-primary/10',\n);\n\nexport const contentVariants = cn(\n  'tailwindcss-preflight',\n  'tw:group/dropdown-menu-content',\n  // Sit above Modal/Sheet (z-1051), matching the other floating overlays (Popover/Select z-1055)\n  'tw:z-[1055]',\n\n  // positioning\n  'tw:flex',\n  'tw:flex-col',\n  'tw:origin-(--radix-dropdown-menu-content-transform-origin)',\n\n  // sizing\n  'tw:max-h-[var(--radix-dropdown-menu-content-available-height)]',\n  'tw:min-w-32',\n\n  // border\n  'tw:border',\n  'tw:border-border',\n  'tw:shadow-md',\n\n  // surface — semantic tokens, so a portalled menu follows the brand and the scheme\n  'tw:bg-popover',\n  'tw:text-popover-foreground',\n\n  // Radius is the only thing the surface variants differ in.\n  'tw:data-[variant=default]:rounded-md',\n  'tw:data-[variant=argo]:rounded-2xl',\n\n  // animations\n  'tw:data-[state=open]:animate-in',\n  'tw:data-[state=open]:fade-in-0',\n  'tw:data-[state=open]:zoom-in-95',\n\n  'tw:data-[state=closed]:animate-out',\n  'tw:data-[state=closed]:fade-out-0',\n  'tw:data-[state=closed]:zoom-out-95',\n\n  'tw:data-[side=bottom]:slide-in-from-top-2',\n  'tw:data-[side=left]:slide-in-from-right-2',\n  'tw:data-[side=right]:slide-in-from-left-2',\n  'tw:data-[side=top]:slide-in-from-bottom-2',\n);\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { DropdownMenuItemIndicator } from './DropdownMenuItemIndicator';\nimport { ItemIcon } from './ItemIcon';\nimport { itemVariants } from './styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  closeOnSelect?: boolean;\n  indicator?: 'switch' | 'checkbox' | 'check';\n  indicatorAlign?: 'start' | 'end';\n  isLoading?: boolean;\n};\n\nexport const DropdownMenuCheckboxItem = ({\n  className,\n  children,\n  checked,\n  closeOnSelect = false,\n  onSelect,\n  indicatorAlign = 'start',\n  indicator = 'checkbox',\n  isLoading = false,\n  ...props\n}: Props) => {\n  const isAtStart = indicatorAlign === 'start';\n  const indicatorEle = isLoading ? (\n    <ItemIcon className={isAtStart ? '' : 'tw:ml-auto'}>\n      <Loader2 className=\"tw:animate-spin\" />\n    </ItemIcon>\n  ) : (\n    <DropdownMenuItemIndicator variant={indicator} className={isAtStart ? '' : 'tw:ml-auto'} />\n  );\n\n  const handleSelect = (event: Event) => {\n    if (!closeOnSelect) event.preventDefault();\n    onSelect?.(event);\n  };\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      className={cn(itemVariants, className)}\n      checked={checked}\n      onSelect={handleSelect}\n      {...props}\n    >\n      {isAtStart && indicatorEle}\n      {children}\n      {!isAtStart && indicatorEle}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n};\n","import { createContext, use } from 'react';\n\nexport type DropdownMenuVariant = 'default' | 'argo';\n\ntype DropdownMenuContextType = {\n  variant: DropdownMenuVariant;\n};\n\nexport const DropdownMenuContext = createContext<DropdownMenuContextType>({\n  variant: 'default',\n});\n\nexport const useDropdownMenuContext = () => use(DropdownMenuContext);\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\nimport { useDropdownMenuContext } from './DropdownMenuContext';\nimport { contentVariants } from './styles';\n\ntype Props = Omit<\n  ComponentProps<typeof DropdownMenuPrimitive.Content>,\n  'forceMount' | 'asChild'\n> & {\n  forceMount?: boolean;\n  viewPortClassName?: string;\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuContent = ({\n  className,\n  sideOffset = 4,\n  forceMount,\n  children,\n  viewPortClassName,\n  container,\n  ...props\n}: Props) => {\n  const { variant } = useDropdownMenuContext();\n\n  return (\n    <DropdownMenuPrimitive.Portal forceMount={forceMount || undefined} container={container}>\n      <DropdownMenuPrimitive.Content\n        {...props}\n        data-variant={variant}\n        sideOffset={sideOffset}\n        className={contentVariants}\n      >\n        <ScrollArea\n          className={className}\n          viewPortClassName={cn(\n            'tw:p-2',\n            'tw:max-h-[var(--radix-dropdown-menu-content-available-height)]',\n            viewPortClassName,\n          )}\n          scrollBarClassName=\"tw:w-1.5\"\n        >\n          {children}\n        </ScrollArea>\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n","import type { ComponentProps, PointerEventHandler, ReactNode } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Root, Slottable } from '@radix-ui/react-slot';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { ItemIcon } from './ItemIcon';\nimport { itemVariants } from './styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  /**\n   * Fix for `autoFocus` on inputs not working correctly in modals.\n   * While the DropdownMenuItem was animating out and the modal was animating in, the dying DropdownMenuItem was constantly trying to steal focus while the Dialog was trying to correctly set the new focus.\n   * https://github.com/radix-ui/primitives/issues/2193#issuecomment-2758461323\n   */\n  asModalTrigger?: boolean;\n  /** Pass a Lucide icon node as a leading adornment. */\n  icon?: ReactNode;\n  isLoading?: boolean;\n  iconClassName?: string;\n};\n\nexport const DropdownMenuItem = ({\n  ref,\n  className,\n  asModalTrigger = false,\n  onSelect,\n  onPointerLeave,\n  onPointerMove,\n  children,\n  asChild,\n  icon,\n  iconClassName,\n  isLoading = false,\n  ...props\n}: Props) => {\n  const Comp = asChild ? Root : 'div';\n  const adornment = isLoading ? <Loader2 className=\"tw:animate-spin\" /> : icon;\n\n  const handleOnSelect = (event: Event) => {\n    // prevents dropdown menu from closing to prevent modal unmounting from dom\n    if (asModalTrigger) event.preventDefault();\n    onSelect?.(event);\n  };\n\n  const handlePointerLeave: PointerEventHandler<HTMLDivElement> = (event) => {\n    // prevents focus stealing from modal\n    if (asModalTrigger) event.preventDefault();\n    onPointerLeave?.(event);\n  };\n\n  const handlePointerMove: PointerEventHandler<HTMLDivElement> = (event) => {\n    // prevents focus stealing from modal\n    if (asModalTrigger) event.preventDefault();\n    onPointerMove?.(event);\n  };\n\n  return (\n    <DropdownMenuPrimitive.Item\n      {...props}\n      ref={ref}\n      onSelect={handleOnSelect}\n      onPointerLeave={handlePointerLeave}\n      onPointerMove={handlePointerMove}\n      className={cn(itemVariants, asChild && 'tw:text-inherit', className)}\n      asChild\n    >\n      <Comp>\n        {adornment && <ItemIcon className={iconClassName}>{adornment}</ItemIcon>}\n        <Slottable>{children}</Slottable>\n      </Comp>\n    </DropdownMenuPrimitive.Item>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst descriptionVariants = cva(\n  [\n    'tw:box-border',\n    'tw:ml-auto',\n    'tw:font-sans',\n    'tw:tracking-normal',\n    'tw:font-normal',\n    'tw:text-xs',\n    'tw:text-muted-foreground',\n  ],\n  {\n    variants: {\n      hideOnHover: {\n        true: ['tw:group-focus-within:hidden', 'tw:group-hover:hidden'],\n        false: [],\n      },\n    },\n    defaultVariants: {},\n  },\n);\n\ntype Props = ComponentProps<'span'> & {\n  hideOnHover?: boolean;\n};\n\nexport const DropdownMenuItemDescription = ({\n  className,\n  children,\n  hideOnHover = false,\n  ...props\n}: Props) => {\n  return (\n    <span {...props} className={cn(descriptionVariants({ hideOnHover }), className)}>\n      {children}\n    </span>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.Label>;\n\nexport const DropdownMenuLabel = ({ className, ...props }: Props) => {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn(\n        'tw:p-2',\n        'tw:font-medium',\n        'tw:text-xs',\n        'tw:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\ntype Props<Value> = Omit<\n  ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,\n  'value' | 'onValueChange' | 'defaultValue'\n> & {\n  value?: Value;\n  defaultValue?: Value;\n  onValueChange?: (value: Value) => void;\n};\n\nexport const DropdownMenuRadioGroup = <Value extends string = string>({\n  value,\n  defaultValue,\n  onValueChange,\n  ...props\n}: Props<Value>) => {\n  const handleChange = (value: string) => {\n    onValueChange?.(value as Value);\n  };\n\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      {...props}\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={handleChange}\n    />\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { Loader2 } from '../../../icons';\nimport { cn } from '../../../utils';\nimport { DropdownMenuItemIndicator } from '../DropdownMenuItemIndicator';\nimport { ItemIcon } from '../ItemIcon';\nimport { itemVariants } from '../styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  closeOnSelect?: boolean;\n  indicatorAlign?: 'start' | 'end';\n  indicator?: 'radio' | 'check' | 'none';\n  icon?: ReactNode;\n  iconClassName?: string;\n  isLoading?: boolean;\n};\n\nexport const DropdownMenuRadioItem = ({\n  className,\n  children,\n  closeOnSelect,\n  onSelect,\n  indicatorAlign = 'start',\n  indicator = 'radio',\n  icon,\n  iconClassName,\n  isLoading = false,\n  ...props\n}: Props) => {\n  const isAtStart = indicatorAlign === 'start';\n  const indicatorEle = isLoading ? (\n    <ItemIcon className={iconClassName}>\n      <Loader2 className=\"tw:animate-spin\" />\n    </ItemIcon>\n  ) : (\n    <DropdownMenuItemIndicator variant={indicator} />\n  );\n\n  const handleSelect = (event: Event) => {\n    if (!closeOnSelect) event.preventDefault();\n    onSelect?.(event);\n  };\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      className={cn(\n        itemVariants,\n        'tw:data-[state=checked]:cursor-default',\n        {\n          'tw:data-[state=checked]:bg-neutral-100': indicator === 'none',\n          // Semantic brand tint (flips under `[data-theme='dark']`) instead of a\n          // hardcoded `tw:bg-sky-100`, which stayed light in dark mode and left the\n          // checked item's text near-invisible.\n          'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary/10':\n            indicator === 'check',\n        },\n        className,\n      )}\n      onSelect={handleSelect}\n      {...props}\n    >\n      {isAtStart && indicatorEle}\n      {icon && <ItemIcon className={iconClassName}>{icon}</ItemIcon>}\n      <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-2\">{children}</span>\n      {!isAtStart && indicatorEle}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...props }: Props) => (\n  <DropdownMenuPrimitive.Separator\n    className={cn(\n      'tw:relative',\n      'tw:z-10',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:w-full',\n\n      // separator line\n      'tw:before:content-[\"\"]',\n      'tw:before:w-full',\n      'tw:before:h-px',\n\n      'tw:group-data-[variant=default]/dropdown-menu-content:py-2',\n      'tw:group-data-[variant=default]/dropdown-menu-content:before:bg-border',\n\n      'tw:group-data-[variant=argo]/dropdown-menu-content:py-1',\n      'tw:group-data-[variant=argo]/dropdown-menu-content:before:bg-border',\n\n      className,\n    )}\n    {...props}\n  />\n);\n","import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../../utils';\nimport { useDropdownMenuContext } from '../DropdownMenuContext';\nimport { contentVariants } from '../styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.SubContent>;\n\nexport const DropdownMenuSubContent = ({ className, ...props }: Props) => {\n  const { variant } = useDropdownMenuContext();\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        data-variant={variant}\n        className={cn(contentVariants, 'tw:z-[1041]', 'tw:p-2', className)}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { ChevronRight } from '../../../icons';\nimport { cn } from '../../../utils';\nimport { itemVariants } from '../styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;\n\nexport const DropdownMenuSubTrigger = ({ className, children, ...props }: Props) => {\n  return (\n    <DropdownMenuPrimitive.SubTrigger className={cn(itemVariants, className)} {...props}>\n      {children}\n      <ChevronRight className=\"tw:ml-auto tw:size-5\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Trigger } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Trigger>;\n\nexport const DropdownMenuTrigger = ({ ref, className, ...props }: Props) => (\n  <Trigger\n    {...props}\n    ref={ref}\n    data-slot=\"dropdown-menu-trigger\"\n    className={cn('tw:group/dropdown-menu-trigger', className)}\n  />\n);\n","import { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\nimport { Group, Root } from '@radix-ui/react-dropdown-menu';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem';\nimport { DropdownMenuContent } from './DropdownMenuContent';\nimport type { DropdownMenuVariant } from './DropdownMenuContext';\nimport { DropdownMenuContext } from './DropdownMenuContext';\nimport { DropdownMenuItem } from './DropdownMenuItem';\nimport { DropdownMenuItemDescription } from './DropdownMenuItemDescription';\nimport { DropdownMenuLabel } from './DropdownMenuLabel';\nimport { DropdownMenuRadioGroup, DropdownMenuRadioItem } from './DropdownMenuRadioGroup';\nimport { DropdownMenuSeparator } from './DropdownMenuSeparator';\nimport { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from './DropdownMenuSub';\nimport { DropdownMenuTrigger } from './DropdownMenuTrigger';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const DropdownMenu = ({\n  // change a default value to false, for modal property, as it is not used in most cases\n  modal = false,\n  ...props\n}: Props) => {\n  const effectiveVariant: DropdownMenuVariant = useArgoDesign() ? 'argo' : 'default';\n  const contextValue = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);\n\n  return (\n    <DropdownMenuContext value={contextValue}>\n      <Root {...props} modal={modal} />\n    </DropdownMenuContext>\n  );\n};\n\n/**\n * Main Layout\n */\nDropdownMenu.Trigger = DropdownMenuTrigger;\nDropdownMenu.Content = DropdownMenuContent;\nDropdownMenu.Group = Group;\n\n/**\n * Sub Layout\n */\nDropdownMenu.Sub = DropdownMenuSub;\nDropdownMenu.SubContent = DropdownMenuSubContent;\nDropdownMenu.SubTrigger = DropdownMenuSubTrigger;\n\n/**\n * Items can be used either Sub ar Main Layout\n */\nDropdownMenu.Separator = DropdownMenuSeparator;\nDropdownMenu.Label = DropdownMenuLabel;\nDropdownMenu.Item = DropdownMenuItem;\nDropdownMenu.CheckboxItem = DropdownMenuCheckboxItem;\nDropdownMenu.RadioGroup = DropdownMenuRadioGroup;\nDropdownMenu.RadioItem = DropdownMenuRadioItem;\n\n// item content\nDropdownMenu.ItemDescription = DropdownMenuItemDescription;\n"],"mappings":"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"}

package/dist/FieldBox-D7DYtX_m.js

@@ -0,0 +1,70 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/FieldBox/FieldBoxDescription.tsx
+const FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	...props,
+	"data-slot": "field-box-description",
+	className: cn("tw:text-xs", "tw:text-muted-foreground", "tw:group-has-[:disabled]/field-box:opacity-50", className)
+});
+//#endregion
+//#region src/components/FieldBox/FieldBoxTitle.tsx
+const FieldBoxTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	...props,
+	"data-slot": "field-box-title",
+	className: cn("tw:text-sm", "tw:font-medium", "tw:text-foreground", "tw:group-has-[:disabled]/field-box:cursor-not-allowed", "tw:group-has-[:disabled]/field-box:opacity-50", className)
+});
+//#endregion
+//#region src/components/FieldBox/styles.ts
+const fieldBoxVariants = cva([
+	"tw:group/field-box",
+	"tw:m-0",
+	"tw:inline-flex",
+	"tw:gap-3",
+	"tw:items-start",
+	"tw:cursor-pointer",
+	"tw:select-none",
+	"tw:has-[:disabled]:cursor-not-allowed"
+], {
+	variants: { variant: {
+		default: [],
+		boxed: [
+			"tw:rounded-lg",
+			"tw:border",
+			"tw:border-solid",
+			"tw:border-border",
+			"tw:p-3",
+			"tw:transition-colors",
+			"tw:has-[[data-state=checked]]:border-primary",
+			"tw:has-[[data-state=checked]]:bg-accent",
+			"tw:has-[[data-state=indeterminate]]:border-primary",
+			"tw:has-[[data-state=indeterminate]]:bg-accent"
+		]
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+//#region src/components/FieldBox/FieldBox.tsx
+const FieldBoxRoot = ({ ref, className, variant, position = "start", control, children, ...rest }) => /* @__PURE__ */ jsxs("label", {
+	...rest,
+	ref,
+	className: cn(fieldBoxVariants({
+		variant,
+		className
+	}), position === "end" && "tw:flex-row-reverse"),
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "tw:inline-flex tw:min-h-5 tw:shrink-0 tw:items-center tw:group-has-[[data-slot=field-box-description]]/field-box:mt-0.5",
+		children: control
+	}), children != null && /* @__PURE__ */ jsx("span", {
+		className: "tw:flex tw:flex-1 tw:flex-col tw:gap-0.5",
+		children
+	})]
+});
+const FieldBox = Object.assign(FieldBoxRoot, {
+	Title: FieldBoxTitle,
+	Description: FieldBoxDescription
+});
+//#endregion
+export { FieldBox };
+
+//# sourceMappingURL=FieldBox-D7DYtX_m.js.map

package/dist/FieldBox-D7DYtX_m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBox-D7DYtX_m.js","names":[],"sources":["../src/components/FieldBox/FieldBoxDescription.tsx","../src/components/FieldBox/FieldBoxTitle.tsx","../src/components/FieldBox/styles.ts","../src/components/FieldBox/FieldBox.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const FieldBoxDescription = ({ className, ...props }: Props) => (\n  <span\n    {...props}\n    data-slot=\"field-box-description\"\n    className={cn(\n      'tw:text-xs',\n      'tw:text-muted-foreground',\n      'tw:group-has-[:disabled]/field-box:opacity-50',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const FieldBoxTitle = ({ className, ...props }: Props) => (\n  <span\n    {...props}\n    data-slot=\"field-box-title\"\n    className={cn(\n      'tw:text-sm',\n      'tw:font-medium',\n      'tw:text-foreground',\n      'tw:group-has-[:disabled]/field-box:cursor-not-allowed',\n      'tw:group-has-[:disabled]/field-box:opacity-50',\n      className,\n    )}\n  />\n);\n","import { cva } from 'class-variance-authority';\n\nexport const fieldBoxVariants = cva(\n  [\n    'tw:group/field-box',\n    'tw:m-0',\n    'tw:inline-flex',\n    'tw:gap-3',\n    'tw:items-start',\n    'tw:cursor-pointer',\n    'tw:select-none',\n    'tw:has-[:disabled]:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      variant: {\n        default: [],\n        boxed: [\n          'tw:rounded-lg',\n          'tw:border',\n          'tw:border-solid',\n          'tw:border-border',\n          'tw:p-3',\n          'tw:transition-colors',\n          'tw:has-[[data-state=checked]]:border-primary',\n          'tw:has-[[data-state=checked]]:bg-accent',\n          'tw:has-[[data-state=indeterminate]]:border-primary',\n          'tw:has-[[data-state=indeterminate]]:bg-accent',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { FieldBoxDescription } from './FieldBoxDescription';\nimport { FieldBoxTitle } from './FieldBoxTitle';\nimport { fieldBoxVariants } from './styles';\n\ntype Props = {\n  control: ReactNode;\n  position?: 'start' | 'end';\n} & ComponentProps<'label'> &\n  VariantProps<typeof fieldBoxVariants>;\n\nconst FieldBoxRoot = ({\n  ref,\n  className,\n  variant,\n  position = 'start',\n  control,\n  children,\n  ...rest\n}: Props) => (\n  <label\n    {...rest}\n    ref={ref}\n    className={cn(\n      fieldBoxVariants({ variant, className }),\n      position === 'end' && 'tw:flex-row-reverse',\n    )}\n  >\n    <span className=\"tw:inline-flex tw:min-h-5 tw:shrink-0 tw:items-center tw:group-has-[[data-slot=field-box-description]]/field-box:mt-0.5\">\n      {control}\n    </span>\n    {children != null && (\n      <span className=\"tw:flex tw:flex-1 tw:flex-col tw:gap-0.5\">{children}</span>\n    )}\n  </label>\n);\n\nexport const FieldBox = Object.assign(FieldBoxRoot, {\n  Title: FieldBoxTitle,\n  Description: FieldBoxDescription,\n});\n"],"mappings":";;;;AAMA,MAAa,uBAAuB,EAAE,WAAW,GAAG,YAClD,oBAAC,QAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,cACA,4BACA,iDACA,SACF;AACD,CAAA;;;ACVH,MAAa,iBAAiB,EAAE,WAAW,GAAG,YAC5C,oBAAC,QAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,cACA,kBACA,sBACA,yDACA,iDACA,SACF;AACD,CAAA;;;AChBH,MAAa,mBAAmB,IAC9B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,SAAS,CAAC;EACV,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;;ACpBA,MAAM,gBAAgB,EACpB,KACA,WACA,SACA,WAAW,SACX,SACA,UACA,GAAG,WAEH,qBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GACT,iBAAiB;EAAE;EAAS;CAAU,CAAC,GACvC,aAAa,SAAS,qBACxB;CANF,UAAA,CAQE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA,GACL,YAAY,QACX,oBAAC,QAAD;EAAM,WAAU;EAA4C;CAAe,CAAA,CAExE;;AAGT,MAAa,WAAW,OAAO,OAAO,cAAc;CAClD,OAAO;CACP,aAAa;AACf,CAAC"}

package/dist/FieldItem-CAPj9lj3.d.ts

@@ -0,0 +1,111 @@
+import { ReactNode } from "react";
+import { Brand } from "@keboola/brand-registry";
+//#region src/components/ThemeProvider/types.d.ts
+type BrandId = string;
+type ResolvedColorScheme = 'light' | 'dark';
+type ColorScheme = 'system' | ResolvedColorScheme;
+type Tokens = Record<string, string>;
+type Theme = Pick<Brand, 'id' | 'name' | 'shell' | 'logo'>;
+//#endregion
+//#region src/components/MergeEditor/constants.d.ts
+declare const CHUNK_TYPE: {
+  readonly UNCHANGED: 'unchanged';
+  readonly ADDED: 'added';
+  readonly REMOVED: 'removed';
+};
+type ChunkType = (typeof CHUNK_TYPE)[keyof typeof CHUNK_TYPE];
+type DiffChunk = {
+  type: ChunkType;
+  value: string;
+  /** 1-indexed start line in the old (left) text */
+  oldStart: number;
+  /** 1-indexed end line in the old (left) text */
+  oldEnd: number;
+  /** 1-indexed start line in the new (right) text */
+  newStart: number;
+  /** 1-indexed end line in the new (right) text */
+  newEnd: number;
+};
+/**
+ * A paired conflict: adjacent REMOVED + ADDED chunks from diffLines,
+ * representing a section that was modified. If only one side exists,
+ * the other is empty (pure insertion or deletion).
+ */
+type MergeConflict = {
+  id: string;
+  oldValue: string;
+  oldStartLine: number;
+  oldEndLine: number;
+  newValue: string;
+  newStartLine: number;
+  newEndLine: number;
+};
+declare const CHANGE_CLASS: {
+  readonly SAFE: 'safe';
+  readonly CONFLICT: 'conflict';
+};
+type ChangeClassification = (typeof CHANGE_CLASS)[keyof typeof CHANGE_CLASS];
+//#endregion
+//#region src/blocks/Form/connectors/FieldItem.d.ts
+/**
+ * The a11y wiring `FieldItem` derives from the field and hands back to the control — spread it onto
+ * whatever element the field renders. Callers never author these attributes themselves.
+ */
+type FieldControlProps = {
+  id: string;
+  name: string;
+  'aria-required'?: true;
+  'aria-invalid'?: true;
+  'aria-describedby'?: string;
+  /** Present only under `labelling: 'aria-labelledby'` — see the prop. */
+  'aria-labelledby'?: string;
+};
+/** Which marker sits next to the label. Purely visual — `aria-required` is driven by `required`. */
+type RequiredMark = 'required' | 'optional' | 'hidden';
+/**
+ * How the control takes its accessible name from the label.
+ *
+ * - `'for'` (default) — `<label for>` points at the control's `id`. Correct for the *labelable*
+ *   elements: `input`, `textarea`, `select`, `button`, and anything rendering one.
+ * - `'aria-labelledby'` — the label gets an id and it comes back in `control['aria-labelledby']`,
+ *   with no `for` emitted. For controls that are **not** labelable elements: a CodeMirror or Lexical
+ *   editable region, or a composite widget whose focusable node is a `div[role]`. `<label for>`
+ *   pointing at one of those is invalid HTML and silently names nothing.
+ */
+type Labelling = 'for' | 'aria-labelledby';
+type Props = {
+  label?: ReactNode;
+  /**
+   * Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a
+   * "Forgot password?" link beside a Password label. Presentational placement only; it is a sibling
+   * of the `<Label>`, not part of the field's accessible name. Provide an interactive element
+   * (`ButtonInline` / `Link`).
+   */
+  action?: ReactNode;
+  required?: boolean;
+  /**
+   * Which marker to show beside the label — gated by `required` so it never lies: `'required'`
+   * renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it
+   * is not; `'hidden'` renders neither. Defaults to `'required'`.
+   */
+  requiredMark?: RequiredMark;
+  /** See {@link Labelling}. Defaults to `'for'`. */
+  labelling?: Labelling;
+  help?: ReactNode;
+  tooltip?: ReactNode;
+  className?: string;
+  'aria-describedby'?: string;
+  children: (control: FieldControlProps) => ReactNode;
+};
+/**
+ * The frame props a connector re-exposes to its own callers.
+ *
+ * - `labelling` is not among them: which mechanism names the control follows from what the control
+ *   *is*, so the connector picks it, not the call site.
+ * - Leaving it in would type-check and do nothing — no connector forwards it — and land in the rest
+ *   spread instead, which for `TextField` / `TextareaField` reaches the DOM `<input>`.
+ */
+type FieldItemProps = Omit<Props, 'children' | 'labelling'>;
+//#endregion
+export { BrandId, ChangeClassification, ColorScheme, DiffChunk, FieldItemProps, MergeConflict, ResolvedColorScheme, Theme, Tokens };
+//# sourceMappingURL=FieldItem-CAPj9lj3.d.ts.map