@keboola/design 4.2.1 → 4.3.1

package/dist/index.cjs

@@ -1649,6 +1649,9 @@ var argoVariants = classVarianceAuthority.cva(
         outline: [
           "!tw-border-input",
           "tw-bg-background",
+          // Semantic base text color so the label/icon flips in dark mode
+          // (matches `invisible`); previously unset → inherited a fixed dark color.
+          "tw-text-foreground",
           "hover:not-disabled:tw-bg-accent",
           "hover:not-disabled:tw-text-accent-foreground",
           "hover:active:tw-bg-background",
@@ -9353,198 +9356,6 @@ var TextInput = ({
     }
   );
 };
-var TimePickerButton = ({
-  ref,
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "button",
-  {
-    ...rest,
-    ref,
-    type: "button",
-    className: cn(
-      "tailwindcss-preflight",
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      "tw-size-10",
-      "tw-rounded",
-      "tw-transition-colors",
-      "tw-select-none",
-      "hover:tw-bg-accent",
-      "focus-visible:tw-outline",
-      "focus-visible:tw-outline-2",
-      "focus-visible:tw-outline-primary",
-      "aria-selected:tw-bg-primary",
-      "aria-selected:tw-text-primary-foreground",
-      className
-    ),
-    children
-  }
-);
-
-// src/components/TimePicker/utils.ts
-var pad = (n) => n.toString().padStart(2, "0");
-var parseTime = (time) => {
-  if (!time) return { hour: null, minute: null };
-  const match2 = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
-  if (!match2) return { hour: null, minute: null };
-  const hour = Number(match2[1]);
-  const minute = Number(match2[2]);
-  if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59)
-    return { hour: null, minute: null };
-  return { hour, minute };
-};
-var scrollToSelected = (viewport) => {
-  if (!viewport) return;
-  requestAnimationFrame(() => {
-    const selected = viewport.querySelector('[aria-selected="true"]');
-    selected?.scrollIntoView({ block: "center" });
-  });
-};
-var HOURS = Array.from({ length: 24 }, (_, i) => i);
-var MINUTES = Array.from({ length: 60 }, (_, i) => i);
-var TimePicker = ({
-  align = "end",
-  alignOffset = -18,
-  children,
-  defaultOpen,
-  defaultSelected,
-  onOpenChange,
-  onSelect,
-  open,
-  selected,
-  sideOffset = 12
-}) => {
-  const [internalSelected, setInternalSelected] = React27.useState(defaultSelected ?? null);
-  const isControlled = selected !== void 0;
-  const currentValue = isControlled ? selected : internalSelected;
-  const parsed = parseTime(currentValue);
-  const hour = parsed.hour ?? null;
-  const minute = parsed.minute ?? null;
-  const handleSelect = (time) => {
-    if (!isControlled) {
-      setInternalSelected(time);
-    }
-    onSelect?.(time);
-  };
-  const handleHourSelect = (h) => {
-    const m = minute ?? 0;
-    handleSelect(`${pad(h)}:${pad(m)}`);
-  };
-  const handleMinuteSelect = (m) => {
-    const h = hour ?? 0;
-    handleSelect(`${pad(h)}:${pad(m)}`);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { defaultOpen, onOpenChange, open, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Popover.Content,
-      {
-        align,
-        alignOffset,
-        sideOffset,
-        className: "tw-flex tw-flex-row",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-px-3", children: HOURS.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
-            TimePickerButton,
-            {
-              onClick: () => handleHourSelect(value),
-              "aria-selected": value === hour,
-              children: pad(value)
-            },
-            value
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-px-3", children: MINUTES.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
-            TimePickerButton,
-            {
-              onClick: () => handleMinuteSelect(value),
-              "aria-selected": value === minute,
-              children: pad(value)
-            },
-            value
-          )) })
-        ]
-      }
-    )
-  ] });
-};
-var TimeInput = ({
-  ref,
-  defaultValue,
-  disabled,
-  onBlur,
-  onChange,
-  onValueBlur,
-  onValueChange,
-  placeholder = "Select time",
-  readOnly,
-  value,
-  variant,
-  className,
-  ...props
-}) => {
-  const [isOpen, setIsOpen] = React27.useState(false);
-  const [internalValue, setInternalValue] = React27.useState(defaultValue ?? null);
-  const isControlled = value !== void 0;
-  const currentValue = isControlled ? value : internalValue;
-  const handleChange = (event) => {
-    const newValue = event.target.value || null;
-    onChange?.(event);
-    onValueChange?.(newValue);
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-  };
-  const handleBlur = (event) => {
-    const newValue = event.target.value || null;
-    onBlur?.(event);
-    onValueBlur?.(newValue);
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-  };
-  const handleTimePickerSelect = (time) => {
-    if (!isControlled) setInternalValue(time);
-    onValueChange?.(time);
-  };
-  const handleClear = () => {
-    if (!isControlled) setInternalValue(null);
-    onValueChange?.(null);
-  };
-  const handleOpenChange = (open) => {
-    setIsOpen(open);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
-    {
-      ...props,
-      ref,
-      type: "time",
-      disabled,
-      readOnly,
-      placeholder,
-      className: cn("[&_input::-webkit-calendar-picker-indicator]:tw-hidden", className),
-      value: currentValue,
-      variant,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      onClear: currentValue ? handleClear : void 0,
-      rightSuffix: !disabled && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-        TimePicker,
-        {
-          open: isOpen,
-          onOpenChange: handleOpenChange,
-          onSelect: handleTimePickerSelect,
-          selected: currentValue,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Select Time", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Clock, { className: "tw-size-4" }) })
-        }
-      ) : void 0
-    }
-  );
-};
 var CommandInput = ({
   ref,
   className,
@@ -9803,6 +9614,97 @@ var DateRangePicker = ({
   ] }) })
 ] });
 DateRangePicker.displayName = "DateRangePicker";
+
+// src/components/TimePicker/utils.ts
+var pad = (n) => n.toString().padStart(2, "0");
+var parseTime = (time) => {
+  if (!time) return { hour: null, minute: null };
+  const match2 = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
+  if (!match2) return { hour: null, minute: null };
+  const hour = Number(match2[1]);
+  const minute = Number(match2[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59)
+    return { hour: null, minute: null };
+  return { hour, minute };
+};
+var scrollToSelected = (viewport) => {
+  if (!viewport) return;
+  requestAnimationFrame(() => {
+    const selected = viewport.querySelector('[aria-pressed="true"]');
+    selected?.scrollIntoView({ block: "center" });
+  });
+};
+var HOURS = Array.from({ length: 24 }, (_, i) => i);
+var MINUTES = Array.from({ length: 60 }, (_, i) => i);
+var TimePicker = ({
+  align = "end",
+  alignOffset = -18,
+  children,
+  defaultOpen,
+  defaultSelected,
+  onOpenChange,
+  onSelect,
+  open,
+  selected,
+  sideOffset = 12
+}) => {
+  const [internalSelected, setInternalSelected] = React27.useState(defaultSelected ?? null);
+  const isControlled = selected !== void 0;
+  const currentValue = isControlled ? selected : internalSelected;
+  const parsed = parseTime(currentValue);
+  const hour = parsed.hour ?? null;
+  const minute = parsed.minute ?? null;
+  const handleSelect = (time) => {
+    if (!isControlled) {
+      setInternalSelected(time);
+    }
+    onSelect?.(time);
+  };
+  const handleHourSelect = (h) => {
+    const m = minute ?? 0;
+    handleSelect(`${pad(h)}:${pad(m)}`);
+  };
+  const handleMinuteSelect = (m) => {
+    const h = hour ?? 0;
+    handleSelect(`${pad(h)}:${pad(m)}`);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { defaultOpen, onOpenChange, open, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Popover.Content,
+      {
+        align,
+        alignOffset,
+        sideOffset,
+        className: "tw-flex tw-flex-row",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-p-3", children: HOURS.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
+            Toggle,
+            {
+              variant: "ghost",
+              className: "tw-size-10 tw-p-0",
+              pressed: value === hour,
+              onPressedChange: () => handleHourSelect(value),
+              children: pad(value)
+            },
+            value
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-p-3", children: MINUTES.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
+            Toggle,
+            {
+              variant: "ghost",
+              className: "tw-size-10 tw-p-0",
+              pressed: value === minute,
+              onPressedChange: () => handleMinuteSelect(value),
+              children: pad(value)
+            },
+            value
+          )) })
+        ]
+      }
+    )
+  ] });
+};
 var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -11124,10 +11026,10 @@ var variants4 = classVarianceAuthority.cva(
         ]
       },
       sizing: {
-        // border-inclusive heights: 40 / 36 / 34 px
+        // border-inclusive heights: 40 / 36 / 32 px (small matches Button small)
         default: ["tw-px-4", "tw-py-2.5", "tw-text-sm/[18px]", "tw-h-10", "tw-min-h-10"],
         medium: ["tw-px-4", "tw-py-2", "tw-text-sm/[18px]", "tw-h-9", "tw-min-h-9"],
-        small: ["tw-px-4", "tw-py-2", "tw-text-sm/[16px]", "tw-h-[34px]", "tw-min-h-[34px]"]
+        small: ["tw-px-4", "tw-py-2", "tw-text-sm/[16px]", "tw-h-8", "tw-min-h-8"]
       },
       state: {
         default: [
@@ -12637,6 +12539,43 @@ var ColorInput = ({
     }
   );
 };
+var OPTIONS = [
+  { value: "light", label: "Light", icon: icons_exports.Sun },
+  { value: "dark", label: "Dark", icon: icons_exports.Moon },
+  { value: "system", label: "System", icon: icons_exports.Monitor }
+];
+var triggerSizeMap = { small: "icon-sm", medium: "icon" };
+var ColorModeSwitch = ({ value, onValueChange, size = "small", className }) => {
+  const active = OPTIONS.find((option) => option.value === value);
+  const ActiveIcon = active?.icon ?? icons_exports.Monitor;
+  const activeLabel = active?.label ?? "System";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: triggerSizeMap[size],
+        "aria-label": `Color mode: ${activeLabel}`,
+        title: `Color mode: ${activeLabel}`,
+        className,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ActiveIcon, { className: "tw-size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioGroup, { value, onValueChange, children: OPTIONS.map(({ value: option, label, icon: Icon2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu.RadioItem,
+      {
+        value: option,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon2, {}),
+        indicator: "check",
+        indicatorAlign: "end",
+        closeOnSelect: true,
+        children: label
+      },
+      option
+    )) }) })
+  ] });
+};
 var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
 var NumberInput = ({
   ref,
@@ -12813,6 +12752,107 @@ var PasswordInput = ({
     }
   );
 };
+var TimeInput = ({
+  ref,
+  // group props
+  state,
+  variant,
+  focusVariant,
+  sizing,
+  className,
+  // own props
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueBlur,
+  onChange,
+  onBlur,
+  allowClear = false,
+  // input props
+  disabled,
+  readOnly,
+  placeholder = "Select time",
+  ...restInputProps
+}) => {
+  const inputRef = React27.useRef(null);
+  const [isOpen, setIsOpen] = React27.useState(false);
+  const [internalValue, setInternalValue] = React27.useState(defaultValue ?? null);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp ?? null : internalValue;
+  const setValue = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const canClear = allowClear && !!value && !disabled && !readOnly;
+  const showPicker2 = !disabled && !readOnly;
+  const handleChange = (event) => {
+    setValue(event.target.value || null);
+    onChange?.(event);
+  };
+  const handleBlur = (event) => {
+    const newValue = event.target.value || null;
+    if (!isControlled) setInternalValue(newValue);
+    onValueBlur?.(newValue);
+    onBlur?.(event);
+  };
+  const handleTimePickerSelect = (time) => {
+    setValue(time);
+  };
+  const handleClear = () => {
+    if (!inputRef.current) return;
+    inputRef.current.value = "";
+    setValue(null);
+    onChange?.(createChangeInputEvent(inputRef.current));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    InputGroup,
+    {
+      state,
+      variant,
+      sizing,
+      focusVariant,
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputGroup.Input,
+          {
+            ...restInputProps,
+            ref: mergeRefs(ref ?? null, inputRef),
+            type: "time",
+            className: "[&::-webkit-calendar-picker-indicator]:tw-hidden [&::-webkit-datetime-edit-fields-wrapper]:tw-py-0",
+            value: value ?? "",
+            placeholder,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            disabled,
+            readOnly
+          }
+        ),
+        (canClear || showPicker2) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroup.Addon, { align: "inline-end", children: [
+          canClear && /* @__PURE__ */ jsxRuntime.jsx(
+            InputGroup.Button,
+            {
+              "aria-label": "Clear time",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
+            }
+          ),
+          showPicker2 && /* @__PURE__ */ jsxRuntime.jsx(
+            TimePicker,
+            {
+              open: isOpen,
+              onOpenChange: setIsOpen,
+              onSelect: handleTimePickerSelect,
+              selected: value,
+              children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { "aria-label": "Select time", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Clock, { className: "tw-size-4" }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var InputOtpVariantContext = React27.createContext({
   sizing: "md",
   state: "default"
@@ -17460,7 +17500,7 @@ var ThemeProvider = ({
   }, [brand, resolvedMode]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ThemeContext, { value: { brand, setBrand, colorScheme, resolvedMode }, children: [
     isRoot && /* @__PURE__ */ jsxRuntime.jsx(AIGradientsSvg, {}),
-    children
+    isRoot ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children }) : children
   ] });
 };
 var useTheme = () => {
@@ -20334,7 +20374,9 @@ var Table = ({
         "table",
         {
           className: cn(
-            "tw-w-full tw-caption-bottom tw-text-sm",
+            // `tw-text-foreground` (a semantic token) so header + cell text flips
+            // under `[data-theme='dark']` instead of inheriting a fixed dark color.
+            "tw-w-full tw-caption-bottom tw-text-sm tw-text-foreground",
             borderCollapsed ? "tw-border-collapse" : "tw-border-separate tw-border-spacing-y-1",
             className
           ),
@@ -22198,6 +22240,7 @@ exports.Collapsible = Collapsible;
 exports.CollapsiblePanel = CollapsiblePanel;
 exports.CollapsibleStepHeader = CollapsibleStepHeader;
 exports.ColorInput = ColorInput;
+exports.ColorModeSwitch = ColorModeSwitch;
 exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandGroup = CommandGroup;