@keboola/design 4.2.1 → 4.3.0

package/AGENTS.md

@@ -465,7 +465,7 @@ import { ThemeProvider } from '@keboola/design';
 ```
 
 - **`brand`** — the active brand decides the chrome. **argo styling is brand-driven**: any non-`keboola-legacy` brand renders argo chrome automatically (`renderArgo = !isLegacy`), so a default `keboola` / `example-customer` brand needs no per-component flags. The `keboola-legacy` brand renders the pre-modernization chrome. With no `brand` prop, `ThemeProvider` defaults to the canonical `keboola` brand.
-- **`colorScheme`** — `"light"` (default) / `"dark"` / `"system"`. Dark mode is set **here, on the root provider** — not per component. `"system"` follows the OS preference.
+- **`colorScheme`** — `"light"` (default) / `"dark"` / `"system"`. Dark mode is set **here, on the root provider** — not per component. `"system"` follows the OS preference. Render the user-facing light/dark/system control with the **`ColorModeSwitch`** block (`<ColorModeSwitch value={scheme} onValueChange={setScheme} />`) — a controlled icon-button + dropdown; feed the same state to `ThemeProvider`'s `colorScheme`.
 
 Chrome is driven **entirely** by the active brand — there is no per-call-site `argo` prop or `variant="argo"` escape hatch. To render a subtree under a different brand (e.g. an argo section inside a `keboola-legacy` app), wrap it in a nested `<ThemeProvider brand={…}>`; `useIsLegacyBrand()` reads the nearest provider, so the override is scoped to that subtree.
 

package/dist/index.cjs

@@ -12637,6 +12637,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,
@@ -22198,6 +22235,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;