@keboola/design 11.0.0 → 11.0.1

package/dist/DropdownMenu-B6ZbYvaM.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-white",
+		"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-neutral-200",
+		"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-neutral-400",
+		"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-neutral-400", "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-neutral-100", "tw:group-data-[variant=default]/dropdown-menu-content:focus:text-neutral-900", "tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-neutral-100", "tw:group-data-[variant=default]/dropdown-menu-content:hover:text-neutral-900", "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:shadow-md", "tw:data-[variant=default]:rounded-md", "tw:data-[variant=default]:bg-white", "tw:data-[variant=default]:border-neutral-100", "tw:data-[variant=default]:text-neutral-800", "tw:data-[variant=argo]:rounded-2xl", "tw:data-[variant=argo]:bg-popover", "tw:data-[variant=argo]:text-popover-foreground", "tw:data-[variant=argo]:border-border", "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-neutral-150", "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-B6ZbYvaM.js.map

package/dist/DropdownMenu-B6ZbYvaM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu-B6ZbYvaM.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-white',\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-neutral-200',\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-neutral-400',\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-neutral-400',\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-neutral-100',\n  'tw:group-data-[variant=default]/dropdown-menu-content:focus:text-neutral-900',\n  'tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-neutral-100',\n  'tw:group-data-[variant=default]/dropdown-menu-content:hover:text-neutral-900',\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:shadow-md',\n\n  // Legacy surface — fixed white panel.\n  'tw:data-[variant=default]:rounded-md',\n  'tw:data-[variant=default]:bg-white',\n  'tw:data-[variant=default]:border-neutral-100',\n  'tw:data-[variant=default]:text-neutral-800',\n  // Argo surface — semantic popover tokens (brand + dark aware).\n  'tw:data-[variant=argo]:rounded-2xl',\n  'tw:data-[variant=argo]:bg-popover',\n  'tw:data-[variant=argo]:text-popover-foreground',\n  'tw:data-[variant=argo]:border-border',\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-neutral-150',\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":";;;;;;;;;;;AAOA,MAAM,WAAW,IACf;CACE;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA,EACE,UAAU,EACR,SAAS;CACP,MAAM,CAAC;CACP,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;CACF;CACA,OAAO,CAAC,kDAAgD,yBAAyB;CACjF,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,QAAQ;EACN;EAGA;EACA;EACA;EACA;EACA;CACF;AACF,EACF,EACF,CACF;AAKA,MAAa,6BAA6B,EACxC,SACA,WACA,YAAY,gBACZ,GAAG,WACQ;CACX,MAAM,kBAAkB;EACtB,IAAI,YAAY,UAAU,OAAO;EACjC,IAAI,YAAY,SAAS,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,oBAAoB;EACxB,IAAI,gBAAgB,OAAO;EAE3B,OAAO,YAAY,UAAU,KAAA,IAAY;CAC3C,EAAA,CAAG;CAEH,IAAI,YAAY,QAAQ,OAAO;CAE/B,OACE,oBAAC,sBAAsB,eAAvB;EACE,GAAI;EACQ;EACZ,WAAW,SAAS;GAAE;GAAS;EAAU,CAAC;EAE1C,UAAA,oBAAC,UAAD,CAAW,CAAA;CACwB,CAAA;AAEzC;;;ACjGA,MAAa,YAAY,EAAE,WAAW,UAAU,GAAG,YACjD,oBAAC,QAAD;CACE,GAAI;CACJ,WAAW,GACT,kBACA,mBACA,qBACA,oBAGA,aACA,gDACA,0EACA,mEACA,gGACA,kFACA,SACF;CAEC;AACG,CAAA;;;AC1BR,MAAa,eAAe,GAE1B,yBACA,qBACA,YACA,WACA,eAGA,WACA,aACA,mBACA,YAKA,gDAEA,qBACA,kBACA,wBAGA,UAGA,gBACA,cAEA,wCACA,+BAEA,mCAEA,iEACA,8EACA,gFACA,8EACA,gFAEA,iEACA,8EACA,yEACA,0EACA,yEACA,wEACF;AAEA,MAAa,kBAAkB,GAC7B,yBACA,kCAEA,eAGA,WACA,eACA,8DAGA,kEACA,eAGA,aACA,gBAGA,wCACA,sCACA,gDACA,8CAEA,sCACA,qCACA,kDACA,wCAGA,mCACA,kCACA,mCAEA,sCACA,qCACA,sCAEA,6CACA,6CACA,6CACA,2CACF;;;AC7EA,MAAa,4BAA4B,EACvC,WACA,UACA,SACA,gBAAgB,OAChB,UACA,iBAAiB,SACjB,YAAY,YACZ,YAAY,OACZ,GAAG,YACQ;CACX,MAAM,YAAY,mBAAmB;CACrC,MAAM,eAAe,YACnB,oBAAC,UAAD;EAAU,WAAW,YAAY,KAAK;EACpC,UAAA,oBAAC,SAAD,EAAS,WAAU,kBAAmB,CAAA;CAC9B,CAAA,IAEV,oBAAC,2BAAD;EAA2B,SAAS;EAAW,WAAW,YAAY,KAAK;CAAe,CAAA;CAG5F,MAAM,gBAAgB,UAAiB;EACrC,IAAI,CAAC,eAAe,MAAM,eAAe;EACzC,WAAW,KAAK;CAClB;CAEA,OACE,qBAAC,sBAAsB,cAAvB;EACE,WAAW,GAAG,cAAc,SAAS;EAC5B;EACT,UAAU;EACV,GAAI;EAJN,UAAA;GAMG,aAAa;GACb;GACA,CAAC,aAAa;EACmB;;AAExC;;;AC9CA,MAAa,sBAAsB,cAAuC,EACxE,SAAS,UACX,CAAC;AAED,MAAa,+BAA+B,IAAI,mBAAmB;;;ACMnE,MAAa,uBAAuB,EAClC,WACA,aAAa,GACb,YACA,UACA,mBACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,YAAY,uBAAuB;CAE3C,OACE,oBAAC,sBAAsB,QAAvB;EAA8B,YAAY,cAAc,KAAA;EAAsB;EAC5E,UAAA,oBAAC,sBAAsB,SAAvB;GACE,GAAI;GACJ,gBAAc;GACF;GACZ,WAAW;GAEX,UAAA,oBAAC,YAAD;IACa;IACX,mBAAmB,GACjB,UACA,kEACA,iBACF;IACA,oBAAmB;IAElB;GACS,CAAA;EACiB,CAAA;CACH,CAAA;AAElC;;;AC5BA,MAAa,oBAAoB,EAC/B,KACA,WACA,iBAAiB,OACjB,UACA,gBACA,eACA,UACA,SACA,MACA,eACA,YAAY,OACZ,GAAG,YACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,YAAY,YAAY,oBAAC,SAAD,EAAS,WAAU,kBAAmB,CAAA,IAAI;CAExE,MAAM,kBAAkB,UAAiB;EAEvC,IAAI,gBAAgB,MAAM,eAAe;EACzC,WAAW,KAAK;CAClB;CAEA,MAAM,sBAA2D,UAAU;EAEzE,IAAI,gBAAgB,MAAM,eAAe;EACzC,iBAAiB,KAAK;CACxB;CAEA,MAAM,qBAA0D,UAAU;EAExE,IAAI,gBAAgB,MAAM,eAAe;EACzC,gBAAgB,KAAK;CACvB;CAEA,OACE,oBAAC,sBAAsB,MAAvB;EACE,GAAI;EACC;EACL,UAAU;EACV,gBAAgB;EAChB,eAAe;EACf,WAAW,GAAG,cAAc,WAAW,mBAAmB,SAAS;EACnE,SAAA;EAEA,UAAA,qBAAC,MAAD,EAAA,UAAA,CACG,aAAa,oBAAC,UAAD;GAAU,WAAW;GAAgB,UAAA;EAAoB,CAAA,GACvE,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B,EAAA,CAAA;CACoB,CAAA;AAEhC;;;ACrEA,MAAM,sBAAsB,IAC1B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM,CAAC,gCAAgC,uBAAuB;EAC9D,OAAO,CAAC;CACV,EACF;CACA,iBAAiB,CAAC;AACpB,CACF;AAMA,MAAa,+BAA+B,EAC1C,WACA,UACA,cAAc,OACd,GAAG,YACQ;CACX,OACE,oBAAC,QAAD;EAAM,GAAI;EAAO,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,GAAG,SAAS;EAC3E;CACG,CAAA;AAEV;;;AClCA,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAAmB;CACnE,OACE,oBAAC,sBAAsB,OAAvB;EACE,WAAW,GACT,UACA,kBACA,cACA,4BACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;ACRA,MAAa,0BAAyD,EACpE,OACA,cACA,eACA,GAAG,YACe;CAClB,MAAM,gBAAgB,UAAkB;EACtC,gBAAgB,KAAc;CAChC;CAEA,OACE,oBAAC,sBAAsB,YAAvB;EACE,GAAI;EACG;EACO;EACd,eAAe;CAChB,CAAA;AAEL;;;ACZA,MAAa,yBAAyB,EACpC,WACA,UACA,eACA,UACA,iBAAiB,SACjB,YAAY,SACZ,MACA,eACA,YAAY,OACZ,GAAG,YACQ;CACX,MAAM,YAAY,mBAAmB;CACrC,MAAM,eAAe,YACnB,oBAAC,UAAD;EAAU,WAAW;EACnB,UAAA,oBAAC,SAAD,EAAS,WAAU,kBAAmB,CAAA;CAC9B,CAAA,IAEV,oBAAC,2BAAD,EAA2B,SAAS,UAAY,CAAA;CAGlD,MAAM,gBAAgB,UAAiB;EACrC,IAAI,CAAC,eAAe,MAAM,eAAe;EACzC,WAAW,KAAK;CAClB;CAEA,OACE,qBAAC,sBAAsB,WAAvB;EACE,WAAW,GACT,cACA,0CACA;GACE,0CAA0C,cAAc;GAIxD,yFACE,cAAc;EAClB,GACA,SACF;EACA,UAAU;EACV,GAAI;EAfN,UAAA;GAiBG,aAAa;GACb,QAAQ,oBAAC,UAAD;IAAU,WAAW;IAAgB,UAAA;GAAe,CAAA;GAC7D,oBAAC,QAAD;IAAM,WAAU;IAAyD;GAAe,CAAA;GACvF,CAAC,aAAa;EACgB;;AAErC;;;AC7DA,MAAa,yBAAyB,EAAE,WAAW,GAAG,YACpD,oBAAC,sBAAsB,WAAvB;CACE,WAAW,GACT,eACA,WAGA,WACA,mBACA,qBACA,aAGA,4BACA,oBACA,kBAEA,8DACA,+EAEA,2DACA,uEAEA,SACF;CACA,GAAI;AACL,CAAA;;;AC/BH,MAAa,kBAAkB,sBAAsB;;;ACOrD,MAAa,0BAA0B,EAAE,WAAW,GAAG,YAAmB;CACxE,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,sBAAsB,QAAvB,EAAA,UACE,oBAAC,sBAAsB,YAAvB;EACE,gBAAc;EACd,WAAW,GAAG,iBAAiB,eAAe,UAAU,SAAS;EACjE,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC;;;ACXA,MAAa,0BAA0B,EAAE,WAAW,UAAU,GAAG,YAAmB;CAClF,OACE,qBAAC,sBAAsB,YAAvB;EAAkC,WAAW,GAAG,cAAc,SAAS;EAAG,GAAI;EAA9E,UAAA,CACG,UACD,oBAAC,cAAD,EAAc,WAAU,uBAAwB,CAAA,CAChB;;AAEtC;;;ACTA,MAAa,uBAAuB,EAAE,KAAK,WAAW,GAAG,YACvD,oBAAC,SAAD;CACE,GAAI;CACC;CACL,aAAU;CACV,WAAW,GAAG,kCAAkC,SAAS;AAC1D,CAAA;;;ACOH,MAAa,gBAAgB,EAE3B,QAAQ,OACR,GAAG,YACQ;CACX,MAAM,mBAAwC,cAAc,IAAI,SAAS;CACzE,MAAM,eAAe,eAAe,EAAE,SAAS,iBAAiB,IAAI,CAAC,gBAAgB,CAAC;CAEtF,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,QAAD;GAAM,GAAI;GAAc;EAAQ,CAAA;CACb,CAAA;AAEzB;;;;AAKA,aAAa,UAAU;AACvB,aAAa,UAAU;AACvB,aAAa,QAAQ;;;;AAKrB,aAAa,MAAM;AACnB,aAAa,aAAa;AAC1B,aAAa,aAAa;;;;AAK1B,aAAa,YAAY;AACzB,aAAa,QAAQ;AACrB,aAAa,OAAO;AACpB,aAAa,eAAe;AAC5B,aAAa,aAAa;AAC1B,aAAa,YAAY;AAGzB,aAAa,kBAAkB"}

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