@keboola/design 11.0.0 → 11.0.1

package/dist/FullScreenModal-CJa2VkJ2.js

@@ -0,0 +1,96 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { ChevronLeft } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { Truncated } from "./internal/components/Truncated.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/FullScreenModal/FullScreenModalBody.tsx
+const FullScreenModalBody = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("tw:flex-1 tw:min-h-0 tw:overflow-auto", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/components/FullScreenModal/FullScreenModalHeader.tsx
+const DEFAULT_TITLE_STYLES = "tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden";
+const FullScreenModalHeader = ({ title, titleClassName, titleWrapperClassName, defaultTitleStyles = true, isTitleWithIcon = false, children, onClose, className, showPreviousTitle = true, ...props }) => {
+	const previousTitle = useMemo(() => {
+		const modals = Array.from(document.querySelectorAll("[data-fullscreen-modal]"));
+		return showPreviousTitle && modals?.length > 0 && modals.at(-1)?.querySelector("[data-modal-title]")?.textContent;
+	}, [showPreviousTitle]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("tw:flex tw:flex-1 tw:items-center", titleWrapperClassName),
+			children: [previousTitle && onClose && /* @__PURE__ */ jsx(Button, {
+				onClick: onClose,
+				size: "icon",
+				className: "tw:mr-6",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "tw:size-4" })
+			}), /* @__PURE__ */ jsx("div", {
+				className: "tw:w-full",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("tw:m-0", defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName),
+					"data-modal-title": true,
+					children: [previousTitle && onClose && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						className: "tailwindcss-preflight",
+						"aria-label": `Go back to ${previousTitle}`,
+						children: /* @__PURE__ */ jsx(Truncated, {
+							text: previousTitle,
+							className: cn("tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline", "tw:hover:text-foreground tw:hover:no-underline", isTitleWithIcon && "tw:ml-14")
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: cn("tw:flex tw:items-center", { "tw:[&>img]:-mt-6": previousTitle }),
+						children: title
+					})]
+				})
+			})]
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/FullScreenModal/FullScreenModalRoot.tsx
+const BODY_LOCK_CLASS = "full-screen-modal-open";
+const FullScreenModalRoot = ({ children, className, lockBodyScroll = true, onEscapeKeyDown, onKeyDown, ...props }) => {
+	const modalRef = useRef(null);
+	const renderArgo = useArgoDesign();
+	useEffect(() => {
+		const modalElement = modalRef.current;
+		if (lockBodyScroll) document.body.classList.add(BODY_LOCK_CLASS);
+		return () => {
+			if (!Array.from(document.querySelectorAll("[data-fullscreen-modal]")).some((el) => el !== modalElement)) document.body.classList.remove(BODY_LOCK_CLASS);
+		};
+	}, [lockBodyScroll]);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape" && !event.defaultPrevented) onEscapeKeyDown?.(event);
+	};
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		...props,
+		ref: modalRef,
+		role: "dialog",
+		"aria-modal": "true",
+		tabIndex: -1,
+		"data-fullscreen-modal": true,
+		"data-argo": renderArgo,
+		onKeyDown: handleKeyDown,
+		className: cn("tailwindcss-preflight", "tw:fixed", "tw:inset-0", "tw:z-[1039]", "tw:flex", "tw:flex-col", "tw:bg-background", "tw:text-foreground", "tw:focus-visible:outline-hidden", className),
+		children
+	}), document.body);
+};
+//#endregion
+//#region src/components/FullScreenModal/FullScreenModal.tsx
+const FullScreenModal = Object.assign(FullScreenModalRoot, {
+	Header: FullScreenModalHeader,
+	Body: FullScreenModalBody
+});
+//#endregion
+export { FullScreenModal, FullScreenModalBody, FullScreenModalHeader };
+
+//# sourceMappingURL=FullScreenModal-CJa2VkJ2.js.map

package/dist/FullScreenModal-CJa2VkJ2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenModal-CJa2VkJ2.js","names":[],"sources":["../src/components/FullScreenModal/FullScreenModalBody.tsx","../src/components/FullScreenModal/FullScreenModalHeader.tsx","../src/components/FullScreenModal/FullScreenModalRoot.tsx","../src/components/FullScreenModal/FullScreenModal.tsx"],"sourcesContent":["import type { HTMLAttributes, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = HTMLAttributes<HTMLDivElement>;\n\nexport const FullScreenModalBody = ({\n  ref,\n  className,\n  children,\n  ...props\n}: Props & { ref?: Ref<HTMLDivElement> }) => (\n  <div ref={ref} className={cn('tw:flex-1 tw:min-h-0 tw:overflow-auto', className)} {...props}>\n    {children}\n  </div>\n);\n","import { useMemo } from 'react';\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport { ChevronLeft } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Truncated } from '../Truncated';\n\nconst DEFAULT_TITLE_STYLES =\n  'tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden';\n\ntype Props = PropsWithChildren<\n  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n    title: ReactNode;\n    titleClassName?: string;\n    titleWrapperClassName?: string;\n    defaultTitleStyles?: boolean;\n    isTitleWithIcon?: boolean;\n    onClose?: () => void;\n    showPreviousTitle?: boolean;\n  }\n>;\n\nexport const FullScreenModalHeader = ({\n  title,\n  titleClassName,\n  titleWrapperClassName,\n  defaultTitleStyles = true,\n  isTitleWithIcon = false,\n  children,\n  onClose,\n  className,\n  showPreviousTitle = true,\n  ...props\n}: Props) => {\n  const previousTitle = useMemo(() => {\n    const modals = Array.from(document.querySelectorAll('[data-fullscreen-modal]'));\n    return (\n      showPreviousTitle &&\n      modals?.length > 0 &&\n      modals.at(-1)?.querySelector('[data-modal-title]')?.textContent\n    );\n  }, [showPreviousTitle]);\n\n  return (\n    <div\n      className={cn('tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between', className)}\n      {...props}\n    >\n      <div className={cn('tw:flex tw:flex-1 tw:items-center', titleWrapperClassName)}>\n        {previousTitle && onClose && (\n          <Button onClick={onClose} size=\"icon\" className=\"tw:mr-6\">\n            <ChevronLeft className=\"tw:size-4\" />\n          </Button>\n        )}\n\n        <div className=\"tw:w-full\">\n          <div\n            className={cn('tw:m-0', defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName)}\n            data-modal-title\n          >\n            {previousTitle && onClose && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"tailwindcss-preflight\"\n                aria-label={`Go back to ${previousTitle}`}\n              >\n                <Truncated\n                  text={previousTitle}\n                  className={cn(\n                    'tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline',\n                    'tw:hover:text-foreground tw:hover:no-underline',\n                    isTitleWithIcon && 'tw:ml-14',\n                  )}\n                />\n              </button>\n            )}\n            <div\n              className={cn('tw:flex tw:items-center', {\n                'tw:[&>img]:-mt-6': previousTitle,\n              })}\n            >\n              {title}\n            </div>\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  /** Lock body scroll when modal is open. Default: true */\n  lockBodyScroll?: boolean;\n  /** Callback when ESC key is pressed */\n  onEscapeKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n};\n\nconst BODY_LOCK_CLASS = 'full-screen-modal-open';\n\nexport const FullScreenModalRoot = ({\n  children,\n  className,\n  lockBodyScroll = true,\n  onEscapeKeyDown,\n  onKeyDown,\n  ...props\n}: Props) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const renderArgo = useArgoDesign();\n\n  // Body scroll lock\n  useEffect(() => {\n    const modalElement = modalRef.current;\n\n    if (lockBodyScroll) {\n      document.body.classList.add(BODY_LOCK_CLASS);\n    }\n\n    return () => {\n      // Filter out the current modal because it may still be in the DOM\n      // when lockBodyScroll toggles from true to false (e.g. switching\n      // from full-screen to half-screen mode).\n      const hasOtherModals = Array.from(document.querySelectorAll('[data-fullscreen-modal]')).some(\n        (el) => el !== modalElement,\n      );\n\n      if (!hasOtherModals) {\n        document.body.classList.remove(BODY_LOCK_CLASS);\n      }\n    };\n  }, [lockBodyScroll]);\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.key === 'Escape' && !event.defaultPrevented) {\n      onEscapeKeyDown?.(event);\n    }\n  };\n\n  return createPortal(\n    <div\n      {...props}\n      ref={modalRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabIndex={-1}\n      data-fullscreen-modal\n      data-argo={renderArgo}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:fixed',\n        'tw:inset-0',\n        'tw:z-[1039]',\n        'tw:flex',\n        'tw:flex-col',\n        // One scheme-following surface for both chromes. The legacy branch used\n        // to pin `neutral-50`, which the dark scheme cannot reach — and its\n        // light value is within a shade of `background` anyway. `text-foreground`\n        // has to travel with it: the modal is portalled to `document.body`, so it\n        // inherits no app-level foreground and content would sit dark-on-dark.\n        'tw:bg-background',\n        'tw:text-foreground',\n        'tw:focus-visible:outline-hidden',\n        className,\n      )}\n    >\n      {children}\n    </div>,\n    document.body,\n  );\n};\n","import { FullScreenModalBody } from './FullScreenModalBody';\nimport { FullScreenModalHeader } from './FullScreenModalHeader';\nimport { FullScreenModalRoot } from './FullScreenModalRoot';\n\nexport const FullScreenModal = Object.assign(FullScreenModalRoot, {\n  Header: FullScreenModalHeader,\n  Body: FullScreenModalBody,\n});\n"],"mappings":";;;;;;;;;AAMA,MAAa,uBAAuB,EAClC,KACA,WACA,UACA,GAAG,YAEH,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,yCAAyC,SAAS;CAAG,GAAI;CACnF;AACE,CAAA;;;ACNP,MAAM,uBACJ;AAcF,MAAa,yBAAyB,EACpC,OACA,gBACA,uBACA,qBAAqB,MACrB,kBAAkB,OAClB,UACA,SACA,WACA,oBAAoB,MACpB,GAAG,YACQ;CACX,MAAM,gBAAgB,cAAc;EAClC,MAAM,SAAS,MAAM,KAAK,SAAS,iBAAiB,yBAAyB,CAAC;EAC9E,OACE,qBACA,QAAQ,SAAS,KACjB,OAAO,GAAG,EAAE,CAAC,EAAE,cAAc,oBAAoB,CAAC,EAAE;CAExD,GAAG,CAAC,iBAAiB,CAAC;CAEtB,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,iEAAiE,SAAS;EACxF,GAAI;EAFN,UAAA,CAIE,qBAAC,OAAD;GAAK,WAAW,GAAG,qCAAqC,qBAAqB;GAA7E,UAAA,CACG,iBAAiB,WAChB,oBAAC,QAAD;IAAQ,SAAS;IAAS,MAAK;IAAO,WAAU;IAC9C,UAAA,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA;GAC9B,CAAA,GAGV,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,OAAD;KACE,WAAW,GAAG,UAAU,sBAAsB,sBAAsB,cAAc;KAClF,oBAAA;KAFF,UAAA,CAIG,iBAAiB,WAChB,oBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAY,cAAc;MAE1B,UAAA,oBAAC,WAAD;OACE,MAAM;OACN,WAAW,GACT,4GACA,kDACA,mBAAmB,UACrB;MACD,CAAA;KACK,CAAA,GAEV,oBAAC,OAAD;MACE,WAAW,GAAG,2BAA2B,EACvC,oBAAoB,cACtB,CAAC;MAEA,UAAA;KACE,CAAA,CACF;;GACF,CAAA,CACF;EACJ,CAAA,GAAA,QACE;;AAET;;;AC5EA,MAAM,kBAAkB;AAExB,MAAa,uBAAuB,EAClC,UACA,WACA,iBAAiB,MACjB,iBACA,WACA,GAAG,YACQ;CACX,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,aAAa,cAAc;CAGjC,gBAAgB;EACd,MAAM,eAAe,SAAS;EAE9B,IAAI,gBACF,SAAS,KAAK,UAAU,IAAI,eAAe;EAG7C,aAAa;GAQX,IAAI,CAJmB,MAAM,KAAK,SAAS,iBAAiB,yBAAyB,CAAC,CAAC,CAAC,MACrF,OAAO,OAAO,YAGC,GAChB,SAAS,KAAK,UAAU,OAAO,eAAe;EAElD;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,iBAAiB,UAAyC;EAC9D,YAAY,KAAK;EACjB,IAAI,MAAM,QAAQ,YAAY,CAAC,MAAM,kBACnC,kBAAkB,KAAK;CAE3B;CAEA,OAAO,aACL,oBAAC,OAAD;EACE,GAAI;EACJ,KAAK;EACL,MAAK;EACL,cAAW;EACX,UAAU;EACV,yBAAA;EACA,aAAW;EACX,WAAW;EACX,WAAW,GACT,yBACA,YACA,cACA,eACA,WACA,eAMA,oBACA,sBACA,mCACA,SACF;EAEC;CACE,CAAA,GACL,SAAS,IACX;AACF;;;ACrFA,MAAa,kBAAkB,OAAO,OAAO,qBAAqB;CAChE,QAAQ;CACR,MAAM;AACR,CAAC"}

package/dist/HoverCard-WfDkLK1s.js

@@ -0,0 +1,31 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { jsx } from "react/jsx-runtime";
+import { Content, Portal, Root, Trigger } from "@radix-ui/react-hover-card";
+//#region src/components/HoverCard/HoverCardContent.tsx
+const HoverCardContent = ({ ref, className, align = "center", sideOffset = 4, children, ...props }) => {
+	const renderArgo = useArgoDesign();
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
+		ref,
+		align,
+		sideOffset,
+		"data-slot": "hover-card-content",
+		"data-argo": renderArgo,
+		className: cn("tailwindcss-preflight", "tw:group/hover-card-content", "tw:z-50", "tw:box-border", "tw:border", "tw:rounded-2xl", "tw:min-w-32", "tw:origin-(--radix-hover-card-content-transform-origin)", "tw:max-h-[var(--radix-hover-card-content-available-height)]", "tw:p-4", "tw:shadow-md", "tw:border-neutral-150 tw:bg-white", "tw:data-[argo=true]:border-solid tw:data-[argo=true]:border-border tw:data-[argo=true]:bg-popover tw:data-[argo=true]:text-popover-foreground", "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", "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:[&_svg.lucide:not([class*='tw:size-'])]:size-4", "tw:[&_svg]:shrink-0", className),
+		...props,
+		children
+	}) });
+};
+//#endregion
+//#region src/components/HoverCard/HoverCard.tsx
+const HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsx(Root, {
+	...rest,
+	openDelay,
+	closeDelay
+});
+HoverCard.Content = HoverCardContent;
+HoverCard.Trigger = Trigger;
+//#endregion
+export { HoverCard };
+
+//# sourceMappingURL=HoverCard-WfDkLK1s.js.map

package/dist/HoverCard-WfDkLK1s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard-WfDkLK1s.js","names":[],"sources":["../src/components/HoverCard/HoverCardContent.tsx","../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-hover-card';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = ComponentProps<typeof Content>;\n\nexport const HoverCardContent = ({\n  ref,\n  className,\n  align = 'center',\n  sideOffset = 4,\n  children,\n  ...props\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <Portal>\n      <Content\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        data-slot=\"hover-card-content\"\n        data-argo={renderArgo}\n        className={cn(\n          'tailwindcss-preflight',\n          'tw:group/hover-card-content',\n          'tw:z-50',\n\n          // border\n          'tw:box-border',\n          'tw:border',\n          'tw:rounded-2xl',\n\n          // sizing\n          'tw:min-w-32',\n          'tw:origin-(--radix-hover-card-content-transform-origin)',\n          'tw:max-h-[var(--radix-hover-card-content-available-height)]',\n\n          // padding + shared shadow\n          'tw:p-4',\n          'tw:shadow-md',\n\n          // legacy chrome — default\n          'tw:border-neutral-150 tw:bg-white',\n          // argo chrome overrides — semantic floating-panel tokens\n          'tw:data-[argo=true]:border-solid tw:data-[argo=true]:border-border tw:data-[argo=true]:bg-popover tw:data-[argo=true]:text-popover-foreground',\n\n          // directional animations\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          // 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          'tw:data-[state=closed]:animate-out',\n          'tw:data-[state=closed]:fade-out-0',\n          'tw:data-[state=closed]:zoom-out-95',\n\n          // Default size for nested Lucide icons; callers can override on the icon.\n          \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n          'tw:[&_svg]:shrink-0',\n\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Content>\n    </Portal>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Root, Trigger } from '@radix-ui/react-hover-card';\n\nimport { HoverCardContent } from './HoverCardContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }: Props) => (\n  <Root {...rest} openDelay={openDelay} closeDelay={closeDelay} />\n);\n\nHoverCard.Content = HoverCardContent;\nHoverCard.Trigger = Trigger;\n"],"mappings":";;;;;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,QAAQ,UACR,aAAa,GACb,UACA,GAAG,YACQ;CACX,MAAM,aAAa,cAAc;CACjC,OACE,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;EACO;EACE;EACK;EACZ,aAAU;EACV,aAAW;EACX,WAAW,GACT,yBACA,+BACA,WAGA,iBACA,aACA,kBAGA,eACA,2DACA,+DAGA,UACA,gBAGA,qCAEA,iJAGA,6CACA,6CACA,6CACA,6CAGA,mCACA,kCACA,mCACA,sCACA,qCACA,sCAGA,qDACA,uBAEA,SACF;EACA,GAAI;EAEH;CACM,CAAA,EACH,CAAA;AAEZ;;;ACpEA,MAAa,aAAa,EAAE,YAAY,KAAK,aAAa,KAAK,GAAG,WAChE,oBAAC,MAAD;CAAM,GAAI;CAAiB;CAAuB;AAAa,CAAA;AAGjE,UAAU,UAAU;AACpB,UAAU,UAAU"}

package/dist/InputGroup-BJWsI35s.js

@@ -0,0 +1,292 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import TextareaAutosize from "react-textarea-autosize";
+//#region src/components/InputGroup/InputGroupAddon.tsx
+const addonVariants = cva([
+	"tw:flex",
+	"tw:items-center",
+	"tw:gap-1",
+	"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
+	"tw:[&_svg]:shrink-0"
+], {
+	defaultVariants: { align: "inline-start" },
+	variants: { align: {
+		"inline-start": ["tw:order-first", "tw:[&:not(:empty)]:pl-4"],
+		"inline-end": ["tw:order-last", "tw:[&:not(:empty)]:pr-4"],
+		"block-start": [
+			"tw:order-first",
+			"tw:[&:not(:empty)]:w-full",
+			"tw:[&:not(:empty)]:px-4",
+			"tw:[&:not(:empty)]:py-1.5"
+		],
+		"block-end": [
+			"tw:order-last",
+			"tw:[&:not(:empty)]:w-full",
+			"tw:[&:not(:empty)]:px-4",
+			"tw:[&:not(:empty)]:py-1.5"
+		]
+	} }
+});
+const InputGroupAddon = ({ children, align = "inline-start", className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-align": align,
+	className: cn(addonVariants({
+		align,
+		className
+	})),
+	children
+});
+//#endregion
+//#region src/components/InputGroup/InputGroupButton.tsx
+const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	tabIndex,
+	ref,
+	variant: "invisible",
+	size: "icon-sm",
+	className: cn("tw:size-5", "tw:[&_svg]:text-muted-foreground", className)
+});
+//#endregion
+//#region src/components/InputGroup/InputGroupInput.tsx
+const InputGroupInput = ({ ref, className, ...inputProps }) => /* @__PURE__ */ jsx("input", {
+	...inputProps,
+	ref,
+	className: cn("tw:w-full", "tw:bg-transparent", "tw:outline-hidden", "tw:font-sans", "tw:text-sm", "tw:placeholder:text-neutral-400", "tw:placeholder:font-normal", "tw:disabled:cursor-not-allowed", className)
+});
+//#endregion
+//#region src/components/InputGroup/InputGroupText.tsx
+const InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	className: cn("tw:flex", "tw:items-center", "tw:gap-2", "tw:text-sm", "tw:text-muted-foreground", "tw:[&_svg]:pointer-events-none", "tw:[&_svg:not([class*=\"tw:size-\"])]:size-4", className),
+	...props
+});
+//#endregion
+//#region src/components/InputGroup/InputGroupTextArea.tsx
+const InputGroupTextArea = ({ ref, className, onChange, onValueChange, value, defaultValue, onBlur, onValueBlur, disableResize = false, minRows = 1, maxRows = 4, ...props }) => {
+	const handleChange = (event) => {
+		onValueChange?.(event.target.value);
+		onChange?.(event);
+	};
+	const handleBlur = (event) => {
+		onValueBlur?.(event.target.value);
+		onBlur?.(event);
+	};
+	return /* @__PURE__ */ jsx(TextareaAutosize, {
+		...props,
+		ref,
+		value: value ?? void 0,
+		defaultValue: defaultValue ?? void 0,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		minRows,
+		maxRows: maxRows === "unlimited" ? void 0 : maxRows,
+		className: cn("tw:w-full", "tw:bg-transparent", "tw:outline-hidden", "tw:px-4", "tw:font-sans", "tw:text-sm", "tw:placeholder:text-neutral-400", "tw:placeholder:font-normal", "tw:disabled:cursor-not-allowed", { "tw:resize-none": disableResize }, className)
+	});
+};
+//#endregion
+//#region src/components/InputGroup/InputGroup.tsx
+const inputGroupVariants = cva([
+	"tailwindcss-preflight",
+	"tw:group",
+	"tw:overflow-hidden",
+	"tw:box-border",
+	"tw:flex",
+	"tw:items-center",
+	"tw:rounded",
+	"tw:border",
+	"tw:border-solid",
+	"tw:border-input",
+	"tw:text-neutral-800",
+	"tw:transition",
+	"tw:has-[:is(input,textarea):focus]:ring-4",
+	"tw:has-[:is(input,textarea)[readonly]]:bg-neutral-150",
+	"tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0",
+	"tw:has-[:is(input,textarea)[readonly]]:border-neutral-150",
+	"tw:has-[:is(input,textarea):disabled]:cursor-not-allowed",
+	"tw:has-[textarea]:items-start",
+	"tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap",
+	"tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap",
+	"tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto",
+	"tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1",
+	"tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto",
+	"tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1",
+	"tw:[&>input]:px-4",
+	"tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2",
+	"tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2"
+], {
+	defaultVariants: {
+		variant: "primary",
+		state: "default",
+		sizing: "medium",
+		focusVariant: "default"
+	},
+	compoundVariants: [
+		{
+			variant: "secondary",
+			state: "error",
+			className: ["tw:bg-error-100"]
+		},
+		{
+			variant: "secondary",
+			state: "warning",
+			className: ["tw:bg-warning-100"]
+		},
+		{
+			variant: "primary",
+			state: "default",
+			focusVariant: "off",
+			className: ["tw:has-[:is(input,textarea):focus]:border-neutral-200"]
+		},
+		{
+			variant: "secondary",
+			state: "default",
+			focusVariant: "off",
+			className: ["tw:has-[:is(input,textarea):focus]:border-neutral-100"]
+		},
+		{
+			variant: ["primary", "secondary"],
+			state: "error",
+			focusVariant: "on",
+			className: ["tw:!border-error-500", "tw:!ring-error-200"]
+		},
+		{
+			variant: ["primary", "secondary"],
+			state: "warning",
+			focusVariant: "on",
+			className: ["tw:!border-warning-500", "tw:!ring-warning-200"]
+		},
+		{
+			variant: "argo",
+			state: "default",
+			className: ["tw:has-[:is(input,textarea):focus]:border-primary", "tw:has-[:is(input,textarea):focus]:ring-ring/50"]
+		},
+		{
+			variant: "argo",
+			state: "error",
+			className: [
+				"tw:border-destructive",
+				"tw:has-[:is(input,textarea):focus]:border-destructive",
+				"tw:has-[:is(input,textarea):focus]:ring-destructive/20"
+			]
+		},
+		{
+			variant: "argo",
+			focusVariant: "on",
+			className: ["tw:!border-primary", "tw:!ring-ring/50"]
+		},
+		{
+			variant: "argo",
+			state: "error",
+			focusVariant: "on",
+			className: ["tw:!border-destructive", "tw:!ring-destructive/20"]
+		},
+		{
+			variant: "argo",
+			state: "default",
+			focusVariant: "off",
+			className: ["tw:has-[:is(input,textarea):focus]:border-input"]
+		}
+	],
+	variants: {
+		focusVariant: {
+			default: [],
+			on: [
+				"tw:!border-ring",
+				"tw:!ring-ring/30",
+				"tw:!ring-4"
+			],
+			off: ["tw:has-[:is(input,textarea):focus]:!ring-0"]
+		},
+		variant: {
+			primary: [
+				"tw:bg-input-background",
+				"tw:text-foreground",
+				"tw:has-[:is(input,textarea)[readonly]]:bg-muted",
+				"tw:has-[:is(input,textarea)[readonly]]:border-input",
+				"tw:has-[:is(input,textarea):disabled]:opacity-40",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
+			],
+			secondary: [
+				"tw:bg-neutral-100",
+				"tw:border-neutral-100",
+				"tw:has-[:is(input,textarea):disabled]:opacity-40",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
+			],
+			argo: [
+				"tw:rounded-[var(--radius-lg,0.25rem)]",
+				"tw:bg-muted",
+				"tw:border-input",
+				"tw:text-foreground",
+				"tw:has-[:is(input,textarea):disabled]:opacity-50",
+				"tw:has-[:is(input,textarea)[readonly]]:bg-muted",
+				"tw:has-[:is(input,textarea)[readonly]]:border-input",
+				"tw:has-[:is(input,textarea)[readonly]:focus]:border-input",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive",
+				"tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20"
+			]
+		},
+		sizing: {
+			default: [
+				"tw:[&>:is(input,textarea)]:py-2.5",
+				"tw:[&>:is(input,textarea)]:leading-[18px]",
+				"tw:[&>textarea]:!min-h-[calc(2.5rem-2px)]"
+			],
+			small: [
+				"tw:[&>:is(input,textarea)]:py-2",
+				"tw:[&>:is(input,textarea)]:leading-[16px]",
+				"tw:[&>textarea]:!min-h-[calc(2rem-2px)]"
+			],
+			medium: [
+				"tw:[&>:is(input,textarea)]:py-2",
+				"tw:[&>:is(input,textarea)]:leading-[18px]",
+				"tw:[&>textarea]:!min-h-[calc(2.25rem-2px)]"
+			]
+		},
+		state: {
+			default: ["tw:has-[:is(input,textarea):focus]:border-ring", "tw:has-[:is(input,textarea):focus]:ring-ring/30"],
+			error: [
+				"tw:border-error-500",
+				"tw:has-[:is(input,textarea):focus]:border-error-500",
+				"tw:has-[:is(input,textarea):focus]:ring-error-200"
+			],
+			warning: [
+				"tw:border-warning-500",
+				"tw:has-[:is(input,textarea):focus]:border-warning-500",
+				"tw:has-[:is(input,textarea):focus]:ring-warning-200"
+			]
+		}
+	}
+});
+const InputGroupRoot = ({ ref, children, state, variant, sizing, focusVariant, className, ...props }) => {
+	const effectiveVariant = useArgoDesign() ? "argo" : variant;
+	const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cn(inputGroupVariants({
+			state,
+			variant: effectiveVariant,
+			sizing: effectiveSizing,
+			focusVariant,
+			className
+		})),
+		children
+	});
+};
+const InputGroup = InputGroupRoot;
+InputGroup.Input = InputGroupInput;
+InputGroup.Addon = InputGroupAddon;
+InputGroup.Button = InputGroupButton;
+InputGroup.TextArea = InputGroupTextArea;
+InputGroup.Text = InputGroupText;
+//#endregion
+export { InputGroup };
+
+//# sourceMappingURL=InputGroup-BJWsI35s.js.map

package/dist/InputGroup-BJWsI35s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup-BJWsI35s.js","names":[],"sources":["../src/components/InputGroup/InputGroupAddon.tsx","../src/components/InputGroup/InputGroupButton.tsx","../src/components/InputGroup/InputGroupInput.tsx","../src/components/InputGroup/InputGroupText.tsx","../src/components/InputGroup/InputGroupTextArea.tsx","../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\n// Padding only fires when the addon actually has content — keeps an empty\n// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.\nconst addonVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-1',\n\n    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.\n    \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n    'tw:[&_svg]:shrink-0',\n  ],\n  {\n    defaultVariants: {\n      align: 'inline-start',\n    },\n    variants: {\n      align: {\n        'inline-start': ['tw:order-first', 'tw:[&:not(:empty)]:pl-4'],\n        'inline-end': ['tw:order-last', 'tw:[&:not(:empty)]:pr-4'],\n        'block-start': [\n          'tw:order-first',\n          // `tw:w-full` needs to be empty-conditional too — when the addon\n          // has no content the root stays in flex-row, and a 100%-wide\n          // empty addon would claim half of the input row beside the input.\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n        'block-end': [\n          'tw:order-last',\n          'tw:[&:not(:empty)]:w-full',\n          'tw:[&:not(:empty)]:px-4',\n          'tw:[&:not(:empty)]:py-1.5',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const InputGroupAddon = ({\n  children,\n  align = 'inline-start',\n  className,\n  ...props\n}: Props) => (\n  <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype ButtonProps = ComponentProps<typeof Button>;\n\ntype Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;\n\nexport const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }: Props) => (\n  <Button\n    {...props}\n    tabIndex={tabIndex}\n    ref={ref}\n    variant=\"invisible\"\n    size=\"icon-sm\"\n    className={cn('tw:size-5', 'tw:[&_svg]:text-muted-foreground', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'input'>;\n\nexport const InputGroupInput = ({ ref, className, ...inputProps }: Props) => (\n  <input\n    {...inputProps}\n    ref={ref}\n    className={cn(\n      'tw:w-full',\n      'tw:bg-transparent',\n      'tw:outline-hidden',\n\n      // font\n      'tw:font-sans',\n      'tw:text-sm',\n\n      // placeholder\n      'tw:placeholder:text-neutral-400',\n      'tw:placeholder:font-normal',\n\n      // disabled\n      'tw:disabled:cursor-not-allowed',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const InputGroupText = ({ className, ...props }: Props) => (\n  <span\n    className={cn(\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-2',\n      'tw:text-sm',\n      'tw:text-muted-foreground',\n      'tw:[&_svg]:pointer-events-none',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { cn } from '../../utils';\n\ntype TextareaNativeProps = Omit<\n  ComponentProps<typeof TextareaAutosize>,\n  'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype Props = TextareaNativeProps & {\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string) => void;\n  onValueBlur?: (value: string) => void;\n  maxRows?: number | 'unlimited';\n  disableResize?: boolean;\n};\n\nexport const InputGroupTextArea = ({\n  ref,\n  className,\n  onChange,\n  onValueChange,\n  value,\n  defaultValue,\n  onBlur,\n  onValueBlur,\n  disableResize = false,\n  minRows = 1,\n  maxRows = 4,\n  ...props\n}: Props) => {\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueChange?.(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n    onValueBlur?.(event.target.value);\n    onBlur?.(event);\n  };\n\n  return (\n    <TextareaAutosize\n      {...props}\n      ref={ref}\n      value={value ?? undefined}\n      defaultValue={defaultValue ?? undefined}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      minRows={minRows}\n      maxRows={maxRows === 'unlimited' ? undefined : maxRows}\n      className={cn(\n        'tw:w-full',\n        'tw:bg-transparent',\n        'tw:outline-hidden',\n        'tw:px-4',\n\n        // font\n        'tw:font-sans',\n        'tw:text-sm',\n\n        // placeholder\n        'tw:placeholder:text-neutral-400',\n        'tw:placeholder:font-normal',\n\n        // disabled\n        'tw:disabled:cursor-not-allowed',\n        {\n          'tw:resize-none': disableResize,\n        },\n\n        className,\n      )}\n    />\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { InputGroupAddon } from './InputGroupAddon';\nimport { InputGroupButton } from './InputGroupButton';\nimport { InputGroupInput } from './InputGroupInput';\nimport { InputGroupText } from './InputGroupText';\nimport { InputGroupTextArea } from './InputGroupTextArea';\n\nconst inputGroupVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group',\n\n    'tw:overflow-hidden',\n    'tw:box-border',\n\n    // positioning\n    'tw:flex',\n    'tw:items-center',\n\n    // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with\n    // the brand radius token in the `argo` variant below.\n    'tw:rounded',\n    'tw:border',\n    'tw:border-solid',\n    // `border-input` rather than the fixed `neutral-200` — same light-scheme\n    // grey, but it follows the dark scheme too. The base text stays pinned:\n    // `secondary` and the readonly state below both fill with a fixed light\n    // grey, so a scheme-following text colour would go light-on-light there.\n    // `primary` opts into the token itself (and re-pins its readonly fill).\n    'tw:border-input',\n    'tw:text-neutral-800',\n    'tw:transition',\n\n    // focus\n    'tw:has-[:is(input,textarea):focus]:ring-4',\n\n    // readonly\n    'tw:has-[:is(input,textarea)[readonly]]:bg-neutral-150',\n    'tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0',\n    'tw:has-[:is(input,textarea)[readonly]]:border-neutral-150',\n\n    // disabled cursor (opacity owned by variant)\n    'tw:has-[:is(input,textarea):disabled]:cursor-not-allowed',\n\n    // textarea: top-align addons, allow vertical expansion, own its y-padding\n    'tw:has-[textarea]:items-start',\n\n    'tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap',\n    'tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto',\n    'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1',\n\n    'tw:[&>input]:px-4',\n    'tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2',\n    'tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2',\n  ],\n  {\n    defaultVariants: {\n      variant: 'primary',\n      state: 'default',\n      sizing: 'medium',\n      focusVariant: 'default',\n    },\n    compoundVariants: [\n      {\n        variant: 'secondary',\n        state: 'error',\n        className: ['tw:bg-error-100'],\n      },\n      {\n        variant: 'secondary',\n        state: 'warning',\n        className: ['tw:bg-warning-100'],\n      },\n      {\n        variant: 'primary',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-neutral-200'],\n      },\n      {\n        variant: 'secondary',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-neutral-100'],\n      },\n      {\n        variant: ['primary', 'secondary'],\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-error-500', 'tw:!ring-error-200'],\n      },\n      {\n        variant: ['primary', 'secondary'],\n        state: 'warning',\n        focusVariant: 'on',\n        className: ['tw:!border-warning-500', 'tw:!ring-warning-200'],\n      },\n      // --- argo ---\n      {\n        variant: 'argo',\n        state: 'default',\n        className: [\n          'tw:has-[:is(input,textarea):focus]:border-primary',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/50',\n        ],\n      },\n      {\n        variant: 'argo',\n        state: 'error',\n        className: [\n          'tw:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:border-destructive',\n          'tw:has-[:is(input,textarea):focus]:ring-destructive/20',\n        ],\n      },\n      {\n        variant: 'argo',\n        focusVariant: 'on',\n        className: ['tw:!border-primary', 'tw:!ring-ring/50'],\n      },\n      {\n        variant: 'argo',\n        state: 'error',\n        focusVariant: 'on',\n        className: ['tw:!border-destructive', 'tw:!ring-destructive/20'],\n      },\n      {\n        variant: 'argo',\n        state: 'default',\n        focusVariant: 'off',\n        className: ['tw:has-[:is(input,textarea):focus]:border-input'],\n      },\n    ],\n    variants: {\n      focusVariant: {\n        default: [],\n        on: ['tw:!border-ring', 'tw:!ring-ring/30', 'tw:!ring-4'],\n        off: ['tw:has-[:is(input,textarea):focus]:!ring-0'],\n      },\n      variant: {\n        primary: [\n          // The field-surface token — white in the light scheme, so this is a\n          // no-op there; the dark scheme gets a field fill, not a white slab.\n          'tw:bg-input-background',\n          'tw:text-foreground',\n          // The base readonly fill is a fixed light grey, which the scheme-following\n          // text above would sit on invisibly in dark. Re-pin to the same\n          // `muted`/`input` pair argo uses for exactly this reason.\n          'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n          'tw:has-[:is(input,textarea)[readonly]]:border-input',\n          'tw:has-[:is(input,textarea):disabled]:opacity-40',\n          // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n          // accessible path (mirrors the `state=\"error\"` legacy tokens). Higher specificity than\n          // the default focus selector, so it wins without `!important`.\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n        ],\n        secondary: [\n          'tw:bg-neutral-100',\n          'tw:border-neutral-100',\n          'tw:has-[:is(input,textarea):disabled]:opacity-40',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n        ],\n        argo: [\n          // argo follows the brand radius token (overrides the static base)\n          'tw:rounded-[var(--radius-lg,0.25rem)]',\n          // muted filled input surface — gray, distinct from white containers; not the app-background token.\n          // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a\n          // grey inset by design. Converging the two is a brand-value decision, not a component one.\n          'tw:bg-muted',\n          'tw:border-input',\n          'tw:text-foreground',\n          'tw:has-[:is(input,textarea):disabled]:opacity-50',\n          // readonly: keep the themed input surface/border. The base layer's fixed\n          // `neutral-150` (a light grey) is correct for the legacy light chrome but\n          // collides with argo's themed `foreground` text — light-on-light, invisible\n          // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo\n          // input uses (validated AA), so readonly stays legible in every scheme.\n          'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n          'tw:has-[:is(input,textarea)[readonly]]:border-input',\n          // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly\n          'tw:has-[:is(input,textarea)[readonly]:focus]:border-input',\n          // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n          // accessible path (uses the themeable `destructive` status token).\n          'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive',\n          'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20',\n        ],\n      },\n      sizing: {\n        default: [\n          'tw:[&>:is(input,textarea)]:py-2.5',\n          'tw:[&>:is(input,textarea)]:leading-[18px]',\n          'tw:[&>textarea]:!min-h-[calc(2.5rem-2px)]',\n        ],\n        small: [\n          'tw:[&>:is(input,textarea)]:py-2',\n          'tw:[&>:is(input,textarea)]:leading-[16px]',\n          'tw:[&>textarea]:!min-h-[calc(2rem-2px)]',\n        ],\n        medium: [\n          'tw:[&>:is(input,textarea)]:py-2',\n          'tw:[&>:is(input,textarea)]:leading-[18px]',\n          'tw:[&>textarea]:!min-h-[calc(2.25rem-2px)]',\n        ],\n      },\n      state: {\n        default: [\n          'tw:has-[:is(input,textarea):focus]:border-ring',\n          'tw:has-[:is(input,textarea):focus]:ring-ring/30',\n        ],\n        error: [\n          'tw:border-error-500',\n          'tw:has-[:is(input,textarea):focus]:border-error-500',\n          'tw:has-[:is(input,textarea):focus]:ring-error-200',\n        ],\n        warning: [\n          'tw:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:border-warning-500',\n          'tw:has-[:is(input,textarea):focus]:ring-warning-200',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentPropsWithRef<'div'> &\n  Omit<VariantProps<typeof inputGroupVariants>, 'variant'> & {\n    variant?: Exclude<VariantProps<typeof inputGroupVariants>['variant'], 'argo'>;\n  };\n\nconst InputGroupRoot = ({\n  ref,\n  children,\n  state,\n  variant,\n  sizing,\n  focusVariant,\n  className,\n  ...props\n}: Props) => {\n  const isArgo = useArgoDesign();\n  const effectiveVariant = isArgo ? 'argo' : variant;\n  const effectiveSizing = effectiveVariant === 'argo' ? 'medium' : sizing;\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cn(\n        inputGroupVariants({\n          state,\n          variant: effectiveVariant,\n          sizing: effectiveSizing,\n          focusVariant,\n          className,\n        }),\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const InputGroup = InputGroupRoot as typeof InputGroupRoot & {\n  Input: typeof InputGroupInput;\n  Addon: typeof InputGroupAddon;\n  Button: typeof InputGroupButton;\n  TextArea: typeof InputGroupTextArea;\n  Text: typeof InputGroupText;\n};\n\nInputGroup.Input = InputGroupInput;\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.TextArea = InputGroupTextArea;\nInputGroup.Text = InputGroupText;\n"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB,IACpB;CACE;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,eACT;CACA,UAAU,EACR,OAAO;EACL,gBAAgB,CAAC,kBAAkB,yBAAyB;EAC5D,cAAc,CAAC,iBAAiB,yBAAyB;EACzD,eAAe;GACb;GAIA;GACA;GACA;EACF;EACA,aAAa;GACX;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAIA,MAAa,mBAAmB,EAC9B,UACA,QAAQ,gBACR,WACA,GAAG,YAEH,oBAAC,OAAD;CAAK,GAAI;CAAO,cAAY;CAAO,WAAW,GAAG,cAAc;EAAE;EAAO;CAAU,CAAC,CAAC;CACjF;AACE,CAAA;;;AC9CP,MAAa,oBAAoB,EAAE,KAAK,WAAW,WAAW,IAAI,GAAG,YACnE,oBAAC,QAAD;CACE,GAAI;CACM;CACL;CACL,SAAQ;CACR,MAAK;CACL,WAAW,GAAG,aAAa,oCAAoC,SAAS;AACzE,CAAA;;;ACXH,MAAa,mBAAmB,EAAE,KAAK,WAAW,GAAG,iBACnD,oBAAC,SAAD;CACE,GAAI;CACC;CACL,WAAW,GACT,aACA,qBACA,qBAGA,gBACA,cAGA,mCACA,8BAGA,kCAEA,SACF;AACD,CAAA;;;ACtBH,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,QAAD;CACE,WAAW,GACT,WACA,mBACA,YACA,cACA,4BACA,kCACA,gDACA,SACF;CACA,GAAI;AACL,CAAA;;;ACAH,MAAa,sBAAsB,EACjC,KACA,WACA,UACA,eACA,OACA,cACA,QACA,aACA,gBAAgB,OAChB,UAAU,GACV,UAAU,GACV,GAAG,YACQ;CACX,MAAM,gBAAyD,UAAU;EACvE,gBAAgB,MAAM,OAAO,KAAK;EAClC,WAAW,KAAK;CAClB;CAEA,MAAM,cAAsD,UAAU;EACpE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,kBAAD;EACE,GAAI;EACC;EACL,OAAO,SAAS,KAAA;EAChB,cAAc,gBAAgB,KAAA;EAC9B,UAAU;EACV,QAAQ;EACC;EACT,SAAS,YAAY,cAAc,KAAA,IAAY;EAC/C,WAAW,GACT,aACA,qBACA,qBACA,WAGA,gBACA,cAGA,mCACA,8BAGA,kCACA,EACE,kBAAkB,cACpB,GAEA,SACF;CACD,CAAA;AAEL;;;ACjEA,MAAM,qBAAqB,IACzB;CACE;CACA;CAEA;CACA;CAGA;CACA;CAIA;CACA;CACA;CAMA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CAGA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW,CAAC,mBAAmB;EACjC;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,uDAAuD;EACrE;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,uDAAuD;EACrE;EACA;GACE,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;GACP,cAAc;GACd,WAAW,CAAC,wBAAwB,oBAAoB;EAC1D;EACA;GACE,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;GACP,cAAc;GACd,WAAW,CAAC,0BAA0B,sBAAsB;EAC9D;EAEA;GACE,SAAS;GACT,OAAO;GACP,WAAW,CACT,qDACA,iDACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;IACT;IACA;IACA;GACF;EACF;EACA;GACE,SAAS;GACT,cAAc;GACd,WAAW,CAAC,sBAAsB,kBAAkB;EACtD;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,0BAA0B,yBAAyB;EACjE;EACA;GACE,SAAS;GACT,OAAO;GACP,cAAc;GACd,WAAW,CAAC,iDAAiD;EAC/D;CACF;CACA,UAAU;EACR,cAAc;GACZ,SAAS,CAAC;GACV,IAAI;IAAC;IAAmB;IAAoB;GAAY;GACxD,KAAK,CAAC,4CAA4C;EACpD;EACA,SAAS;GACP,SAAS;IAGP;IACA;IAIA;IACA;IACA;IAIA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IAEJ;IAIA;IACA;IACA;IACA;IAMA;IACA;IAEA;IAGA;IACA;IACA;GACF;EACF;EACA,QAAQ;GACN,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,SAAS,CACP,kDACA,iDACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAOA,MAAM,kBAAkB,EACtB,KACA,UACA,OACA,SACA,QACA,cACA,WACA,GAAG,YACQ;CAEX,MAAM,mBADS,cACe,IAAI,SAAS;CAC3C,MAAM,kBAAkB,qBAAqB,SAAS,WAAW;CACjE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,mBAAmB;GACjB;GACA,SAAS;GACT,QAAQ;GACR;GACA;EACF,CAAC,CACH;EAEC;CACE,CAAA;AAET;AAEA,MAAa,aAAa;AAQ1B,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO"}

package/dist/Kbd-CxHAo1oo.js

@@ -0,0 +1,111 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { isMac } from "./utils-D0c5VAyF.js";
+import { Children, Fragment } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Kbd/KbdSeparator.tsx
+const KbdSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	...props,
+	className: cn("tw:text-xs tw:text-muted-foreground", className)
+});
+//#endregion
+//#region src/components/Kbd/KbdGroup.tsx
+const KbdGroup = ({ ref, className, children, separator, ...props }) => {
+	return /* @__PURE__ */ jsx("kbd", {
+		...props,
+		ref,
+		className: cn("tw:inline-flex", "tw:items-center", "tw:gap-1", className),
+		children: separator ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(KbdSeparator, { children: separator }), child] }, index)) : children
+	});
+};
+//#endregion
+//#region src/components/Kbd/styles.ts
+const kbdVariants = cva([
+	"tailwindcss-preflight",
+	"tw:pointer-events-none",
+	"tw:w-fit",
+	"tw:h-5",
+	"tw:min-w-5",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:gap-1",
+	"tw:shrink-0",
+	"tw:px-1",
+	"tw:[&_svg:not([class*=\"size-\"])]:size-2.5",
+	"tw:text-xs",
+	"tw:font-medium",
+	"tw:rounded"
+], {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "tw:bg-muted tw:text-muted-foreground",
+		primary: "tw:bg-white/20 tw:text-white"
+	} }
+});
+//#endregion
+//#region src/components/Kbd/Kbd.tsx
+const Kbd = ({ children, className, variant, ...rest }) => /* @__PURE__ */ jsx("kbd", {
+	...rest,
+	className: kbdVariants({
+		className,
+		variant
+	}),
+	children
+});
+Kbd.Group = KbdGroup;
+Kbd.Separator = KbdSeparator;
+//#endregion
+//#region src/components/Kbd/keyboardKeys.ts
+const KEY_DEFINITIONS = {
+	mod: {
+		mac: {
+			symbol: "⌘",
+			text: "Command"
+		},
+		windows: {
+			symbol: "Ctrl",
+			text: "Ctrl"
+		}
+	},
+	option: {
+		mac: {
+			symbol: "⌥",
+			text: "Option"
+		},
+		windows: {
+			symbol: "Alt",
+			text: "Alt"
+		}
+	},
+	shift: {
+		mac: {
+			symbol: "⇧",
+			text: "Shift"
+		},
+		windows: {
+			symbol: "⇧",
+			text: "Shift"
+		}
+	},
+	enter: {
+		mac: {
+			symbol: "⏎",
+			text: "Enter"
+		},
+		windows: {
+			symbol: "⏎",
+			text: "Enter"
+		}
+	}
+};
+const createKeyboardKeys = () => {
+	const keysObj = {};
+	for (const keyName of Object.keys(KEY_DEFINITIONS)) keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? "mac" : "windows"];
+	return keysObj;
+};
+const keys = createKeyboardKeys();
+//#endregion
+export { Kbd, kbdVariants, keys };
+
+//# sourceMappingURL=Kbd-CxHAo1oo.js.map

package/dist/Kbd-CxHAo1oo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd-CxHAo1oo.js","names":[],"sources":["../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/styles.ts","../src/components/Kbd/Kbd.tsx","../src/components/Kbd/keyboardKeys.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n  <span {...props} className={cn('tw:text-xs tw:text-muted-foreground', className)} />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n  return (\n    <kbd\n      {...props}\n      ref={ref}\n      className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n    >\n      {separator\n        ? // oxlint-disable-next-line react-x/no-children-to-array\n          Children.toArray(children).map((child, index) => (\n            // oxlint-disable-next-line\n            <Fragment key={index}>\n              {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </kbd>\n  );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n  [\n    'tailwindcss-preflight',\n    // style\n    'tw:pointer-events-none',\n    'tw:w-fit',\n    'tw:h-5',\n    'tw:min-w-5',\n\n    // layout\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-1',\n    'tw:shrink-0',\n\n    // spacing\n    'tw:px-1',\n    'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n    'tw:text-xs',\n    'tw:font-medium',\n\n    'tw:rounded',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: 'tw:bg-muted tw:text-muted-foreground',\n        primary: 'tw:bg-white/20 tw:text-white',\n      },\n    },\n  },\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, ...rest }: Props) => (\n  <kbd {...rest} className={kbdVariants({ className, variant })}>\n    {children}\n  </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { isMac } from '../../utils';\n\ntype KeyName = 'mod' | 'option' | 'shift' | 'enter';\ntype KeyRepresentation = { symbol: string; text: string };\n\ntype KeyDefinition = {\n  mac: KeyRepresentation;\n  windows: KeyRepresentation;\n};\n\nconst KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {\n  mod: {\n    mac: { symbol: '⌘', text: 'Command' },\n    windows: { symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  option: {\n    mac: { symbol: '⌥', text: 'Option' },\n    windows: { symbol: 'Alt', text: 'Alt' },\n  },\n  shift: {\n    mac: { symbol: '⇧', text: 'Shift' },\n    windows: { symbol: '⇧', text: 'Shift' },\n  },\n  enter: {\n    mac: { symbol: '⏎', text: 'Enter' },\n    windows: { symbol: '⏎', text: 'Enter' },\n  },\n};\n\nconst createKeyboardKeys = () => {\n  const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;\n\n  for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {\n    keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];\n  }\n\n  return keysObj;\n};\n\nexport const keys = createKeyboardKeys();\n"],"mappings":";;;;;;AAMA,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,QAAD;CAAM,GAAI;CAAO,WAAW,GAAG,uCAAuC,SAAS;AAAI,CAAA;;;ACErF,MAAa,YAAY,EAAE,KAAK,WAAW,UAAU,WAAW,GAAG,YAAmB;CACpF,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,kBAAkB,mBAAmB,YAAY,SAAS;EAEvE,UAAA,YAEG,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UAErC,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACpD,KACO,EAAA,GAHK,KAGL,CACX,IACD;CACD,CAAA;AAET;;;AC1BA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;EACT,SAAS;CACX,EACF;AACF,CACF;;;AC7BA,MAAa,OAAO,EAAE,UAAU,WAAW,SAAS,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,YAAY;EAAE;EAAW;CAAQ,CAAC;CACzD;AACE,CAAA;AAGP,IAAI,QAAQ;AACZ,IAAI,YAAY;;;ACNhB,MAAM,kBAAkD;CACtD,KAAK;EACH,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAU;EACpC,SAAS;GAAE,QAAQ;GAAQ,MAAM;EAAO;CAC1C;CACA,QAAQ;EACN,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAS;EACnC,SAAS;GAAE,QAAQ;GAAO,MAAM;EAAM;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;AACF;AAEA,MAAM,2BAA2B;CAC/B,MAAM,UAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,OAAO,KAAK,eAAe,GAC/C,QAAQ,WAAW,gBAAgB,QAAQ,CAAC,QAAQ,QAAQ;CAG9D,OAAO;AACT;AAEA,MAAa,OAAO,mBAAmB"}