@midas-ds/components 17.14.8 → 17.15.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 17.15.0 (2026-05-21)
+
+### 🚀 Features
+
+- **components,color-scheme-switch:** add scheme and onSchemeChange props ([428780719c2](https://github.com/migrationsverket/midas/commit/428780719c2))
+
+## 17.14.9 (2026-05-21)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.14.8
+
 ## 17.14.8 (2026-05-12)
 
 ### 🧱 Updated Dependencies

package/chunks/ColorSchemeSwitch-CjXb7w5A.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import * as p from "react";
+import { VisuallyHidden as i } from "react-aria";
+import { SelectionIndicator as d } from "react-aria-components";
+import { a as M, T as m } from "./ToggleButtonGroup-DRnEEi5-.js";
+import { c as h } from "./createLucideIcon-CP-mMPfa.js";
+import { u as _ } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/ColorSchemeSwitch.css';const v = [
+  [
+    "path",
+    {
+      d: "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z",
+      key: "1pdavp"
+    }
+  ],
+  ["path", { d: "M20.054 15.987H3.946", key: "14rxg9" }]
+], N = h("laptop", v);
+const I = [
+  [
+    "path",
+    {
+      d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+      key: "kfwtm"
+    }
+  ]
+], b = h("moon", I);
+const w = [
+  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
+  ["path", { d: "M12 2v2", key: "tus03m" }],
+  ["path", { d: "M12 20v2", key: "1lh1kg" }],
+  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
+  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
+  ["path", { d: "M2 12h2", key: "1t8f8n" }],
+  ["path", { d: "M20 12h2", key: "1q8mjw" }],
+  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
+  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
+], x = h("sun", w), j = "_button_1r8vq_1", C = "_selectionIndicator_1r8vq_14", o = {
+  button: j,
+  selectionIndicator: C
+}, L = { darkMode: "Dark Mode", lightMode: "Light Mode", system: "System Setting" }, q = { darkMode: "Mörkt läge", lightMode: "Ljust läge", system: "Systeminställning" }, z = {
+  en: L,
+  sv: q
+}, V = ({
+  selector: c = ":root",
+  defaultScheme: g = "light dark",
+  scheme: a,
+  onSchemeChange: y,
+  defaultValue: u,
+  className: k
+}) => {
+  const [f, S] = p.useState(
+    u ?? /* @__PURE__ */ new Set([a ?? g])
+  ), r = a ? /* @__PURE__ */ new Set([a]) : f;
+  p.useEffect(() => {
+    const t = document.querySelector(c);
+    if (t) {
+      const n = Array.from(r).join(" ");
+      t.style.removeProperty("color-scheme"), n === "light dark" ? delete t.dataset.colorScheme : t.dataset.colorScheme = n;
+    } else
+      console.warn(`No element found for selector: "${c}"`);
+  }, [r, c]);
+  const l = _(z);
+  return /* @__PURE__ */ s(
+    M,
+    {
+      selectionMode: "single",
+      selectedKeys: r,
+      onSelectionChange: (t) => {
+        const n = Array.from(t)[0];
+        S(t), y?.(n);
+      },
+      disallowEmptySelection: !0,
+      className: k,
+      children: [
+        /* @__PURE__ */ s(
+          m,
+          {
+            id: "light dark",
+            className: o.button,
+            children: [
+              /* @__PURE__ */ e(N, {}),
+              /* @__PURE__ */ e(i, { children: l.format("system") }),
+              /* @__PURE__ */ e(d, { className: o.selectionIndicator })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          m,
+          {
+            id: "light",
+            className: o.button,
+            children: [
+              /* @__PURE__ */ e(x, {}),
+              /* @__PURE__ */ e(i, { children: l.format("lightMode") }),
+              /* @__PURE__ */ e(d, { className: o.selectionIndicator })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          m,
+          {
+            id: "dark",
+            className: o.button,
+            children: [
+              /* @__PURE__ */ e(b, {}),
+              /* @__PURE__ */ e(i, { children: l.format("darkMode") }),
+              /* @__PURE__ */ e(d, { className: o.selectionIndicator })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as C
+};

package/color-scheme-switch/ColorSchemeSwitch.d.ts

@@ -9,6 +9,10 @@ export interface ColorSchemeSwitchProps {
      * @default 'light dark'
      */
     defaultScheme?: ColorScheme;
+    /** The controlled color scheme. When provided, the component becomes controlled — pair with `onSchemeChange` to update it. */
+    scheme?: ColorScheme;
+    /** Called when the user selects a new color scheme. Use this to persist the selection, e.g. to `localStorage`. */
+    onSchemeChange?: (scheme: ColorScheme) => void;
     /**
      * @deprecated since v17.9.0 Use `defaultScheme` instead.
      */

package/color-scheme-switch/ColorSchemeSwitch.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ColorSchemeSwitch>;
 export default meta;
 type Story = StoryObj<typeof ColorSchemeSwitch>;
 export declare const Primary: Story;
+export declare const WithCallback: Story;

package/color-scheme-switch/index.js

@@ -1,4 +1,4 @@
-import { C as r } from "../chunks/ColorSchemeSwitch-Bp3PSGkA.js";
+import { C as r } from "../chunks/ColorSchemeSwitch-CjXb7w5A.js";
 export {
   r as ColorSchemeSwitch
 };

package/index.js

@@ -9,7 +9,7 @@ import { C as b, a as S, b as D, c as I, d as F, e as R, f as G, g as P, h as k
 import { C as M } from "./chunks/CharacterCounter-Dgnv-orm.js";
 import { C as A } from "./chunks/Checkbox-CyamRrFD.js";
 import { C as y } from "./chunks/CheckboxGroup-CmjQm14M.js";
-import { C as N } from "./chunks/ColorSchemeSwitch-Bp3PSGkA.js";
+import { C as N } from "./chunks/ColorSchemeSwitch-CjXb7w5A.js";
 import { C as O } from "./chunks/ComboBox-BCfucCKv.js";
 import { D as Q } from "./chunks/DateField-CpvZGNHu.js";
 import { D as Z, a as j } from "./chunks/DateInput-NzWcnB4y.js";
@@ -52,7 +52,7 @@ import { c as Ko } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as Wo, MenuTrigger as Xo, RouterProvider as Yo } from "react-aria-components";
 import { u as $o } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as or } from "react-stately";
-const a = "17.14.8", o = {
+const a = "17.15.0", o = {
   version: a
 }, r = o.version;
 export {

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.14.8",
+  "version": "17.15.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.14.7",
+    "@midas-ds/theme": "3.14.8",
     "@react-aria/focus": "^3.21.5",
     "@react-stately/toggle": "^3.9.5",
     "@react-stately/utils": "^3.11.0",

package/chunks/ColorSchemeSwitch-Bp3PSGkA.js

@@ -1,113 +0,0 @@
-'use client';
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as h from "react";
-import { VisuallyHidden as r } from "react-aria";
-import { SelectionIndicator as l } from "react-aria-components";
-import { a as k, T as i } from "./ToggleButtonGroup-DRnEEi5-.js";
-import { c as d } from "./createLucideIcon-CP-mMPfa.js";
-import { u as f } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/ColorSchemeSwitch.css';const M = [
-  [
-    "path",
-    {
-      d: "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z",
-      key: "1pdavp"
-    }
-  ],
-  ["path", { d: "M20.054 15.987H3.946", key: "14rxg9" }]
-], S = d("laptop", M);
-const _ = [
-  [
-    "path",
-    {
-      d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
-      key: "kfwtm"
-    }
-  ]
-], N = d("moon", _);
-const v = [
-  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
-  ["path", { d: "M12 2v2", key: "tus03m" }],
-  ["path", { d: "M12 20v2", key: "1lh1kg" }],
-  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
-  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
-  ["path", { d: "M2 12h2", key: "1t8f8n" }],
-  ["path", { d: "M20 12h2", key: "1q8mjw" }],
-  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
-  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
-], I = d("sun", v), b = "_button_1r8vq_1", j = "_selectionIndicator_1r8vq_14", t = {
-  button: b,
-  selectionIndicator: j
-}, w = { darkMode: "Dark Mode", lightMode: "Light Mode", system: "System Setting" }, x = { darkMode: "Mörkt läge", lightMode: "Ljust läge", system: "Systeminställning" }, L = {
-  en: w,
-  sv: x
-}, $ = ({
-  selector: c = ":root",
-  defaultScheme: p = "light dark",
-  defaultValue: y,
-  className: g
-}) => {
-  const [n, u] = h.useState(
-    y ?? /* @__PURE__ */ new Set([p])
-  );
-  h.useEffect(() => {
-    const o = document.querySelector(c);
-    if (o) {
-      const m = Array.from(n).join(" ");
-      o.style.removeProperty("color-scheme"), m === "light dark" ? delete o.dataset.colorScheme : o.dataset.colorScheme = m;
-    } else
-      console.warn(`No element found for selector: "${c}"`);
-  }, [n, c]);
-  const a = f(L);
-  return /* @__PURE__ */ s(
-    k,
-    {
-      selectionMode: "single",
-      selectedKeys: n,
-      onSelectionChange: u,
-      disallowEmptySelection: !0,
-      className: g,
-      children: [
-        /* @__PURE__ */ s(
-          i,
-          {
-            id: "light dark",
-            className: t.button,
-            children: [
-              /* @__PURE__ */ e(S, {}),
-              /* @__PURE__ */ e(r, { children: a.format("system") }),
-              /* @__PURE__ */ e(l, { className: t.selectionIndicator })
-            ]
-          }
-        ),
-        /* @__PURE__ */ s(
-          i,
-          {
-            id: "light",
-            className: t.button,
-            children: [
-              /* @__PURE__ */ e(I, {}),
-              /* @__PURE__ */ e(r, { children: a.format("lightMode") }),
-              /* @__PURE__ */ e(l, { className: t.selectionIndicator })
-            ]
-          }
-        ),
-        /* @__PURE__ */ s(
-          i,
-          {
-            id: "dark",
-            className: t.button,
-            children: [
-              /* @__PURE__ */ e(N, {}),
-              /* @__PURE__ */ e(r, { children: a.format("darkMode") }),
-              /* @__PURE__ */ e(l, { className: t.selectionIndicator })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  $ as C
-};