@keboola/design 6.3.0 → 6.4.0

package/dist/index.js

@@ -1048,7 +1048,8 @@ var require_es = __commonJS({
 var icons_exports = {};
 __export(icons_exports, {
   Google: () => Google,
-  Keboola: () => Keboola
+  Keboola: () => Keboola,
+  Microsoft: () => Microsoft
 });
 __reExport(icons_exports, lucide_react_star);
 var twMerge = extendTailwindMerge({
@@ -1475,6 +1476,29 @@ var Keboola = forwardRef(
   )
 );
 Keboola.displayName = "Keboola";
+var Microsoft = forwardRef(
+  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ 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__ */ jsx("rect", { x: "0", y: "0", width: "10", height: "10", fill: "#F25022" }),
+        /* @__PURE__ */ jsx("rect", { x: "11", y: "0", width: "10", height: "10", fill: "#7FBA00" }),
+        /* @__PURE__ */ jsx("rect", { x: "0", y: "11", width: "10", height: "10", fill: "#00A4EF" }),
+        /* @__PURE__ */ jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" }),
+        children
+      ]
+    }
+  )
+);
+Microsoft.displayName = "Microsoft";
 var variants = cva(
   [
     "tailwindcss-preflight",
@@ -3129,6 +3153,75 @@ var CopyField = {
   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__ */ 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__ */ jsx(icons_exports.Loader2, { className: "tw-size-[21px] tw-shrink-0 tw-animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Microsoft, { className: "tw-size-[21px]" }),
+      /* @__PURE__ */ jsx("span", { children: children ?? LABELS[label] })
+    ]
+  }
+);
+var LABELS2 = {
   signin: "Sign in with Google",
   signup: "Sign up with Google",
   continue: "Continue with Google",
@@ -3231,7 +3324,7 @@ var GoogleButton = ({
           className: cn({
             "tw-sr-only": size === "icon"
           }),
-          children: children ?? LABELS[label]
+          children: children ?? LABELS2[label]
         }
       )
     ]
@@ -4448,6 +4541,11 @@ var variants4 = cva(
     "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)]",
@@ -9458,8 +9556,15 @@ var inputGroupVariants = 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",
@@ -11989,7 +12094,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-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",
+  "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",
@@ -24661,6 +24766,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, 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 };
+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, MicrosoftButton, 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