@keboola/design 6.2.0 → 6.3.0

package/dist/index.js

@@ -1047,6 +1047,7 @@ var require_es = __commonJS({
 // src/icons/index.ts
 var icons_exports = {};
 __export(icons_exports, {
+  Google: () => Google,
   Keboola: () => Keboola
 });
 __reExport(icons_exports, lucide_react_star);
@@ -1407,6 +1408,53 @@ var useSHA256 = (text) => {
   }, [text]);
   return text ? hash : "";
 };
+var Google = forwardRef(
+  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 = forwardRef(
   ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
     "svg",
@@ -3080,6 +3128,115 @@ var CopyField = {
   /** Small helper text below the box. */
   Footer: CopyFooter
 };
+var LABELS = {
+  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 = 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__ */ jsxs(
+  "button",
+  {
+    ...buttonProps,
+    ref,
+    type,
+    disabled,
+    style: { ...style, fontFamily: GOOGLE_FONT_STACK },
+    className: cn(variants3({ variant, shape, size }), className),
+    children: [
+      isLoading ? /* @__PURE__ */ jsx(icons_exports.Loader2, { className: "tw-size-5 tw-shrink-0 tw-animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Google, { className: "tw-size-5" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn({
+            "tw-sr-only": size === "icon"
+          }),
+          children: children ?? LABELS[label]
+        }
+      )
+    ]
+  }
+);
 var Link = ({
   ref,
   children,
@@ -4285,7 +4442,7 @@ Sheet.Title = SheetTitle;
 Sheet.Header = SheetHeader;
 Sheet.Footer = SheetFooter;
 Sheet.Body = SheetBody;
-var variants3 = cva(
+var variants4 = cva(
   [
     "tailwindcss-preflight",
     "tw-group/popover-content",
@@ -4357,7 +4514,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);
@@ -11373,7 +11530,7 @@ var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
     className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-border", className)
   }
 );
-var variants4 = cva(
+var variants5 = cva(
   [
     "tailwindcss-preflight",
     "tw-group",
@@ -11536,7 +11693,7 @@ var SelectTrigger = ({
     SelectPrimitive.Trigger,
     {
       ref,
-      className: cn(variants4({ variant: effectiveVariant, state, sizing }), className),
+      className: cn(variants5({ variant: effectiveVariant, state, sizing }), className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
@@ -11832,7 +11989,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-800 [[data-theme=dark]_&]:tw-text-neutral-300 [[data-theme=dark]_&]:tw-decoration-neutral-800",
   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",
@@ -15616,7 +15773,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
       ),
@@ -16841,7 +16998,7 @@ var PromptInput = ({
   ) : formEl });
 };
 PromptInput.Action = PromptInputAction;
-var variants5 = cva(
+var variants6 = cva(
   ["tw-relative", "tw-flex", "tw-items-center", "tw-z-0", "tw-overflow-x-hidden", "tw-w-full"],
   {
     defaultVariants: {
@@ -16867,7 +17024,7 @@ var Progress = ({
   variant,
   size,
   ...props
-}) => /* @__PURE__ */ jsx(Root$c, { ...props, ref, className: cn(variants5({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Root$c, { ...props, ref, className: cn(variants6({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
   Indicator$1,
   {
     "data-slot": "progress-indicator",
@@ -17860,7 +18017,7 @@ var ToastTitle = ({
     children
   }
 );
-var variants6 = cva(
+var variants7 = cva(
   [
     "tailwindcss-preflight",
     "tw-group/toast",
@@ -17930,7 +18087,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: [
@@ -20823,7 +20980,7 @@ var NavbarHeader = ({ children, className, ...rest }) => (
   // renders null when the active brand ships no logo, so no provider gate needed.
   /* @__PURE__ */ jsx("div", { ...rest, className: cn("tw-overflow-hidden", "tw-py-1.5", className), children: children ?? /* @__PURE__ */ jsx(BrandLogo, { variant: "wordmark", className: "tw-h-7" }) })
 );
-var variants7 = cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center", "tw-gap-2"], {
+var variants8 = cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center", "tw-gap-2"], {
   variants: {
     marker: {
       none: [],
@@ -20843,7 +21000,7 @@ var variants7 = cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center"
     marker: "none"
   }
 });
-var NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsx("ul", { ...rest, className: variants7({ marker, className }) });
+var NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsx("ul", { ...rest, className: variants8({ marker, className }) });
 var NavbarMenuAvatar = ({
   ref,
   className,
@@ -20895,7 +21052,7 @@ var NavbarMenuAvatar = ({
     }
   );
 };
-var variants8 = cva(
+var variants9 = cva(
   [
     "tw-flex",
     "tw-justify-center",
@@ -20946,9 +21103,9 @@ var NavbarMenuItemAdornment = ({
   ...props
 }) => {
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(Comp, { ...props, ref, className: variants8({ variant, className }) });
+  return /* @__PURE__ */ jsx(Comp, { ...props, ref, className: variants9({ variant, className }) });
 };
-var variants9 = cva(
+var variants10 = cva(
   [
     "tw-group/navbar-menu-button",
     "tw-box-border",
@@ -21046,7 +21203,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: cn(variants9({ className, variant })),
+      className: cn(variants10({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
@@ -22310,7 +22467,7 @@ Pagination.Button = PaginationButton;
 Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 Pagination.Ellipsis = PaginationEllipsis;
-var variants10 = cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
+var variants11 = cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
   variants: {
     diff: {
       added: ["tw-bg-green-200"],
@@ -22318,8 +22475,8 @@ var variants10 = cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
     }
   }
 });
-var DiffViewMark = ({ diff, children, className, ...props }) => /* @__PURE__ */ jsx("mark", { ...props, className: cn(variants10({ diff, className })), children });
-var variants11 = cva(
+var DiffViewMark = ({ diff, children, className, ...props }) => /* @__PURE__ */ jsx("mark", { ...props, className: cn(variants11({ diff, className })), children });
+var variants12 = cva(
   [
     // reset global styles
     "[&_pre]:tw-p-0",
@@ -22387,7 +22544,7 @@ var variants11 = cva(
 );
 var DiffViewTd = ({ diff, variant = "default", children, className, ...props }) => {
   const needsCodeFormatting = variant === "code" || variant === "gutter";
-  return /* @__PURE__ */ jsx("td", { ...props, className: cn(variants11({ variant, className, diff })), children: needsCodeFormatting ? /* @__PURE__ */ jsx("pre", { children }) : children });
+  return /* @__PURE__ */ jsx("td", { ...props, className: cn(variants12({ variant, className, diff })), children: needsCodeFormatting ? /* @__PURE__ */ jsx("pre", { children }) : children });
 };
 var DiffViewTh = ({ variant = "default", children, className, ...props }) => /* @__PURE__ */ jsx(
   "th",
@@ -24504,6 +24661,6 @@ object-assign/index.js:
   *)
 */
 
-export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, ChartPanel, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, 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, StatCard, StatCardGrid, 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, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
+export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, ChartPanel, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, 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, StatCard, StatCardGrid, 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, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map