@keboola/design 11.0.0 → 11.2.0

package/dist/Command-C0aZfVTq.js

@@ -0,0 +1,102 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { Check, Circle } from "./icons-Cek151jC.js";
+import { ScrollArea } from "./internal/components/ScrollArea.js";
+import { TextInput } from "./TextInput-CMuN1WfY.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Command, CommandInput, defaultFilter, useCommandState } from "cmdk";
+//#region src/blocks/Command/CommandContent.tsx
+const CommandContent = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("tw:flex", "tw:flex-col", "tw:p-2", "tw:group-data-[variant=argo]/command:p-4", "tw:gap-2", className)
+});
+//#endregion
+//#region src/blocks/Command/CommandEmpty.tsx
+const CommandEmpty = ({ ...props }) => /* @__PURE__ */ jsx(Command.Empty, { ...props });
+//#endregion
+//#region src/blocks/Command/CommandGroup.tsx
+const CommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(Command.Group, {
+	className: cn("tw:[&_[cmdk-group-heading]]:font-semibold", "tw:[&_[cmdk-group-heading]]:font-sans", "tw:[&_[cmdk-group-heading]]:px-4", "tw:[&_[cmdk-group-heading]]:py-0.5", "tw:[&_[cmdk-group-heading]]:uppercase", "tw:[&_[cmdk-group-heading]]:text-[11px]", "tw:[&_[cmdk-group-heading]]:text-muted-foreground", "tw:[&_[cmdk-group-heading]]:tracking-[1px]", "tw:[&_[cmdk-group-heading]]:border-b", "tw:[&_[cmdk-group-heading]]:border-border", "tw:[&_[cmdk-group-heading]]:my-2", className),
+	...props
+});
+//#endregion
+//#region src/blocks/Command/CommandInput.tsx
+const CommandInput$1 = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(CommandInput, {
+	ref,
+	asChild: true,
+	children: /* @__PURE__ */ jsx(TextInput, {
+		...props,
+		className: cn("tw:group-data-[variant=argo]/command:!bg-transparent", "tw:group-data-[variant=argo]/command:!border-transparent", "tw:group-data-[variant=argo]/command:!rounded-none", "tw:group-data-[variant=argo]/command:max-h-12", "tw:group-data-[variant=argo]/command:h-12", className)
+	})
+});
+//#endregion
+//#region src/blocks/Command/CommandItem/CheckIndicator.tsx
+const CheckIndicator = ({ variant = "default" }) => {
+	if (variant === "default") return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-variant": variant,
+		className: cn("tw:group/check-indicator", "tw:pointer-events-none", "tw:size-4", "tw:flex", "tw:items-center", "tw:justify-center", "tw:border", "tw:border-solid", "tw:rounded", "tw:group-data-[variant=default]/command:border-neutral-200", "tw:group-data-[variant=argo]/command:border-input", "tw:data-[variant=radio]:rounded-full", "tw:data-[variant=checkbox]:rounded", "tw:data-[variant=checkbox]:group-data-[checked=true]/command-item:border-primary", "tw:data-[variant=checkbox]:group-data-[checked=true]/command-item:bg-primary", "tw:shrink-0"),
+		children: variant === "checkbox" ? /* @__PURE__ */ jsx(Check, { className: cn("tw:hidden", "tw:size-3", "tw:stroke-[4px]", "tw:group-data-[checked=true]/command-item:block", "tw:group-data-[variant=checkbox]/check-indicator:text-primary-foreground") }) : /* @__PURE__ */ jsx(Circle, { className: cn("tw:hidden", "tw:size-3", "tw:fill-current", "tw:group-data-[checked=true]/command-item:block", "tw:group-data-[variant=radio]/check-indicator:text-primary") })
+	});
+};
+//#endregion
+//#region src/blocks/Command/CommandItem/CommandItem.tsx
+const CommandItem = ({ className, icon, children, checked = false, variant = "default", actions, ...props }) => /* @__PURE__ */ jsxs("div", {
+	className: "tw:group tw:flex tw:items-center tw:justify-center",
+	children: [/* @__PURE__ */ jsxs(Command.Item, {
+		...props,
+		"data-checked": checked,
+		"data-variant": variant,
+		className: cn("tw:group/command-item", "tw:peer/command-item", "tw:relative", "tw:flex", "tw:items-center", "tw:gap-2", "tw:flex-1", "tw:p-2", "tw:font-sans", "tw:text-sm", "tw:leading-6", "tw:cursor-pointer", "tw:transition-colors", "tw:select-none", "tw:outline-hidden", "tw:group-data-[variant=argo]/command:rounded-md", "tw:group-data-[variant=argo]/command:data-[selected=true]:bg-accent", "tw:group-data-[variant=argo]/command:data-[checked=true]:bg-accent", "tw:group-data-[variant=default]/command:rounded", "tw:group-data-[variant=default]/command:data-[selected=true]:bg-neutral-100", "tw:group-data-[variant=default]/command:data-[checked=true]:bg-neutral-100", "tw:aria-disabled:opacity-50", "tw:aria-disabled:cursor-not-allowed", "tw:aria-disabled:hover:bg-transparent", "tw:data-[checked=true]:aria-disabled:opacity-100", "tw:data-[checked=true]:aria-disabled:cursor-default", className),
+		children: [
+			/* @__PURE__ */ jsx(CheckIndicator, { variant }),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:text-muted-foreground tw:[&_svg:not([class*='tw:size-'])]:size-4",
+				children: icon
+			}),
+			children
+		]
+	}), actions && /* @__PURE__ */ jsx("span", {
+		"data-slot": "command-item-actions",
+		className: cn("tw:hidden", "tw:mx-2", "tw:group-hover:flex", "tw:peer-hover/command-item:flex", "tw:peer-data-[selected=true]/command-item:flex"),
+		children: actions
+	})]
+});
+//#endregion
+//#region src/blocks/Command/CommandList.tsx
+const CommandList = ({ ref, className, children, viewPortClassName, ...props }) => /* @__PURE__ */ jsx(ScrollArea, {
+	ref,
+	className: cn("tw:group-data-[variant=argo]/command:px-4", "tw:group-data-[variant=argo]/command:pb-4", className),
+	viewPortClassName: cn("tw:[&_[cmdk-list-sizer]]:flex", "tw:[&_[cmdk-list-sizer]]:flex-col", viewPortClassName),
+	children: /* @__PURE__ */ jsx(Command.List, {
+		...props,
+		children
+	})
+});
+//#endregion
+//#region src/blocks/Command/CommandSeparator.tsx
+const CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Command.Separator, {
+	className: cn("tw:h-px", "tw:bg-border", "tw:my-2", className),
+	...props
+});
+//#endregion
+//#region src/blocks/Command/Command.tsx
+const Command$1 = ({ className, ...rest }) => {
+	const effectiveVariant = useArgoDesign() ? "argo" : "default";
+	return /* @__PURE__ */ jsx(Command, {
+		"data-variant": effectiveVariant,
+		className: cn("tw:group/command", "tailwindcss-preflight", className),
+		...rest
+	});
+};
+Command$1.Content = CommandContent;
+Command$1.Separator = CommandSeparator;
+Command$1.List = CommandList;
+Command$1.Group = CommandGroup;
+Command$1.Empty = CommandEmpty;
+Command$1.Input = CommandInput$1;
+Command$1.Item = CommandItem;
+//#endregion
+export { Command$1 as Command, CommandGroup, CommandInput$1 as CommandInput, CommandItem, CommandList, defaultFilter, useCommandState };
+
+//# sourceMappingURL=Command-C0aZfVTq.js.map

package/dist/Command-C0aZfVTq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command-C0aZfVTq.js","names":["CommandPrimitive","CommandPrimitive","CommandInput","CmdInput","CommandPrimitive","CommandPrimitive","CommandPrimitive","Command","CommandPrimitive","CommandInput"],"sources":["../src/blocks/Command/CommandContent.tsx","../src/blocks/Command/CommandEmpty.tsx","../src/blocks/Command/CommandGroup.tsx","../src/blocks/Command/CommandInput.tsx","../src/blocks/Command/CommandItem/CheckIndicator.tsx","../src/blocks/Command/CommandItem/CommandItem.tsx","../src/blocks/Command/CommandList.tsx","../src/blocks/Command/CommandSeparator.tsx","../src/blocks/Command/Command.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const CommandContent = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    className={cn(\n      'tw:flex',\n      'tw:flex-col',\n      'tw:p-2',\n      'tw:group-data-[variant=argo]/command:p-4',\n      'tw:gap-2',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\ntype Props = ComponentProps<typeof CommandPrimitive.Empty>;\n\nexport const CommandEmpty = ({ ...props }: Props) => <CommandPrimitive.Empty {...props} />;\n","import type { ComponentProps } from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof CommandPrimitive.Group>;\n\nexport const CommandGroup = ({ className, ...props }: Props) => (\n  <CommandPrimitive.Group\n    className={cn(\n      'tw:[&_[cmdk-group-heading]]:font-semibold',\n      'tw:[&_[cmdk-group-heading]]:font-sans',\n      'tw:[&_[cmdk-group-heading]]:px-4',\n      'tw:[&_[cmdk-group-heading]]:py-0.5',\n      'tw:[&_[cmdk-group-heading]]:uppercase',\n      'tw:[&_[cmdk-group-heading]]:text-[11px]',\n      'tw:[&_[cmdk-group-heading]]:text-muted-foreground',\n      'tw:[&_[cmdk-group-heading]]:tracking-[1px]',\n      'tw:[&_[cmdk-group-heading]]:border-b',\n      'tw:[&_[cmdk-group-heading]]:border-border',\n      'tw:[&_[cmdk-group-heading]]:my-2',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { CommandInput as CmdInput } from 'cmdk';\n\nimport { cn } from '../../utils';\nimport { TextInput } from '../TextInput';\n\ntype Props = ComponentProps<typeof TextInput>;\n\nexport const CommandInput = ({ ref, className, ...props }: Props) => (\n  <CmdInput ref={ref} asChild>\n    <TextInput\n      {...props}\n      className={cn(\n        'tw:group-data-[variant=argo]/command:!bg-transparent',\n        'tw:group-data-[variant=argo]/command:!border-transparent',\n        'tw:group-data-[variant=argo]/command:!rounded-none',\n        'tw:group-data-[variant=argo]/command:max-h-12',\n        'tw:group-data-[variant=argo]/command:h-12',\n        className,\n      )}\n    />\n  </CmdInput>\n);\n","import { Check, Circle } from '../../../icons';\nimport { cn } from '../../../utils';\n\ntype Props = {\n  variant?: 'checkbox' | 'radio' | 'default';\n};\n\nexport const CheckIndicator = ({ variant = 'default' }: Props) => {\n  if (variant === 'default') return null;\n\n  return (\n    <span\n      data-variant={variant}\n      className={cn(\n        'tw:group/check-indicator',\n        // positioning\n        'tw:pointer-events-none',\n\n        // sizing\n        'tw:size-4',\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n\n        // border\n        'tw:border',\n        'tw:border-solid',\n        'tw:rounded',\n        'tw:group-data-[variant=default]/command:border-neutral-200',\n        'tw:group-data-[variant=argo]/command:border-input',\n\n        'tw:data-[variant=radio]:rounded-full',\n\n        'tw:data-[variant=checkbox]:rounded',\n        'tw:data-[variant=checkbox]:group-data-[checked=true]/command-item:border-primary',\n        'tw:data-[variant=checkbox]:group-data-[checked=true]/command-item:bg-primary',\n        'tw:shrink-0',\n      )}\n    >\n      {variant === 'checkbox' ? (\n        <Check\n          className={cn(\n            'tw:hidden',\n            // Lucide SVGs default to 24×24; constrain to the 16px indicator slot.\n            'tw:size-3',\n            'tw:stroke-[4px]',\n            'tw:group-data-[checked=true]/command-item:block',\n            'tw:group-data-[variant=checkbox]/check-indicator:text-primary-foreground',\n          )}\n        />\n      ) : (\n        <Circle\n          className={cn(\n            'tw:hidden',\n            // Lucide Circle is stroke-only — force fill to match the stroke so\n            // the indicator reads as a solid dot.\n            'tw:size-3',\n            'tw:fill-current',\n            'tw:group-data-[checked=true]/command-item:block',\n            'tw:group-data-[variant=radio]/check-indicator:text-primary',\n          )}\n        />\n      )}\n    </span>\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { cn } from '../../../utils';\n\nimport { CheckIndicator } from './CheckIndicator';\n\ntype Props = ComponentProps<typeof CommandPrimitive.Item> & {\n  icon?: ReactNode;\n  checked?: boolean;\n  variant?: ComponentProps<typeof CheckIndicator>['variant'];\n  actions?: ReactNode;\n};\n\nexport const CommandItem = ({\n  className,\n  icon,\n  children,\n  checked = false,\n  variant = 'default',\n  actions,\n  ...props\n}: Props) => (\n  <div className=\"tw:group tw:flex tw:items-center tw:justify-center\">\n    <CommandPrimitive.Item\n      {...props}\n      data-checked={checked}\n      data-variant={variant}\n      className={cn(\n        'tw:group/command-item',\n        'tw:peer/command-item',\n\n        // positioning\n        'tw:relative',\n        'tw:flex',\n        'tw:items-center',\n        'tw:gap-2',\n        'tw:flex-1',\n        'tw:p-2',\n\n        // typography\n        'tw:font-sans',\n        'tw:text-sm',\n        'tw:leading-6',\n        'tw:cursor-pointer',\n        'tw:transition-colors',\n        'tw:select-none',\n        'tw:outline-hidden',\n\n        'tw:group-data-[variant=argo]/command:rounded-md',\n        'tw:group-data-[variant=argo]/command:data-[selected=true]:bg-accent',\n        'tw:group-data-[variant=argo]/command:data-[checked=true]:bg-accent',\n\n        'tw:group-data-[variant=default]/command:rounded',\n        'tw:group-data-[variant=default]/command:data-[selected=true]:bg-neutral-100',\n        'tw:group-data-[variant=default]/command:data-[checked=true]:bg-neutral-100',\n\n        // disabled\n        'tw:aria-disabled:opacity-50',\n\n        'tw:aria-disabled:cursor-not-allowed',\n        'tw:aria-disabled:hover:bg-transparent',\n\n        // reset styles for checked and disabled\n        'tw:data-[checked=true]:aria-disabled:opacity-100',\n        'tw:data-[checked=true]:aria-disabled:cursor-default',\n        className,\n      )}\n    >\n      <CheckIndicator variant={variant} />\n      {icon && (\n        <span className=\"tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:text-muted-foreground tw:[&_svg:not([class*='tw:size-'])]:size-4\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </CommandPrimitive.Item>\n\n    {actions && (\n      <span\n        data-slot=\"command-item-actions\"\n        className={cn(\n          'tw:hidden',\n          'tw:mx-2',\n          'tw:group-hover:flex',\n          'tw:peer-hover/command-item:flex',\n          'tw:peer-data-[selected=true]/command-item:flex',\n        )}\n      >\n        {actions}\n      </span>\n    )}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { ScrollArea } from '../../components/ScrollArea';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof CommandPrimitive.List> &\n  Pick<ComponentProps<typeof ScrollArea>, 'viewPortClassName'>;\n\nexport const CommandList = ({ ref, className, children, viewPortClassName, ...props }: Props) => (\n  <ScrollArea\n    ref={ref}\n    className={cn(\n      'tw:group-data-[variant=argo]/command:px-4',\n      'tw:group-data-[variant=argo]/command:pb-4',\n      className,\n    )}\n    viewPortClassName={cn(\n      'tw:[&_[cmdk-list-sizer]]:flex',\n      'tw:[&_[cmdk-list-sizer]]:flex-col',\n      viewPortClassName,\n    )}\n  >\n    <CommandPrimitive.List {...props}>{children}</CommandPrimitive.List>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof CommandPrimitive.Separator>;\n\nexport const CommandSeparator = ({ className, ...props }: Props) => (\n  <CommandPrimitive.Separator\n    className={cn('tw:h-px', 'tw:bg-border', 'tw:my-2', className)}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { useArgoDesign } from '../../components/ThemeProvider/context';\nimport { cn } from '../../utils';\n\nimport { CommandContent } from './CommandContent';\nimport { CommandEmpty } from './CommandEmpty';\nimport { CommandGroup } from './CommandGroup';\nimport { CommandInput } from './CommandInput';\nimport { CommandItem } from './CommandItem';\nimport { CommandList } from './CommandList';\nimport { CommandSeparator } from './CommandSeparator';\n\ntype Variant = 'default' | 'argo';\n\ntype Props = ComponentProps<typeof CommandPrimitive>;\n\nexport const Command = ({ className, ...rest }: Props) => {\n  const effectiveVariant: Variant = useArgoDesign() ? 'argo' : 'default';\n  return (\n    <CommandPrimitive\n      data-variant={effectiveVariant}\n      className={cn('tw:group/command', 'tailwindcss-preflight', className)}\n      {...rest}\n    />\n  );\n};\n\nCommand.Content = CommandContent;\n\nCommand.Separator = CommandSeparator;\nCommand.List = CommandList;\nCommand.Group = CommandGroup;\nCommand.Empty = CommandEmpty;\nCommand.Input = CommandInput;\n\n// items\nCommand.Item = CommandItem;\n"],"mappings":";;;;;;;;AAMA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GACT,WACA,eACA,UACA,4CACA,YACA,SACF;AACD,CAAA;;;ACZH,MAAa,gBAAgB,EAAE,GAAG,YAAmB,oBAACA,QAAiB,OAAlB,EAAwB,GAAI,MAAQ,CAAA;;;ACEzF,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAACC,QAAiB,OAAlB;CACE,WAAW,GACT,6CACA,yCACA,oCACA,sCACA,yCACA,2CACA,qDACA,8CACA,wCACA,6CACA,oCACA,SACF;CACA,GAAI;AACL,CAAA;;;AChBH,MAAaC,kBAAgB,EAAE,KAAK,WAAW,GAAG,YAChD,oBAACC,cAAD;CAAe;CAAK,SAAA;CAClB,UAAA,oBAAC,WAAD;EACE,GAAI;EACJ,WAAW,GACT,wDACA,4DACA,sDACA,iDACA,6CACA,SACF;CACD,CAAA;AACO,CAAA;;;ACdZ,MAAa,kBAAkB,EAAE,UAAU,gBAAuB;CAChE,IAAI,YAAY,WAAW,OAAO;CAElC,OACE,oBAAC,QAAD;EACE,gBAAc;EACd,WAAW,GACT,4BAEA,0BAGA,aACA,WACA,mBACA,qBAGA,aACA,mBACA,cACA,8DACA,qDAEA,wCAEA,sCACA,oFACA,gFACA,aACF;EAEC,UAAA,YAAY,aACX,oBAAC,OAAD,EACE,WAAW,GACT,aAEA,aACA,mBACA,mDACA,0EACF,EACD,CAAA,IAED,oBAAC,QAAD,EACE,WAAW,GACT,aAGA,aACA,mBACA,mDACA,4DACF,EACD,CAAA;CAEC,CAAA;AAEV;;;ACnDA,MAAa,eAAe,EAC1B,WACA,MACA,UACA,UAAU,OACV,UAAU,WACV,SACA,GAAG,YAEH,qBAAC,OAAD;CAAK,WAAU;CAAf,UAAA,CACE,qBAACC,QAAiB,MAAlB;EACE,GAAI;EACJ,gBAAc;EACd,gBAAc;EACd,WAAW,GACT,yBACA,wBAGA,eACA,WACA,mBACA,YACA,aACA,UAGA,gBACA,cACA,gBACA,qBACA,wBACA,kBACA,qBAEA,mDACA,uEACA,sEAEA,mDACA,+EACA,8EAGA,+BAEA,uCACA,yCAGA,oDACA,uDACA,SACF;EA3CF,UAAA;GA6CE,oBAAC,gBAAD,EAAyB,QAAU,CAAA;GAClC,QACC,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA;GAEP;EACoB;CAEtB,CAAA,GAAA,WACC,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,aACA,WACA,uBACA,mCACA,gDACF;EAEC,UAAA;CACG,CAAA,CAEL;;;;ACnFP,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,mBAAmB,GAAG,YAC5E,oBAAC,YAAD;CACO;CACL,WAAW,GACT,6CACA,6CACA,SACF;CACA,mBAAmB,GACjB,iCACA,qCACA,iBACF;CAEA,UAAA,oBAACC,QAAiB,MAAlB;EAAuB,GAAI;EAAQ;CAAgC,CAAA;AACzD,CAAA;;;ACjBd,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAACC,QAAiB,WAAlB;CACE,WAAW,GAAG,WAAW,gBAAgB,WAAW,SAAS;CAC7D,GAAI;AACL,CAAA;;;ACOH,MAAaC,aAAW,EAAE,WAAW,GAAG,WAAkB;CACxD,MAAM,mBAA4B,cAAc,IAAI,SAAS;CAC7D,OACE,oBAACC,SAAD;EACE,gBAAc;EACd,WAAW,GAAG,oBAAoB,yBAAyB,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,UAAQ,UAAU;AAElB,UAAQ,YAAY;AACpB,UAAQ,OAAO;AACf,UAAQ,QAAQ;AAChB,UAAQ,QAAQ;AAChB,UAAQ,QAAQC;AAGhB,UAAQ,OAAO"}

package/dist/CopyField-BJ96zvXs.js

@@ -0,0 +1,322 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip, copyToClipboard } from "./utils-D0c5VAyF.js";
+import { Check, Copy, Eye, EyeOff } from "./icons-Cek151jC.js";
+import { Label } from "./internal/components/Label.js";
+import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/CopyField/CopyContext.tsx
+const CopyContext = createContext(null);
+const useCopyContext = () => {
+	const ctx = use(CopyContext);
+	if (!ctx) throw new Error("CopyField.* components must be used within a CopyField.Root");
+	return ctx;
+};
+//#endregion
+//#region src/blocks/CopyField/CopyBox.tsx
+const LINE_HEIGHT_REM = 1.25;
+const VERTICAL_PADDING_REM = 1.25;
+const COPY_HINT_DELAY_MS = 2e3;
+/**
+* The clickable copy target. Click anywhere to copy; text stays drag-selectable.
+*
+* Rendered as a `role="button"` div (not a native `<button>`) so it can host
+* genuinely interactive children like `CopyField.Reveal` — nesting a `<button>`
+* inside a `<button>` is invalid HTML.
+*/
+const CopyBox = ({ className, children }) => {
+	const { copied, handleCopy, mono, minLines, maxLines, boxId, labelId, hasLabel, hoverHint } = useCopyContext();
+	const multiline = maxLines > 1;
+	const multilineStyle = multiline ? {
+		minHeight: `${minLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`,
+		maxHeight: `${maxLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`
+	} : void 0;
+	const handleKeyDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		handleCopy();
+	};
+	return /* @__PURE__ */ jsx(Tooltip, {
+		triggerAsChild: true,
+		placement: "top",
+		tooltip: copied ? "Copied" : hoverHint ? "Copy" : null,
+		forceShow: copied,
+		delayDuration: COPY_HINT_DELAY_MS,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "button",
+			tabIndex: 0,
+			id: boxId,
+			"aria-labelledby": hasLabel ? labelId : void 0,
+			onClick: handleCopy,
+			onKeyDown: handleKeyDown,
+			style: multilineStyle,
+			className: cn("tw:group tw:relative tw:flex tw:w-fit tw:max-w-full tw:cursor-pointer tw:gap-2 tw:rounded-2xl tw:[corner-shape:superellipse(2)] tw:border tw:border-border tw:bg-card tw:px-3 tw:py-2.5 tw:text-left tw:shadow-sm tw:transition-colors tw:hover:bg-muted", multiline ? "tw:items-start tw:overflow-auto" : "tw:items-center tw:overflow-hidden", mono && "tw:font-mono tw:text-[13px]", className),
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyButton.tsx
+/** Copy affordance icon — shows Copy/Check with feedback. */
+const CopyButton = ({ className }) => {
+	const { copied, maxLines } = useCopyContext();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("tw:pointer-events-none tw:flex tw:shrink-0 tw:items-center tw:text-muted-foreground tw:group-hover:text-foreground", maxLines > 1 && "tw:self-start tw:pt-0.5", className),
+		children: copied ? /* @__PURE__ */ jsx(Check, { className: "tw:size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "tw:size-4" })
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyChildren.tsx
+/** The displayed value. Truncates on a single line, wraps when multi-line. */
+const CopyChildren = ({ children, className }) => {
+	const { maxLines } = useCopyContext();
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("tw:min-w-0 tw:flex-1 tw:select-text tw:text-card-foreground", maxLines > 1 ? "tw:whitespace-pre-wrap tw:break-words" : "tw:truncate", className),
+		children
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyFooter.tsx
+/** Small helper text below the box (mirrors `FormGroup.Help` / `HelpBlock` styling). */
+const CopyFooter = ({ children, className }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("tw:m-0 tw:text-xs tw:text-muted-foreground", className),
+		children
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyHidden.tsx
+const MASK = "*".repeat(12);
+/**
+* Masks its children with asterisks. The real value still lives on `CopyField.Root`,
+* so copy always copies the real value regardless of mask state.
+*/
+const CopyHidden = ({ children, revealable = true, className }) => {
+	const { hidden, registerRevealable } = useCopyContext();
+	useEffect(() => {
+		if (!revealable) return void 0;
+		return registerRevealable();
+	}, [revealable, registerRevealable]);
+	const masked = revealable ? hidden : true;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("tw:select-none", className),
+		children: masked ? MASK : children
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyLabel.tsx
+/**
+* Visible label above the box. The label carries an id and the box is wired via
+* `aria-labelledby` (not `htmlFor`, which would turn label clicks into a copy).
+*
+* Row layout: label text, then `leading` (gap), then `trailing` pushed to the far
+* edge with the space between them growing.
+*/
+const CopyLabel = ({ children, leading, trailing, className }) => {
+	const { labelId, registerLabel } = useCopyContext();
+	useEffect(() => registerLabel(), [registerLabel]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:flex tw:items-center tw:gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				id: labelId,
+				children
+			}),
+			leading,
+			trailing != null && /* @__PURE__ */ jsx("span", {
+				className: "tw:ml-auto tw:flex tw:items-center",
+				children: trailing
+			})
+		]
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyPrefix.tsx
+/** Muted, non-selectable prefix addon with a trailing divider (not part of the copied value). */
+const CopyPrefix = ({ children, className }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: cn("tw:shrink-0 tw:select-none tw:self-stretch tw:border-r tw:border-border tw:pr-2 tw:text-muted-foreground", className),
+	children
+});
+//#endregion
+//#region src/blocks/CopyField/CopyReveal.tsx
+/** Eye toggle that reveals/masks `CopyField.Hidden` content. Renders nothing without revealable content. */
+const CopyReveal = ({ className }) => {
+	const { hidden, toggleHidden, hasRevealable, maxLines } = useCopyContext();
+	if (!hasRevealable) return null;
+	const handleClick = (event) => {
+		event.stopPropagation();
+		toggleHidden();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: handleClick,
+		"aria-label": hidden ? "Show value" : "Hide value",
+		className: cn("tw:flex tw:shrink-0 tw:items-center tw:text-muted-foreground tw:hover:text-foreground", maxLines > 1 && "tw:self-start tw:pt-0.5", className),
+		children: hidden ? /* @__PURE__ */ jsx(Eye, { className: "tw:size-4" }) : /* @__PURE__ */ jsx(EyeOff, { className: "tw:size-4" })
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopyRoot.tsx
+/**
+* Container for the Copy block. Owns the copied `value`, copy/mask state, and the
+* shared context consumed by `CopyField.Box`, `CopyField.Reveal`, `CopyField.Button`, etc.
+*/
+const CopyRoot = ({ value, mono = false, onCopy, hiddenByDefault = false, minLines = 1, maxLines, hoverHint = true, className, children }) => {
+	const [copied, setCopied] = useState(false);
+	const [hidden, setHidden] = useState(hiddenByDefault);
+	const [revealableCount, setRevealableCount] = useState(0);
+	const [labelCount, setLabelCount] = useState(0);
+	const resetTimerRef = useRef(void 0);
+	const generatedId = useId();
+	const labelId = `${generatedId}-label`;
+	const boxId = `${generatedId}-box`;
+	useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+	const handleCopy = useCallback(() => {
+		const selection = window.getSelection();
+		const boxEl = document.getElementById(boxId);
+		if (selection && !selection.isCollapsed && selection.anchorNode && boxEl?.contains(selection.anchorNode)) return;
+		copyToClipboard(value).then(() => {
+			onCopy?.();
+			setCopied(true);
+			clearTimeout(resetTimerRef.current);
+			resetTimerRef.current = setTimeout(() => setCopied(false), 1500);
+		}).catch((error) => {
+			console.error("Copy to clipboard failed", error);
+		});
+	}, [
+		value,
+		onCopy,
+		boxId
+	]);
+	const toggleHidden = useCallback(() => setHidden((prev) => !prev), []);
+	const registerRevealable = useCallback(() => {
+		setRevealableCount((count) => count + 1);
+		return () => setRevealableCount((count) => count - 1);
+	}, []);
+	const registerLabel = useCallback(() => {
+		setLabelCount((count) => count + 1);
+		return () => setLabelCount((count) => count - 1);
+	}, []);
+	const contextValue = useMemo(() => ({
+		copied,
+		handleCopy,
+		value,
+		mono,
+		hidden,
+		toggleHidden,
+		registerRevealable,
+		hasRevealable: revealableCount > 0,
+		registerLabel,
+		hasLabel: labelCount > 0,
+		minLines,
+		maxLines: maxLines ?? minLines,
+		hoverHint,
+		labelId,
+		boxId
+	}), [
+		copied,
+		handleCopy,
+		value,
+		mono,
+		hidden,
+		toggleHidden,
+		registerRevealable,
+		revealableCount,
+		registerLabel,
+		labelCount,
+		minLines,
+		maxLines,
+		hoverHint,
+		labelId,
+		boxId
+	]);
+	return /* @__PURE__ */ jsx(CopyContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("tw:flex tw:w-fit tw:max-w-full tw:flex-col tw:gap-1", className),
+			children
+		})
+	});
+};
+//#endregion
+//#region src/blocks/CopyField/CopySuffix.tsx
+/** Muted, non-selectable suffix addon with a leading divider (not part of the copied value). */
+const CopySuffix = ({ children, className }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: cn("tw:shrink-0 tw:select-none tw:self-stretch tw:border-l tw:border-border tw:pl-2 tw:text-muted-foreground", className),
+	children
+});
+//#endregion
+//#region src/blocks/CopyField/CopyField.tsx
+/**
+* Compound component for readonly value/command boxes with inline copy.
+*
+* `CopyField.Root` owns the `value` and copy/mask state; `CopyField.Box` is the clickable
+* copy target. Clicking anywhere in the box copies the real `value` to the
+* clipboard (guarded by text-selection so drag-select does NOT trigger a copy),
+* with a Copy → Check feedback for ~1.5s.
+*
+* Shapes:
+* - **Single-line value row** — default proportional font, value truncates.
+* - **Monospace command box** — `mono` on `CopyField.Root`.
+* - **Multi-line** — `maxLines > 1`; content wraps and scrolls between
+*   `minLines` and `maxLines` tall.
+*
+* Masking: wrap sensitive content in `CopyField.Hidden`. Revealable hidden content is
+* toggled by `CopyField.Reveal` (an eye button); copy still copies the real value.
+*
+* @example Monospace command
+* ```tsx
+* <CopyField.Root value={installCommand} mono>
+*   <CopyField.Label>Install the Keboola CLI</CopyField.Label>
+*   <CopyField.Box>
+*     <CopyField.Children>{installCommand}</CopyField.Children>
+*     <CopyField.Button />
+*   </CopyField.Box>
+* </CopyField.Root>
+* ```
+*
+* @example Masked token with reveal + prefix/suffix
+* ```tsx
+* <CopyField.Root value={dataAppUrl} hiddenByDefault>
+*   <CopyField.Label leading={<InfoButton />} trailing={<Switch />}>Data app URL</CopyField.Label>
+*   <CopyField.Box>
+*     <CopyField.Prefix>https://</CopyField.Prefix>
+*     <CopyField.Children><CopyField.Hidden>{slug}</CopyField.Hidden></CopyField.Children>
+*     <CopyField.Suffix>.keboola.com</CopyField.Suffix>
+*     <CopyField.Reveal />
+*     <CopyField.Button />
+*   </CopyField.Box>
+*   <CopyField.Footer>Click to copy</CopyField.Footer>
+* </CopyField.Root>
+* ```
+*/
+const CopyField = {
+	/** Container. Owns the copied `value`, mask state, and copy context. */
+	Root: CopyRoot,
+	/** Visible label above the box, with optional `leading`/`trailing` slots. */
+	Label: CopyLabel,
+	/** The clickable copy target row. */
+	Box: CopyBox,
+	/** Muted, non-selectable prefix addon (not copied). */
+	Prefix: CopyPrefix,
+	/** Displayed value (truncates single-line, wraps multi-line). */
+	Children: CopyChildren,
+	/** Muted, non-selectable suffix addon (not copied). */
+	Suffix: CopySuffix,
+	/** Masks its children with dots; copy still copies the real value. */
+	Hidden: CopyHidden,
+	/** Eye toggle that reveals/masks revealable `CopyField.Hidden` content. */
+	Reveal: CopyReveal,
+	/** Copy affordance icon — shows Copy/Check with feedback. */
+	Button: CopyButton,
+	/** Small helper text below the box. */
+	Footer: CopyFooter
+};
+//#endregion
+export { CopyField };
+
+//# sourceMappingURL=CopyField-BJ96zvXs.js.map

package/dist/CopyField-BJ96zvXs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyField-BJ96zvXs.js","names":["CopyIcon"],"sources":["../src/blocks/CopyField/CopyContext.tsx","../src/blocks/CopyField/CopyBox.tsx","../src/blocks/CopyField/CopyButton.tsx","../src/blocks/CopyField/CopyChildren.tsx","../src/blocks/CopyField/CopyFooter.tsx","../src/blocks/CopyField/CopyHidden.tsx","../src/blocks/CopyField/CopyLabel.tsx","../src/blocks/CopyField/CopyPrefix.tsx","../src/blocks/CopyField/CopyReveal.tsx","../src/blocks/CopyField/CopyRoot.tsx","../src/blocks/CopyField/CopySuffix.tsx","../src/blocks/CopyField/CopyField.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\ntype CopyContextValue = {\n  /** Whether a copy just happened (drives the Copy → Check feedback for ~1.5s). */\n  copied: boolean;\n  /** Copies the real `value` to the clipboard, guarded against drag-select. */\n  handleCopy: () => void;\n  /** The real value copied to the clipboard, regardless of masking. */\n  value: string;\n  /** Render displayed content in monospace/code style. */\n  mono: boolean;\n  /** Whether to show the \"Copy\" hint tooltip on hover (else only \"Copied\" on copy). */\n  hoverHint: boolean;\n  /** Whether revealable `CopyField.Hidden` content is currently masked. */\n  hidden: boolean;\n  /** Toggles the masked ↔ revealed state. */\n  toggleHidden: () => void;\n  /**\n   * Registers a revealable `CopyField.Hidden` so `CopyField.Reveal` knows to render.\n   * Returns a cleanup that unregisters on unmount.\n   */\n  registerRevealable: () => () => void;\n  /** True once at least one revealable `CopyField.Hidden` is mounted. */\n  hasRevealable: boolean;\n  /**\n   * Registers the visible `CopyField.Label` so `CopyField.Box` only points `aria-labelledby`\n   * at it when a label actually exists. Returns a cleanup that unregisters on unmount.\n   */\n  registerLabel: () => () => void;\n  /** True once a `CopyField.Label` is mounted. */\n  hasLabel: boolean;\n  /** Minimum number of visible text lines for a multi-line box. */\n  minLines: number;\n  /** Maximum number of visible text lines before the box scrolls. */\n  maxLines: number;\n  /** Stable id of the visible label element (for `aria-labelledby`). */\n  labelId: string;\n  /** Stable id of the clickable box element. */\n  boxId: string;\n};\n\nexport const CopyContext = createContext<CopyContextValue | null>(null);\n\nexport const useCopyContext = () => {\n  const ctx = use(CopyContext);\n  if (!ctx) throw new Error('CopyField.* components must be used within a CopyField.Root');\n  return ctx;\n};\n","import type { CSSProperties, KeyboardEvent, ReactNode } from 'react';\n\nimport { Tooltip } from '../../components/Tooltip';\nimport { cn } from '../../utils';\n\nimport { useCopyContext } from './CopyContext';\n\ntype CopyBoxProps = {\n  /** Additional CSS classes on the box. */\n  className?: string;\n  children: ReactNode;\n};\n\nconst LINE_HEIGHT_REM = 1.25;\nconst VERTICAL_PADDING_REM = 1.25;\n\n// Long delay — the hover \"Copy\" hint doesn't really help UX, it just pulls focus.\nconst COPY_HINT_DELAY_MS = 2000;\n\n/**\n * The clickable copy target. Click anywhere to copy; text stays drag-selectable.\n *\n * Rendered as a `role=\"button\"` div (not a native `<button>`) so it can host\n * genuinely interactive children like `CopyField.Reveal` — nesting a `<button>`\n * inside a `<button>` is invalid HTML.\n */\nexport const CopyBox = ({ className, children }: CopyBoxProps) => {\n  const { copied, handleCopy, mono, minLines, maxLines, boxId, labelId, hasLabel, hoverHint } =\n    useCopyContext();\n\n  const multiline = maxLines > 1;\n  const multilineStyle: CSSProperties | undefined = multiline\n    ? {\n        minHeight: `${minLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`,\n        maxHeight: `${maxLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`,\n      }\n    : undefined;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    handleCopy();\n  };\n\n  return (\n    <Tooltip\n      triggerAsChild\n      placement=\"top\"\n      tooltip={copied ? 'Copied' : hoverHint ? 'Copy' : null}\n      forceShow={copied}\n      delayDuration={COPY_HINT_DELAY_MS}\n    >\n      <div\n        role=\"button\"\n        tabIndex={0}\n        id={boxId}\n        aria-labelledby={hasLabel ? labelId : undefined}\n        onClick={handleCopy}\n        onKeyDown={handleKeyDown}\n        style={multilineStyle}\n        className={cn(\n          'tw:group tw:relative tw:flex tw:w-fit tw:max-w-full tw:cursor-pointer tw:gap-2 tw:rounded-2xl tw:[corner-shape:superellipse(2)] tw:border tw:border-border tw:bg-card tw:px-3 tw:py-2.5 tw:text-left tw:shadow-sm tw:transition-colors tw:hover:bg-muted',\n          multiline ? 'tw:items-start tw:overflow-auto' : 'tw:items-center tw:overflow-hidden',\n          mono && 'tw:font-mono tw:text-[13px]',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </Tooltip>\n  );\n};\n","import { Check, Copy as CopyIcon } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { useCopyContext } from './CopyContext';\n\ntype CopyButtonProps = {\n  className?: string;\n};\n\n/** Copy affordance icon — shows Copy/Check with feedback. */\nexport const CopyButton = ({ className }: CopyButtonProps) => {\n  const { copied, maxLines } = useCopyContext();\n\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        'tw:pointer-events-none tw:flex tw:shrink-0 tw:items-center tw:text-muted-foreground tw:group-hover:text-foreground',\n        maxLines > 1 && 'tw:self-start tw:pt-0.5',\n        className,\n      )}\n    >\n      {copied ? <Check className=\"tw:size-4\" /> : <CopyIcon className=\"tw:size-4\" />}\n    </span>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { useCopyContext } from './CopyContext';\n\ntype CopyChildrenProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** The displayed value. Truncates on a single line, wraps when multi-line. */\nexport const CopyChildren = ({ children, className }: CopyChildrenProps) => {\n  const { maxLines } = useCopyContext();\n  const multiline = maxLines > 1;\n\n  return (\n    <span\n      className={cn(\n        'tw:min-w-0 tw:flex-1 tw:select-text tw:text-card-foreground',\n        multiline ? 'tw:whitespace-pre-wrap tw:break-words' : 'tw:truncate',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype CopyFooterProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** Small helper text below the box (mirrors `FormGroup.Help` / `HelpBlock` styling). */\nexport const CopyFooter = ({ children, className }: CopyFooterProps) => {\n  if (!children) return null;\n\n  return <p className={cn('tw:m-0 tw:text-xs tw:text-muted-foreground', className)}>{children}</p>;\n};\n","import { useEffect } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { useCopyContext } from './CopyContext';\n\ntype CopyHiddenProps = {\n  children: ReactNode;\n  /**\n   * When true (default), `CopyField.Reveal` can unmask this content. When false the\n   * content is always masked (e.g. an implicit token inside a longer string).\n   */\n  revealable?: boolean;\n  className?: string;\n};\n\nconst MASK = '*'.repeat(12);\n\n/**\n * Masks its children with asterisks. The real value still lives on `CopyField.Root`,\n * so copy always copies the real value regardless of mask state.\n */\nexport const CopyHidden = ({ children, revealable = true, className }: CopyHiddenProps) => {\n  const { hidden, registerRevealable } = useCopyContext();\n\n  useEffect(() => {\n    if (!revealable) return undefined;\n    return registerRevealable();\n  }, [revealable, registerRevealable]);\n\n  const masked = revealable ? hidden : true;\n\n  return <span className={cn('tw:select-none', className)}>{masked ? MASK : children}</span>;\n};\n","import { useEffect } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { Label } from '../../components/Label';\nimport { cn } from '../../utils';\n\nimport { useCopyContext } from './CopyContext';\n\ntype CopyLabelProps = {\n  children: ReactNode;\n  /** Content rendered right after the label text (e.g. an Info tooltip button). */\n  leading?: ReactNode;\n  /** Content pushed to the trailing edge of the row (e.g. a Switch). */\n  trailing?: ReactNode;\n  className?: string;\n};\n\n/**\n * Visible label above the box. The label carries an id and the box is wired via\n * `aria-labelledby` (not `htmlFor`, which would turn label clicks into a copy).\n *\n * Row layout: label text, then `leading` (gap), then `trailing` pushed to the far\n * edge with the space between them growing.\n */\nexport const CopyLabel = ({ children, leading, trailing, className }: CopyLabelProps) => {\n  const { labelId, registerLabel } = useCopyContext();\n\n  useEffect(() => registerLabel(), [registerLabel]);\n\n  return (\n    <div className={cn('tw:flex tw:items-center tw:gap-1', className)}>\n      <Label id={labelId}>{children}</Label>\n      {leading}\n      {trailing != null && <span className=\"tw:ml-auto tw:flex tw:items-center\">{trailing}</span>}\n    </div>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype CopyAddonProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** Muted, non-selectable prefix addon with a trailing divider (not part of the copied value). */\nexport const CopyPrefix = ({ children, className }: CopyAddonProps) => (\n  <span\n    aria-hidden\n    className={cn(\n      'tw:shrink-0 tw:select-none tw:self-stretch tw:border-r tw:border-border tw:pr-2 tw:text-muted-foreground',\n      className,\n    )}\n  >\n    {children}\n  </span>\n);\n","import type { MouseEvent } from 'react';\n\nimport { Eye, EyeOff } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { useCopyContext } from './CopyContext';\n\ntype CopyRevealProps = {\n  className?: string;\n};\n\n/** Eye toggle that reveals/masks `CopyField.Hidden` content. Renders nothing without revealable content. */\nexport const CopyReveal = ({ className }: CopyRevealProps) => {\n  const { hidden, toggleHidden, hasRevealable, maxLines } = useCopyContext();\n\n  if (!hasRevealable) return null;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    toggleHidden();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      aria-label={hidden ? 'Show value' : 'Hide value'}\n      className={cn(\n        'tw:flex tw:shrink-0 tw:items-center tw:text-muted-foreground tw:hover:text-foreground',\n        maxLines > 1 && 'tw:self-start tw:pt-0.5',\n        className,\n      )}\n    >\n      {hidden ? <Eye className=\"tw:size-4\" /> : <EyeOff className=\"tw:size-4\" />}\n    </button>\n  );\n};\n","import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { cn, copyToClipboard } from '../../utils';\n\nimport { CopyContext } from './CopyContext';\n\ntype CopyRootProps = {\n  /** The value copied to the clipboard on click. */\n  value: string;\n  /** Render displayed content in monospace/code style. */\n  mono?: boolean;\n  /** Callback fired after a successful copy. */\n  onCopy?: () => void;\n  /** Start with revealable `CopyField.Hidden` content masked. */\n  hiddenByDefault?: boolean;\n  /** Minimum number of visible text lines for a multi-line box. */\n  minLines?: number;\n  /** Maximum number of visible text lines before the box scrolls. */\n  maxLines?: number;\n  /** Show the \"Copy\" hover hint (set `false` to only show \"Copied\" on copy). Defaults to `true`. */\n  hoverHint?: boolean;\n  /** Additional CSS classes on the outer container. */\n  className?: string;\n  children: ReactNode;\n};\n\n/**\n * Container for the Copy block. Owns the copied `value`, copy/mask state, and the\n * shared context consumed by `CopyField.Box`, `CopyField.Reveal`, `CopyField.Button`, etc.\n */\nexport const CopyRoot = ({\n  value,\n  mono = false,\n  onCopy,\n  hiddenByDefault = false,\n  minLines = 1,\n  maxLines,\n  hoverHint = true,\n  className,\n  children,\n}: CopyRootProps) => {\n  const [copied, setCopied] = useState(false);\n  const [hidden, setHidden] = useState(hiddenByDefault);\n  const [revealableCount, setRevealableCount] = useState(0);\n  const [labelCount, setLabelCount] = useState(0);\n  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const generatedId = useId();\n  const labelId = `${generatedId}-label`;\n  const boxId = `${generatedId}-box`;\n\n  useEffect(() => () => clearTimeout(resetTimerRef.current), []);\n\n  const handleCopy = useCallback(() => {\n    const selection = window.getSelection();\n    const boxEl = document.getElementById(boxId);\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      boxEl?.contains(selection.anchorNode)\n    ) {\n      return;\n    }\n\n    copyToClipboard(value)\n      .then(() => {\n        onCopy?.();\n        setCopied(true);\n        clearTimeout(resetTimerRef.current);\n        resetTimerRef.current = setTimeout(() => setCopied(false), 1500);\n      })\n      .catch((error: unknown) => {\n        // eslint-disable-next-line no-console\n        console.error('Copy to clipboard failed', error);\n      });\n  }, [value, onCopy, boxId]);\n\n  const toggleHidden = useCallback(() => setHidden((prev) => !prev), []);\n\n  const registerRevealable = useCallback(() => {\n    setRevealableCount((count) => count + 1);\n    return () => setRevealableCount((count) => count - 1);\n  }, []);\n\n  const registerLabel = useCallback(() => {\n    setLabelCount((count) => count + 1);\n    return () => setLabelCount((count) => count - 1);\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      copied,\n      handleCopy,\n      value,\n      mono,\n      hidden,\n      toggleHidden,\n      registerRevealable,\n      hasRevealable: revealableCount > 0,\n      registerLabel,\n      hasLabel: labelCount > 0,\n      minLines,\n      maxLines: maxLines ?? minLines,\n      hoverHint,\n      labelId,\n      boxId,\n    }),\n    [\n      copied,\n      handleCopy,\n      value,\n      mono,\n      hidden,\n      toggleHidden,\n      registerRevealable,\n      revealableCount,\n      registerLabel,\n      labelCount,\n      minLines,\n      maxLines,\n      hoverHint,\n      labelId,\n      boxId,\n    ],\n  );\n\n  return (\n    <CopyContext value={contextValue}>\n      <div className={cn('tw:flex tw:w-fit tw:max-w-full tw:flex-col tw:gap-1', className)}>\n        {children}\n      </div>\n    </CopyContext>\n  );\n};\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype CopyAddonProps = {\n  children: ReactNode;\n  className?: string;\n};\n\n/** Muted, non-selectable suffix addon with a leading divider (not part of the copied value). */\nexport const CopySuffix = ({ children, className }: CopyAddonProps) => (\n  <span\n    aria-hidden\n    className={cn(\n      'tw:shrink-0 tw:select-none tw:self-stretch tw:border-l tw:border-border tw:pl-2 tw:text-muted-foreground',\n      className,\n    )}\n  >\n    {children}\n  </span>\n);\n","import { CopyBox } from './CopyBox';\nimport { CopyButton } from './CopyButton';\nimport { CopyChildren } from './CopyChildren';\nimport { CopyFooter } from './CopyFooter';\nimport { CopyHidden } from './CopyHidden';\nimport { CopyLabel } from './CopyLabel';\nimport { CopyPrefix } from './CopyPrefix';\nimport { CopyReveal } from './CopyReveal';\nimport { CopyRoot } from './CopyRoot';\nimport { CopySuffix } from './CopySuffix';\n\n/**\n * Compound component for readonly value/command boxes with inline copy.\n *\n * `CopyField.Root` owns the `value` and copy/mask state; `CopyField.Box` is the clickable\n * copy target. Clicking anywhere in the box copies the real `value` to the\n * clipboard (guarded by text-selection so drag-select does NOT trigger a copy),\n * with a Copy → Check feedback for ~1.5s.\n *\n * Shapes:\n * - **Single-line value row** — default proportional font, value truncates.\n * - **Monospace command box** — `mono` on `CopyField.Root`.\n * - **Multi-line** — `maxLines > 1`; content wraps and scrolls between\n *   `minLines` and `maxLines` tall.\n *\n * Masking: wrap sensitive content in `CopyField.Hidden`. Revealable hidden content is\n * toggled by `CopyField.Reveal` (an eye button); copy still copies the real value.\n *\n * @example Monospace command\n * ```tsx\n * <CopyField.Root value={installCommand} mono>\n *   <CopyField.Label>Install the Keboola CLI</CopyField.Label>\n *   <CopyField.Box>\n *     <CopyField.Children>{installCommand}</CopyField.Children>\n *     <CopyField.Button />\n *   </CopyField.Box>\n * </CopyField.Root>\n * ```\n *\n * @example Masked token with reveal + prefix/suffix\n * ```tsx\n * <CopyField.Root value={dataAppUrl} hiddenByDefault>\n *   <CopyField.Label leading={<InfoButton />} trailing={<Switch />}>Data app URL</CopyField.Label>\n *   <CopyField.Box>\n *     <CopyField.Prefix>https://</CopyField.Prefix>\n *     <CopyField.Children><CopyField.Hidden>{slug}</CopyField.Hidden></CopyField.Children>\n *     <CopyField.Suffix>.keboola.com</CopyField.Suffix>\n *     <CopyField.Reveal />\n *     <CopyField.Button />\n *   </CopyField.Box>\n *   <CopyField.Footer>Click to copy</CopyField.Footer>\n * </CopyField.Root>\n * ```\n */\nexport const CopyField = {\n  /** Container. Owns the copied `value`, mask state, and copy context. */\n  Root: CopyRoot,\n  /** Visible label above the box, with optional `leading`/`trailing` slots. */\n  Label: CopyLabel,\n  /** The clickable copy target row. */\n  Box: CopyBox,\n  /** Muted, non-selectable prefix addon (not copied). */\n  Prefix: CopyPrefix,\n  /** Displayed value (truncates single-line, wraps multi-line). */\n  Children: CopyChildren,\n  /** Muted, non-selectable suffix addon (not copied). */\n  Suffix: CopySuffix,\n  /** Masks its children with dots; copy still copies the real value. */\n  Hidden: CopyHidden,\n  /** Eye toggle that reveals/masks revealable `CopyField.Hidden` content. */\n  Reveal: CopyReveal,\n  /** Copy affordance icon — shows Copy/Check with feedback. */\n  Button: CopyButton,\n  /** Small helper text below the box. */\n  Footer: CopyFooter,\n};\n"],"mappings":"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"}

package/dist/DateInput-B3UdzRfW.js

@@ -0,0 +1,141 @@
+import { createChangeInputEvent } from "./utils-D0c5VAyF.js";
+import { mergeRefs } from "./internal/utils/mergeRefs.js";
+import { Calendar, X } from "./icons-Cek151jC.js";
+import { InputGroup } from "./InputGroup-CdTq8H7c.js";
+import { useControllableState } from "./useControllableState-M6494mCT.js";
+import { DatePicker } from "./DatePicker-Dw3DpbUh.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/DateInput/helpers.ts
+const formatDate = (date, inputValue) => {
+	if (!date) return inputValue;
+	return date.toLocaleDateString();
+};
+const datePartOrder = new Intl.DateTimeFormat().formatToParts(new Date(2e3, 0, 2)).filter((p) => p.type === "day" || p.type === "month" || p.type === "year").map((p) => p.type);
+const parseDate = (value) => {
+	if (!value.trim()) return null;
+	const nums = value.match(/\d+/g)?.map(Number);
+	if (nums && nums.length >= 3) {
+		const parts = Object.fromEntries(datePartOrder.map((type, i) => [type, nums[i]]));
+		const year = parts.year;
+		const month = parts.month;
+		const day = parts.day;
+		if (year != null && month != null && day != null && month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+			const date = new Date(year, month - 1, day);
+			if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) return date;
+		}
+	}
+	const isoMatch = value.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+	if (isoMatch) {
+		const y = Number(isoMatch[1]);
+		const m = Number(isoMatch[2]) - 1;
+		const d = Number(isoMatch[3]);
+		const date = new Date(y, m, d);
+		if (date.getFullYear() === y && date.getMonth() === m && date.getDate() === d) return date;
+		return null;
+	}
+	const fallback = new Date(value);
+	return isNaN(fallback.getTime()) ? null : fallback;
+};
+//#endregion
+//#region src/blocks/DateInput/DateInput.tsx
+const DateInput = ({ ref, state, variant, focusVariant, sizing, className, value, defaultValue, onValueChange, onValueBlur, onChange, onBlur, onFocus, allowClear = false, disabledDays, endMonth, startMonth, disabled, readOnly, placeholder = "Select a date", ...restInputProps }) => {
+	const inputRef = useRef(null);
+	const [inputValue, setInputValue] = useState("");
+	const [hasFocus, setHasFocus] = useState(false);
+	const [isOpen, setIsOpen] = useState(false);
+	const [month, setMonth] = useState(/* @__PURE__ */ new Date());
+	const [currentValue, setCurrentValue] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue ?? null
+	});
+	const canClear = allowClear && !!currentValue && !disabled && !readOnly;
+	const showPicker = !disabled && !readOnly;
+	const handleChange = (event) => {
+		const newValue = event.target.value;
+		setInputValue(newValue);
+		onChange?.(event);
+		const parsedDate = parseDate(newValue);
+		if (parsedDate !== null || !newValue.trim()) onValueChange?.(parsedDate);
+	};
+	const handleFocus = (event) => {
+		const formatted = formatDate(currentValue, "");
+		setInputValue(formatted);
+		setHasFocus(true);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		setHasFocus(false);
+		onBlur?.(event);
+		const text = event.target.value;
+		const parsedDate = text === formatDate(currentValue, "") ? currentValue : parseDate(text);
+		onValueBlur?.(parsedDate);
+		setCurrentValue(parsedDate);
+	};
+	const handleDatePickerChange = (newValue) => {
+		const dateValue = newValue ?? null;
+		setCurrentValue(dateValue);
+		onValueChange?.(dateValue);
+		setHasFocus(false);
+		setIsOpen(false);
+	};
+	const handleClear = () => {
+		if (!inputRef.current) return;
+		inputRef.current.value = "";
+		setInputValue("");
+		setCurrentValue(null);
+		onValueChange?.(null);
+		onChange?.(createChangeInputEvent(inputRef.current));
+	};
+	const handleOpenChange = (open) => {
+		if (open) setMonth(currentValue ?? /* @__PURE__ */ new Date());
+		setIsOpen(open);
+	};
+	const displayValue = hasFocus ? inputValue : formatDate(currentValue, "");
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		state,
+		variant,
+		sizing,
+		focusVariant,
+		className,
+		children: [/* @__PURE__ */ jsx(InputGroup.Input, {
+			...restInputProps,
+			ref: mergeRefs(ref ?? null, inputRef),
+			type: "text",
+			value: displayValue,
+			placeholder,
+			onChange: handleChange,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			disabled,
+			readOnly
+		}), (canClear || showPicker) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
+			align: "inline-end",
+			children: [canClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+				"aria-label": "Clear date",
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: handleClear,
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
+			}), showPicker && /* @__PURE__ */ jsx(DatePicker, {
+				disabled: disabledDays,
+				endMonth,
+				mode: "single",
+				month,
+				onMonthChange: setMonth,
+				onOpenChange: handleOpenChange,
+				onSelect: handleDatePickerChange,
+				open: isOpen,
+				selected: currentValue ?? void 0,
+				startMonth,
+				children: /* @__PURE__ */ jsx(InputGroup.Button, {
+					"aria-label": "Select Date",
+					children: /* @__PURE__ */ jsx(Calendar, { className: "tw:size-4" })
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { DateInput };
+
+//# sourceMappingURL=DateInput-B3UdzRfW.js.map