@keboola/design 6.2.0 → 6.4.0

package/dist/index.cjs

@@ -1079,7 +1079,9 @@ var require_es = __commonJS({
 // src/icons/index.ts
 var icons_exports = {};
 __export(icons_exports, {
-  Keboola: () => Keboola
+  Google: () => Google,
+  Keboola: () => Keboola,
+  Microsoft: () => Microsoft
 });
 __reExport(icons_exports, lucide_react_star__namespace);
 var twMerge = tailwindMerge.extendTailwindMerge({
@@ -1439,6 +1441,53 @@ var useSHA256 = (text) => {
   }, [text]);
   return text ? hash : "";
 };
+var Google = React26.forwardRef(
+  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "12 10 20 20",
+      fill: "none",
+      className: cn("lucide", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M31.6 20.2273C31.6 19.5182 31.5364 18.8364 31.4182 18.1818H22V22.05H27.3818C27.15 23.3 26.4455 24.3591 25.3864 25.0682V27.5773H28.6182C30.5091 25.8364 31.6 23.2727 31.6 20.2273Z",
+            fill: "#4285F4"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22 30C24.7 30 26.9636 29.1045 28.6181 27.5773L25.3863 25.0682C24.4909 25.6682 23.3454 26.0227 22 26.0227C19.3954 26.0227 17.1909 24.2636 16.4045 21.9H13.0636V24.4909C14.7091 27.7591 18.0909 30 22 30Z",
+            fill: "#34A853"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M16.4045 21.9C16.2045 21.3 16.0909 20.6591 16.0909 20C16.0909 19.3409 16.2045 18.7 16.4045 18.1V15.5091H13.0636C12.3864 16.8591 12 18.3864 12 20C12 21.6136 12.3864 23.1409 13.0636 24.4909L16.4045 21.9Z",
+            fill: "#FBBC04"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22 13.9773C23.4681 13.9773 24.7863 14.4818 25.8227 15.4727L28.6909 12.6045C26.9591 10.9909 24.6954 10 22 10C18.0909 10 14.7091 12.2409 13.0636 15.5091L16.4045 18.1C17.1909 15.7364 19.3954 13.9773 22 13.9773Z",
+            fill: "#EA4335"
+          }
+        ),
+        children
+      ]
+    }
+  )
+);
+Google.displayName = "Google";
 var Keboola = React26.forwardRef(
   ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -1459,6 +1508,29 @@ var Keboola = React26.forwardRef(
   )
 );
 Keboola.displayName = "Keboola";
+var Microsoft = React26.forwardRef(
+  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 21 21",
+      fill: "none",
+      className: cn("lucide", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "10", height: "10", fill: "#F25022" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "0", width: "10", height: "10", fill: "#7FBA00" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "11", width: "10", height: "10", fill: "#00A4EF" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" }),
+        children
+      ]
+    }
+  )
+);
+Microsoft.displayName = "Microsoft";
 var variants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -3112,6 +3184,184 @@ var CopyField = {
   /** Small helper text below the box. */
   Footer: CopyFooter
 };
+var LABELS = {
+  signin: "Sign in with Microsoft",
+  signup: "Sign up with Microsoft",
+  continue: "Continue with Microsoft"
+};
+var MICROSOFT_FONT_STACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
+var CLASSES = [
+  "tailwindcss-preflight",
+  "tw-inline-flex",
+  "tw-items-center",
+  "tw-justify-center",
+  "tw-gap-3",
+  "tw-h-[41px]",
+  "tw-px-3",
+  "tw-rounded-none",
+  "tw-border",
+  "tw-text-[15px]",
+  "tw-font-normal",
+  "tw-leading-none",
+  "tw-whitespace-nowrap",
+  "tw-select-none",
+  "tw-cursor-pointer",
+  "tw-transition-colors",
+  "[&_svg]:tw-shrink-0",
+  // focus — Microsoft's brand blue ring, independent of the active brand.
+  "focus-visible:tw-outline-none",
+  "focus-visible:tw-ring-2",
+  "focus-visible:tw-ring-[#0067b8]/60",
+  // disabled
+  "disabled:tw-cursor-not-allowed",
+  "disabled:tw-opacity-60",
+  // light treatment — the base.
+  "tw-bg-white",
+  "tw-text-[#5e5e5e]",
+  "tw-border-[#8c8c8c]",
+  "hover:not-disabled:tw-bg-[#f3f3f3]",
+  // dark treatment — auto-applied under html[data-theme=dark] (the ancestor
+  // selector out-specifies the plain light classes above).
+  "[[data-theme=dark]_&]:tw-bg-[#2f2f2f]",
+  "[[data-theme=dark]_&]:tw-text-white",
+  "[[data-theme=dark]_&]:tw-border-[#2f2f2f]",
+  "[[data-theme=dark]_&]:hover:not-disabled:tw-bg-[#3b3b3b]"
+];
+var MicrosoftButton = ({
+  ref,
+  label = "signin",
+  isLoading = false,
+  disabled = false,
+  type = "button",
+  className,
+  children,
+  style,
+  ...buttonProps
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "button",
+  {
+    ...buttonProps,
+    ref,
+    type,
+    disabled: disabled || isLoading,
+    "aria-disabled": disabled || isLoading,
+    style: { fontFamily: MICROSOFT_FONT_STACK, ...style },
+    className: cn(CLASSES, className),
+    children: [
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-size-[21px] tw-shrink-0 tw-animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(Microsoft, { className: "tw-size-[21px]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: children ?? LABELS[label] })
+    ]
+  }
+);
+var LABELS2 = {
+  signin: "Sign in with Google",
+  signup: "Sign up with Google",
+  continue: "Continue with Google",
+  "signin-short": "Sign in"
+};
+var GOOGLE_FONT_STACK = "'Roboto', arial, sans-serif";
+var variants3 = classVarianceAuthority.cva(
+  [
+    "tailwindcss-preflight",
+    "tw-inline-flex",
+    "tw-items-center",
+    "tw-justify-center",
+    "tw-h-10",
+    "tw-border",
+    "tw-text-sm",
+    "tw-font-medium",
+    "tw-leading-none",
+    "tw-whitespace-nowrap",
+    "tw-select-none",
+    "tw-cursor-pointer",
+    "tw-transition-shadow",
+    "[&_svg]:tw-shrink-0",
+    // focus — a neutral Google-blue ring, independent of the active brand.
+    "focus-visible:tw-outline-none",
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-ring-[#4285f4]/60",
+    // disabled
+    "disabled:tw-cursor-not-allowed",
+    "disabled:tw-opacity-60",
+    // dark treatment — auto-applied under html[data-theme=dark], overriding
+    // whichever `variant` is active (the ancestor selector out-specifies the
+    // variant's plain color classes).
+    "[[data-theme=dark]_&]:tw-bg-[#131314]",
+    "[[data-theme=dark]_&]:tw-text-[#e3e3e3]",
+    "[[data-theme=dark]_&]:tw-border-[#8e918f]",
+    "[[data-theme=dark]_&]:hover:not-disabled:tw-bg-[#1e1f20]",
+    "[[data-theme=dark]_&]:hover:not-disabled:tw-shadow-none"
+  ],
+  {
+    defaultVariants: {
+      variant: "default",
+      shape: "rectangular",
+      size: "default"
+    },
+    variants: {
+      // Google's approved light-scheme treatments; dark (above) overrides both.
+      variant: {
+        default: [
+          "tw-bg-white",
+          "tw-text-[#1f1f1f]",
+          "tw-border-[#747775]",
+          "hover:not-disabled:tw-bg-[#f7f8f8]",
+          "hover:not-disabled:tw-shadow-[0_1px_2px_0_rgba(60,64,67,0.30),0_1px_3px_1px_rgba(60,64,67,0.15)]"
+        ],
+        neutral: [
+          "tw-bg-[#f2f2f2]",
+          "tw-text-[#1f1f1f]",
+          "tw-border-transparent",
+          "hover:not-disabled:tw-bg-[#e8eaed]"
+        ]
+      },
+      shape: {
+        rectangular: ["tw-rounded"],
+        circle: ["tw-rounded-full"]
+      },
+      size: {
+        default: ["tw-gap-2.5", "tw-px-3"],
+        icon: ["tw-w-10", "tw-p-0"]
+      }
+    }
+  }
+);
+var GoogleButton = ({
+  ref,
+  variant = "default",
+  shape = "rectangular",
+  size = "default",
+  label = "signin",
+  isLoading = false,
+  disabled = false,
+  type = "button",
+  className,
+  children,
+  style,
+  ...buttonProps
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "button",
+  {
+    ...buttonProps,
+    ref,
+    type,
+    disabled,
+    style: { ...style, fontFamily: GOOGLE_FONT_STACK },
+    className: cn(variants3({ variant, shape, size }), className),
+    children: [
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-size-5 tw-shrink-0 tw-animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(Google, { className: "tw-size-5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn({
+            "tw-sr-only": size === "icon"
+          }),
+          children: children ?? LABELS2[label]
+        }
+      )
+    ]
+  }
+);
 var Link = ({
   ref,
   children,
@@ -4317,12 +4567,17 @@ Sheet.Title = SheetTitle;
 Sheet.Header = SheetHeader;
 Sheet.Footer = SheetFooter;
 Sheet.Body = SheetBody;
-var variants3 = classVarianceAuthority.cva(
+var variants4 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     "tw-group/popover-content",
     "tw-z-[1055]",
     "focus-visible:tw-outline-none",
+    // An open Radix Dialog locks `pointer-events: none` on <body>. Popover content
+    // is portalled to <body> as a sibling of the dialog, so it inherits the lock
+    // and clicks fall through — re-enable pointer events on the content itself
+    // (dismiss-on-outside-click still works, it listens on document).
+    "tw-pointer-events-auto",
     // sizing
     "tw-min-w-32",
     "tw-max-h-[var(--radix-popover-content-available-height)]",
@@ -4389,7 +4644,7 @@ var PopoverContent = ({
       ref,
       align: matchTriggerWidth ? "start" : align,
       sideOffset,
-      className: cn(variants3({ className, matchTriggerWidth, variant: effectiveVariant })),
+      className: cn(variants4({ className, matchTriggerWidth, variant: effectiveVariant })),
       onEscapeKeyDown: (event) => {
         event.stopPropagation();
         onEscapeKeyDown?.(event);
@@ -9333,8 +9588,15 @@ var inputGroupVariants = classVarianceAuthority.cva(
           "tw-border-input",
           "tw-text-foreground",
           "has-[:is(input,textarea):disabled]:tw-opacity-50",
+          // readonly: keep the themed input surface/border. The base layer's fixed
+          // `neutral-150` (a light grey) is correct for the legacy light chrome but
+          // collides with argo's themed `foreground` text — light-on-light, invisible
+          // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo
+          // input uses (validated AA), so readonly stays legible in every scheme.
+          "has-[:is(input,textarea)[readonly]]:tw-bg-muted",
+          "has-[:is(input,textarea)[readonly]]:tw-border-input",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          "has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150",
+          "has-[:is(input,textarea)[readonly]:focus]:tw-border-input",
           // aria-invalid on the control surfaces the error chrome without a `state` prop — the
           // accessible path (uses the themeable `destructive` status token).
           "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-destructive",
@@ -11405,7 +11667,7 @@ var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.js
     className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-border", className)
   }
 );
-var variants4 = classVarianceAuthority.cva(
+var variants5 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     "tw-group",
@@ -11568,7 +11830,7 @@ var SelectTrigger = ({
     SelectPrimitive__namespace.Trigger,
     {
       ref,
-      className: cn(variants4({ variant: effectiveVariant, state, sizing }), className),
+      className: cn(variants5({ variant: effectiveVariant, state, sizing }), className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }),
@@ -11864,7 +12126,7 @@ var BadgeLabel = ({
 var badgeColors = {
   gray: "tw-bg-neutral-400 tw-text-white tw-decoration-neutral-400",
   "gray-darker": "tw-bg-neutral-500 tw-text-white tw-decoration-neutral-500",
-  "gray-inverse": "tw-bg-neutral-100 tw-text-neutral-400 tw-decoration-neutral-100 [[data-theme=dark]_&]:tw-bg-neutral-800 [[data-theme=dark]_&]:tw-text-neutral-300 [[data-theme=dark]_&]:tw-decoration-neutral-800",
+  "gray-inverse": "tw-bg-neutral-100 tw-text-neutral-500 tw-decoration-neutral-100 [[data-theme=dark]_&]:tw-bg-neutral-700 [[data-theme=dark]_&]:tw-text-neutral-300 [[data-theme=dark]_&]:tw-decoration-neutral-700",
   green: "tw-bg-green-500 tw-text-white tw-decoration-green-500",
   "green-darker": "tw-bg-green-600 tw-text-white tw-decoration-green-600",
   "green-inverse": "tw-bg-green-100 tw-text-green-900 tw-decoration-green-100 [[data-theme=dark]_&]:tw-bg-green-900 [[data-theme=dark]_&]:tw-text-green-200 [[data-theme=dark]_&]:tw-decoration-green-900",
@@ -15648,7 +15910,7 @@ var TableHeader = ({
     "thead",
     {
       className: cn(
-        "tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-muted [&_tr]:tw-border-b [&_tr]:tw-border-border",
+        "tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-table-header [&_tr]:tw-border-b [&_tr]:tw-border-border",
         { "tw-shadow-table": withShadow },
         className
       ),
@@ -16873,7 +17135,7 @@ var PromptInput = ({
   ) : formEl });
 };
 PromptInput.Action = PromptInputAction;
-var variants5 = classVarianceAuthority.cva(
+var variants6 = classVarianceAuthority.cva(
   ["tw-relative", "tw-flex", "tw-items-center", "tw-z-0", "tw-overflow-x-hidden", "tw-w-full"],
   {
     defaultVariants: {
@@ -16899,7 +17161,7 @@ var Progress = ({
   variant,
   size,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactProgress.Root, { ...props, ref, className: cn(variants5({ variant, size, className })), value, children: /* @__PURE__ */ jsxRuntime.jsx(
+}) => /* @__PURE__ */ jsxRuntime.jsx(reactProgress.Root, { ...props, ref, className: cn(variants6({ variant, size, className })), value, children: /* @__PURE__ */ jsxRuntime.jsx(
   reactProgress.Indicator,
   {
     "data-slot": "progress-indicator",
@@ -17892,7 +18154,7 @@ var ToastTitle = ({
     children
   }
 );
-var variants6 = classVarianceAuthority.cva(
+var variants7 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     "tw-group/toast",
@@ -17962,7 +18224,7 @@ var ToastRoot = ({
       "data-variant": variant,
       "data-argo": renderArgo,
       className: cn(
-        variants6({ variant }),
+        variants7({ variant }),
         "data-[variant=default]:data-[argo=true]:tw-bg-background"
       ),
       children: [
@@ -20855,7 +21117,7 @@ var NavbarHeader = ({ children, className, ...rest }) => (
   // renders null when the active brand ships no logo, so no provider gate needed.
   /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: cn("tw-overflow-hidden", "tw-py-1.5", className), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { variant: "wordmark", className: "tw-h-7" }) })
 );
-var variants7 = classVarianceAuthority.cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center", "tw-gap-2"], {
+var variants8 = classVarianceAuthority.cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center", "tw-gap-2"], {
   variants: {
     marker: {
       none: [],
@@ -20875,7 +21137,7 @@ var variants7 = classVarianceAuthority.cva(["tw-p-0", "tw-flex", "tw-items-cente
     marker: "none"
   }
 });
-var NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...rest, className: variants7({ marker, className }) });
+var NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { ...rest, className: variants8({ marker, className }) });
 var NavbarMenuAvatar = ({
   ref,
   className,
@@ -20927,7 +21189,7 @@ var NavbarMenuAvatar = ({
     }
   );
 };
-var variants8 = classVarianceAuthority.cva(
+var variants9 = classVarianceAuthority.cva(
   [
     "tw-flex",
     "tw-justify-center",
@@ -20978,9 +21240,9 @@ var NavbarMenuItemAdornment = ({
   ...props
 }) => {
   const Comp = asChild ? reactSlot.Slot : "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props, ref, className: variants8({ variant, className }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props, ref, className: variants9({ variant, className }) });
 };
-var variants9 = classVarianceAuthority.cva(
+var variants10 = classVarianceAuthority.cva(
   [
     "tw-group/navbar-menu-button",
     "tw-box-border",
@@ -21078,7 +21340,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: cn(variants9({ className, variant })),
+      className: cn(variants10({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsxRuntime.jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
@@ -22342,7 +22604,7 @@ Pagination.Button = PaginationButton;
 Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 Pagination.Ellipsis = PaginationEllipsis;
-var variants10 = classVarianceAuthority.cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
+var variants11 = classVarianceAuthority.cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
   variants: {
     diff: {
       added: ["tw-bg-green-200"],
@@ -22350,8 +22612,8 @@ var variants10 = classVarianceAuthority.cva(["tw-p-0.5", "tw-text-inherit", "tw-
     }
   }
 });
-var DiffViewMark = ({ diff, children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("mark", { ...props, className: cn(variants10({ diff, className })), children });
-var variants11 = classVarianceAuthority.cva(
+var DiffViewMark = ({ diff, children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("mark", { ...props, className: cn(variants11({ diff, className })), children });
+var variants12 = classVarianceAuthority.cva(
   [
     // reset global styles
     "[&_pre]:tw-p-0",
@@ -22419,7 +22681,7 @@ var variants11 = classVarianceAuthority.cva(
 );
 var DiffViewTd = ({ diff, variant = "default", children, className, ...props }) => {
   const needsCodeFormatting = variant === "code" || variant === "gutter";
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props, className: cn(variants11({ variant, className, diff })), children: needsCodeFormatting ? /* @__PURE__ */ jsxRuntime.jsx("pre", { children }) : children });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...props, className: cn(variants12({ variant, className, diff })), children: needsCodeFormatting ? /* @__PURE__ */ jsxRuntime.jsx("pre", { children }) : children });
 };
 var DiffViewTh = ({ variant = "default", children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
@@ -24645,6 +24907,7 @@ exports.FormGroup = FormGroup;
 exports.FullScreenModal = FullScreenModal;
 exports.FullScreenModalBody = FullScreenModalBody;
 exports.FullScreenModalHeader = FullScreenModalHeader;
+exports.GoogleButton = GoogleButton;
 exports.HelpBlock = HelpBlock;
 exports.HoverCard = HoverCard;
 exports.InlineStepDetail = InlineStepDetail;
@@ -24656,6 +24919,7 @@ exports.Link = Link;
 exports.Markdown = Markdown;
 exports.MarkedText = MarkedText;
 exports.MessageBubble = MessageBubble;
+exports.MicrosoftButton = MicrosoftButton;
 exports.Modal = Modal;
 exports.MultiActionButtonGroup = MultiActionButtonGroup;
 exports.MultiCombobox = MultiCombobox;