@keboola/design 6.0.0 → 6.1.0

package/dist/index.js

@@ -14,6 +14,7 @@ import { Root, Group, Trigger as Trigger$4 } from '@radix-ui/react-dropdown-menu
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import { Root as Root$7 } from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as RLabel from '@radix-ui/react-label';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Root as Root$8, Trigger as Trigger$5, Portal as Portal$1, Content as Content$1, Cancel, Action, Overlay as Overlay$1, Title as Title$1 } from '@radix-ui/react-alert-dialog';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -25,7 +26,6 @@ import { Root as Root$a, Trigger as Trigger$3, Portal as Portal$4, Content as Co
 import { Command as Command$1, CommandInput as CommandInput$1, defaultFilter, useCommandState } from 'cmdk';
 export { defaultFilter, useCommandState } from 'cmdk';
 import TextareaAutosize from 'react-textarea-autosize';
-import * as RLabel from '@radix-ui/react-label';
 import { Root as Root$3, Thumb } from '@radix-ui/react-switch';
 import * as RRadioGroup from '@radix-ui/react-radio-group';
 import { Item, Indicator as Indicator$2 } from '@radix-ui/react-radio-group';
@@ -2768,6 +2768,7 @@ var Clipboard = ({
   ] });
 };
 var DEFAULT_ICON = /* @__PURE__ */ jsx(icons_exports.Copy, {});
+var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -2779,20 +2780,24 @@ var ClipboardButton = ({
   variant = "outline",
   children,
   ...rest
-}) => /* @__PURE__ */ jsx(
-  Clipboard,
-  {
-    asChild: true,
-    tooltip,
-    tooltipPlacement,
-    tooltipVariant,
-    text,
-    children: /* @__PURE__ */ jsxs(Button, { ...rest, variant, disabled: !text, children: [
-      icon,
-      children
-    ] })
-  }
-);
+}) => {
+  const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
+  const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
+  return /* @__PURE__ */ jsx(
+    Clipboard,
+    {
+      asChild: true,
+      tooltip,
+      tooltipPlacement,
+      tooltipVariant,
+      text,
+      children: /* @__PURE__ */ jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
+        icon,
+        children
+      ] })
+    }
+  );
+};
 var ClipboardInline = ({
   // clipboard props
   text,
@@ -2817,6 +2822,264 @@ var ClipboardInline = ({
     ] })
   }
 );
+var CopyContext = createContext(null);
+var useCopyContext = () => {
+  const ctx = use(CopyContext);
+  if (!ctx) throw new Error("CopyField.* components must be used within a CopyField.Root");
+  return ctx;
+};
+var LINE_HEIGHT_REM = 1.25;
+var VERTICAL_PADDING_REM = 1.25;
+var CopyBox = ({ className, children }) => {
+  const { copied, handleCopy, mono, minLines, maxLines, boxId, labelId, hasLabel } = 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 handleKeyDown2 = (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" : "Copy", forceShow: copied, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      id: boxId,
+      "aria-labelledby": hasLabel ? labelId : void 0,
+      onClick: handleCopy,
+      onKeyDown: handleKeyDown2,
+      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 [corner-shape:superellipse(2)] tw-border tw-border-[#e4e4e4] tw-bg-[#fafafa] tw-px-3 tw-py-2.5 tw-text-left tw-shadow-sm tw-transition-colors hover:tw-bg-[#f2f2f2]",
+        multiline ? "tw-items-start tw-overflow-auto" : "tw-items-center tw-overflow-hidden",
+        mono && "tw-font-mono tw-text-[13px]",
+        className
+      ),
+      children
+    }
+  ) });
+};
+var 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-[#8b8b8b] group-hover:tw-text-[#5c5c5c]",
+        maxLines > 1 && "tw-self-start tw-pt-0.5",
+        className
+      ),
+      children: copied ? /* @__PURE__ */ jsx(icons_exports.Check, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.Copy, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyChildren = ({ children, className }) => {
+  const { maxLines } = useCopyContext();
+  const multiline = maxLines > 1;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "tw-min-w-0 tw-flex-1 tw-select-text tw-text-[#3f3f3f]",
+        multiline ? "tw-whitespace-pre-wrap tw-break-words" : "tw-truncate",
+        className
+      ),
+      children
+    }
+  );
+};
+var 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 });
+};
+var MASK = "*".repeat(12);
+var 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 });
+};
+var Optional = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
+var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsx(
+  RLabel.Root,
+  {
+    ...rest,
+    id: id?.toString(),
+    htmlFor: htmlFor?.toString(),
+    className: cn(
+      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
+      className
+    ),
+    children
+  }
+);
+Label2.Optional = Optional;
+Label2.Required = Required;
+var 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(Label2, { id: labelId, children }),
+    leading,
+    trailing != null && /* @__PURE__ */ jsx("span", { className: "tw-ml-auto tw-flex tw-items-center", children: trailing })
+  ] });
+};
+var 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-[#e4e4e4] tw-pr-2 tw-text-[#6b6b6b]",
+      className
+    ),
+    children
+  }
+);
+var 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-[#8b8b8b] hover:tw-text-[#5c5c5c]",
+        maxLines > 1 && "tw-self-start tw-pt-0.5",
+        className
+      ),
+      children: hidden ? /* @__PURE__ */ jsx(icons_exports.Eye, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.EyeOff, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyRoot = ({
+  value,
+  mono = false,
+  onCopy,
+  hiddenByDefault = false,
+  minLines = 1,
+  maxLines,
+  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,
+      labelId,
+      boxId
+    }),
+    [
+      copied,
+      handleCopy,
+      value,
+      mono,
+      hidden,
+      toggleHidden,
+      registerRevealable,
+      revealableCount,
+      registerLabel,
+      labelCount,
+      minLines,
+      maxLines,
+      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 }) });
+};
+var 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-[#e4e4e4] tw-pl-2 tw-text-[#6b6b6b]",
+      className
+    ),
+    children
+  }
+);
+
+// src/blocks/CopyField/CopyField.tsx
+var 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
+};
 var Link = ({
   ref,
   children,
@@ -6751,7 +7014,7 @@ __export(custom_components_exports, {
   NextMonthButton: () => NextMonthButton,
   Option: () => Option,
   PreviousMonthButton: () => PreviousMonthButton,
-  Root: () => Root16,
+  Root: () => Root17,
   Select: () => Select,
   Week: () => Week,
   WeekNumber: () => WeekNumber,
@@ -6931,7 +7194,7 @@ function Option(props) {
 function PreviousMonthButton(props) {
   return React26.createElement("button", { ...props });
 }
-function Root16(props) {
+function Root17(props) {
   const { rootRef, ...rest } = props;
   return React26.createElement("div", { ...rest, ref: rootRef });
 }
@@ -9999,23 +10262,6 @@ var TimePicker = ({
     )
   ] });
 };
-var Optional = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
-var Required = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
-var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsx(
-  RLabel.Root,
-  {
-    ...rest,
-    id: id?.toString(),
-    htmlFor: htmlFor?.toString(),
-    className: cn(
-      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
-      className
-    ),
-    children
-  }
-);
-Label2.Optional = Optional;
-Label2.Required = Required;
 var FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -16368,6 +16614,12 @@ var PromptInputCommands = ({ items, open, onSelect, filterValue, children }) =>
     children
   ] });
 };
+var ARIA_LABEL_BY_STATUS = {
+  ready: "Send message",
+  streaming: "Stop",
+  interrupted: "Continue",
+  submitted: "Sending\u2026"
+};
 var PromptInputSubmit = ({
   ref,
   disabled,
@@ -16390,6 +16642,7 @@ var PromptInputSubmit = ({
         ref,
         type: "submit",
         disabled,
+        "aria-label": ARIA_LABEL_BY_STATUS[status],
         size: "icon-sm",
         variant: "invisible",
         isLoading: status === "submitted",
@@ -17836,7 +18089,7 @@ var cardTitleClassnames = cn(
   "tw-text-base",
   "tw-text-card-foreground"
 );
-var CardTitle = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
+var CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsx(Tag, { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
   children,
   className,
@@ -23417,6 +23670,6 @@ object-assign/index.js:
   *)
 */
 
-export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link, Markdown, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, withForm };
+export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link, Markdown, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map