@canonical/react-components 2.8.1 → 2.10.0

package/dist/components/CustomLayout/CustomLayout.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { HTMLProps, ReactNode } from "react";
+export type Props = {
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header?: ReactNode;
+    /**
+     * The main content.
+     */
+    children: ReactNode;
+    /**
+     * Classes to apply to the main content.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    contentClassName?: string;
+} & HTMLProps<HTMLDivElement>;
+declare const CustomLayout: ({ header, children, mainClassName, contentClassName, }: Props) => React.JSX.Element;
+export default CustomLayout;

package/dist/components/CustomLayout/CustomLayout.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ApplicationLayout = require("../ApplicationLayout");
+var _Panel = _interopRequireDefault(require("../Panel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CustomLayout = _ref => {
+  let {
+    header,
+    children,
+    mainClassName,
+    contentClassName
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.AppMain, {
+    className: mainClassName,
+    id: "main-content"
+  }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+    contentClassName: contentClassName,
+    header: header
+  }, children));
+};
+var _default = exports.default = CustomLayout;

package/dist/components/CustomLayout/CustomLayout.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomLayout from "./CustomLayout";
+declare const meta: Meta<typeof CustomLayout>;
+export default meta;
+type Story = StoryObj<typeof CustomLayout>;
+export declare const Default: Story;
+export declare const Content: Story;

package/dist/components/CustomLayout/CustomLayout.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.Content = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _CustomLayout = _interopRequireDefault(require("./CustomLayout"));
+var _AppMain = _interopRequireDefault(require("../ApplicationLayout/AppMain"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _CustomLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    children: "CustomLayout"
+  }
+};
+const Content = exports.Content = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+      id: "main-content"
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, null, "test"));
+  }
+};

package/dist/components/CustomLayout/CustomLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/CustomLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CustomLayout";
+export type { Props as CustomLayoutProps } from "./CustomLayout";

package/dist/components/CustomLayout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CustomLayout.default;
+  }
+});
+var _CustomLayout = _interopRequireDefault(require("./CustomLayout"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Spinner/Spinner.d.ts

@@ -21,9 +21,15 @@ export type Props = {
      * The politeness setting of the spinner alert.
      */
     ariaLive?: "assertive" | "off" | "polite";
+    /**
+     * Whether the Loader is replacing the main component in the application layout.
+     * In that case, the loader has to be wrapped with a main panel of the application
+     * layout. This is important for the mobile view. This prop enables the wrapping.
+     */
+    isMainComponent?: boolean;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, isMainComponent, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _CustomLayout = _interopRequireDefault(require("../CustomLayout"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
@@ -19,9 +20,10 @@ const Spinner = _ref => {
     isLight = false,
     ariaLive = "polite",
     role = "alert",
+    isMainComponent = false,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+  const loader = /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
     className: (0, _classnames.default)(className, "p-text--default"),
     role: role,
     "aria-live": ariaLive
@@ -30,11 +32,13 @@ const Spinner = _ref => {
       "is-light": isLight
     })
   }, text ? "" : "Loading"), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
+  return isMainComponent ? /*#__PURE__*/_react.default.createElement(_CustomLayout.default, null, loader) : loader;
 };
 Spinner.propTypes = {
   isLight: _propTypes.default.bool,
   text: _propTypes.default.string,
   role: _propTypes.default.string,
-  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"])
+  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"]),
+  isMainComponent: _propTypes.default.bool
 };
 var _default = exports.default = Spinner;

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export declare const loadTheme: () => string;
+export declare const isDarkTheme: (theme: string) => boolean;
+export declare const applyTheme: (theme: string) => void;
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+declare const ThemeSwitcher: FC;
+export default ThemeSwitcher;

package/dist/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadTheme = exports.isDarkTheme = exports.default = exports.applyTheme = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const LOCAL_STORAGE_KEY = "theme";
+const THEME_SYSTEM = "system";
+const THEME_DARK = "dark";
+const THEME_LIGHT = "light";
+const loadTheme = () => {
+  const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+exports.loadTheme = loadTheme;
+const saveTheme = theme => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+const isDarkTheme = theme => {
+  if (theme === THEME_SYSTEM) {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return theme === THEME_DARK;
+};
+exports.isDarkTheme = isDarkTheme;
+const applyTheme = theme => {
+  if (isDarkTheme(theme)) {
+    document.body.classList.add("is-dark");
+  } else {
+    document.body.classList.remove("is-dark");
+  }
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+exports.applyTheme = applyTheme;
+const ThemeSwitcher = () => {
+  const [activeTheme, setActiveTheme] = (0, _react.useState)(loadTheme());
+  const themeButton = theme => {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-segmented-control__button",
+      type: "button",
+      "aria-selected": activeTheme === theme ? "true" : "false",
+      onClick: () => {
+        saveTheme(theme);
+        setActiveTheme(theme);
+        applyTheme(theme);
+      }
+    }, theme);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-segmented-control"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-segmented-control__list",
+    "aria-label": "Theme switcher"
+  }, themeButton(THEME_DARK), themeButton(THEME_LIGHT), themeButton(THEME_SYSTEM)));
+};
+var _default = exports.default = ThemeSwitcher;

package/dist/components/ThemeSwitcher/ThemeSwitcher.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ThemeSwitcher from "./ThemeSwitcher";
+declare const meta: Meta<typeof ThemeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+export declare const Default: Story;

package/dist/components/ThemeSwitcher/ThemeSwitcher.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ThemeSwitcher = _interopRequireDefault(require("./ThemeSwitcher"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ThemeSwitcher.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default"
+};

package/dist/components/ThemeSwitcher/ThemeSwitcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ThemeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/components/ThemeSwitcher/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "applyTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.applyTheme;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.default;
+  }
+});
+Object.defineProperty(exports, "isDarkTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.isDarkTheme;
+  }
+});
+Object.defineProperty(exports, "loadTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.loadTheme;
+  }
+});
+var _ThemeSwitcher = _interopRequireWildcard(require("./ThemeSwitcher"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/esm/components/CustomLayout/CustomLayout.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { HTMLProps, ReactNode } from "react";
+export type Props = {
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header?: ReactNode;
+    /**
+     * The main content.
+     */
+    children: ReactNode;
+    /**
+     * Classes to apply to the main content.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    contentClassName?: string;
+} & HTMLProps<HTMLDivElement>;
+declare const CustomLayout: ({ header, children, mainClassName, contentClassName, }: Props) => React.JSX.Element;
+export default CustomLayout;

package/dist/esm/components/CustomLayout/CustomLayout.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { AppMain } from "../ApplicationLayout";
+import Panel from "../Panel";
+var CustomLayout = _ref => {
+  var {
+    header,
+    children,
+    mainClassName,
+    contentClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(AppMain, {
+    className: mainClassName,
+    id: "main-content"
+  }, /*#__PURE__*/React.createElement(Panel, {
+    contentClassName: contentClassName,
+    header: header
+  }, children));
+};
+export default CustomLayout;

package/dist/esm/components/CustomLayout/CustomLayout.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomLayout from "./CustomLayout";
+declare const meta: Meta<typeof CustomLayout>;
+export default meta;
+type Story = StoryObj<typeof CustomLayout>;
+export declare const Default: Story;
+export declare const Content: Story;

package/dist/esm/components/CustomLayout/CustomLayout.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Panel from "../Panel";
+import CustomLayout from "./CustomLayout";
+import AppMain from "../ApplicationLayout/AppMain";
+var meta = {
+  component: CustomLayout,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    children: "CustomLayout"
+  }
+};
+export var Content = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(AppMain, {
+      id: "main-content"
+    }, /*#__PURE__*/React.createElement(Panel, null, "test"));
+  }
+};

package/dist/esm/components/CustomLayout/CustomLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/CustomLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CustomLayout";
+export type { Props as CustomLayoutProps } from "./CustomLayout";

package/dist/esm/components/CustomLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./CustomLayout";

package/dist/esm/components/Spinner/Spinner.d.ts

@@ -21,9 +21,15 @@ export type Props = {
      * The politeness setting of the spinner alert.
      */
     ariaLive?: "assertive" | "off" | "polite";
+    /**
+     * Whether the Loader is replacing the main component in the application layout.
+     * In that case, the loader has to be wrapped with a main panel of the application
+     * layout. This is important for the mobile view. This prop enables the wrapping.
+     */
+    isMainComponent?: boolean;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, isMainComponent, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/esm/components/Spinner/Spinner.js

@@ -1,10 +1,11 @@
 import _pt from "prop-types";
-var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
+var _excluded = ["className", "text", "isLight", "ariaLive", "role", "isMainComponent"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import classNames from "classnames";
+import CustomLayout from "../CustomLayout";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
@@ -14,10 +15,11 @@ var Spinner = _ref => {
       text,
       isLight = false,
       ariaLive = "polite",
-      role = "alert"
+      role = "alert",
+      isMainComponent = false
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  var loader = /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: classNames(className, "p-text--default"),
     role: role,
     "aria-live": ariaLive
@@ -26,11 +28,13 @@ var Spinner = _ref => {
       "is-light": isLight
     })
   }, text ? "" : "Loading"), text && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002", /*#__PURE__*/React.createElement("span", null, text)));
+  return isMainComponent ? /*#__PURE__*/React.createElement(CustomLayout, null, loader) : loader;
 };
 Spinner.propTypes = {
   isLight: _pt.bool,
   text: _pt.string,
   role: _pt.string,
-  ariaLive: _pt.oneOf(["assertive", "off", "polite"])
+  ariaLive: _pt.oneOf(["assertive", "off", "polite"]),
+  isMainComponent: _pt.bool
 };
 export default Spinner;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export declare const loadTheme: () => string;
+export declare const isDarkTheme: (theme: string) => boolean;
+export declare const applyTheme: (theme: string) => void;
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+declare const ThemeSwitcher: FC;
+export default ThemeSwitcher;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { useState } from "react";
+var LOCAL_STORAGE_KEY = "theme";
+var THEME_SYSTEM = "system";
+var THEME_DARK = "dark";
+var THEME_LIGHT = "light";
+export var loadTheme = () => {
+  var saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+  return saved || THEME_SYSTEM;
+};
+var saveTheme = theme => {
+  localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+export var isDarkTheme = theme => {
+  if (theme === THEME_SYSTEM) {
+    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return theme === THEME_DARK;
+};
+export var applyTheme = theme => {
+  if (isDarkTheme(theme)) {
+    document.body.classList.add("is-dark");
+  } else {
+    document.body.classList.remove("is-dark");
+  }
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for the [Vanilla framework](https://docs.vanillaframework.io).
+ *
+ * The ThemeSwitcher component allows users to switch between different themes: dark, light, and system. It saves the selected theme in local storage and applies it to the document body. You can use it in user settings.
+ *
+ * In your root component, call the exported functions `loadTheme` and `applyTheme`, such as in the example below:
+ * ```
+ * useEffect(() => {
+ *   const theme = loadTheme();
+ *   applyTheme(theme);
+ * }, []);
+ * ```
+ */
+var ThemeSwitcher = () => {
+  var [activeTheme, setActiveTheme] = useState(loadTheme());
+  var themeButton = theme => {
+    return /*#__PURE__*/React.createElement("button", {
+      className: "p-segmented-control__button",
+      type: "button",
+      "aria-selected": activeTheme === theme ? "true" : "false",
+      onClick: () => {
+        saveTheme(theme);
+        setActiveTheme(theme);
+        applyTheme(theme);
+      }
+    }, theme);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-segmented-control"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-segmented-control__list",
+    "aria-label": "Theme switcher"
+  }, themeButton(THEME_DARK), themeButton(THEME_LIGHT), themeButton(THEME_SYSTEM)));
+};
+export default ThemeSwitcher;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ThemeSwitcher from "./ThemeSwitcher";
+declare const meta: Meta<typeof ThemeSwitcher>;
+export default meta;
+type Story = StoryObj<typeof ThemeSwitcher>;
+export declare const Default: Story;

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.stories.js

@@ -0,0 +1,9 @@
+import ThemeSwitcher from "./ThemeSwitcher";
+var meta = {
+  component: ThemeSwitcher,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};

package/dist/esm/components/ThemeSwitcher/ThemeSwitcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/ThemeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/esm/components/ThemeSwitcher/index.js

@@ -0,0 +1 @@
+export { default, loadTheme, isDarkTheme, applyTheme } from "./ThemeSwitcher";

package/dist/esm/index.d.ts

@@ -66,10 +66,12 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme, } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";

package/dist/esm/index.js

@@ -66,10 +66,12 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";

package/dist/index.d.ts

@@ -66,10 +66,12 @@ export { default as TableHeader } from "./components/TableHeader";
 export { default as TableRow } from "./components/TableRow";
 export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
+export { default as ThemeSwitcher, loadTheme, isDarkTheme, applyTheme, } from "./components/ThemeSwitcher";
 export { ToastNotification, ToastNotificationList, ToastNotificationProvider, useToastNotification, } from "./components/Notifications";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";

package/dist/index.js

@@ -87,9 +87,14 @@ var _exportNames = {
   TableRow: true,
   Tabs: true,
   Textarea: true,
+  ThemeSwitcher: true,
+  loadTheme: true,
+  isDarkTheme: true,
+  applyTheme: true,
   Tooltip: true,
   TablePagination: true,
   TablePaginationControls: true,
+  CustomLayout: true,
   CustomSelect: true,
   useOnClickOutside: true,
   useClickOutside: true,
@@ -244,6 +249,12 @@ Object.defineProperty(exports, "ContextualMenu", {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "CustomLayout", {
+  enumerable: true,
+  get: function () {
+    return _CustomLayout.default;
+  }
+});
 Object.defineProperty(exports, "CustomSelect", {
   enumerable: true,
   get: function () {
@@ -568,6 +579,12 @@ Object.defineProperty(exports, "Theme", {
     return _enums.Theme;
   }
 });
+Object.defineProperty(exports, "ThemeSwitcher", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.default;
+  }
+});
 Object.defineProperty(exports, "ToastNotification", {
   enumerable: true,
   get: function () {
@@ -592,6 +609,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "applyTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.applyTheme;
+  }
+});
 Object.defineProperty(exports, "createEventQueue", {
   enumerable: true,
   get: function () {
@@ -610,6 +633,12 @@ Object.defineProperty(exports, "info", {
     return _NotificationProvider.info;
   }
 });
+Object.defineProperty(exports, "isDarkTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.isDarkTheme;
+  }
+});
 Object.defineProperty(exports, "isNavigationAnchor", {
   enumerable: true,
   get: function () {
@@ -622,6 +651,12 @@ Object.defineProperty(exports, "isNavigationButton", {
     return _utils.isNavigationButton;
   }
 });
+Object.defineProperty(exports, "loadTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeSwitcher.loadTheme;
+  }
+});
 Object.defineProperty(exports, "queue", {
   enumerable: true,
   get: function () {
@@ -791,9 +826,11 @@ var _TableHeader = _interopRequireDefault(require("./components/TableHeader"));
 var _TableRow = _interopRequireDefault(require("./components/TableRow"));
 var _Tabs = _interopRequireDefault(require("./components/Tabs"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
+var _ThemeSwitcher = _interopRequireWildcard(require("./components/ThemeSwitcher"));
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
 var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));
+var _CustomLayout = _interopRequireDefault(require("./components/CustomLayout"));
 var _CustomSelect = _interopRequireDefault(require("./components/CustomSelect"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.8.1",
+  "version": "2.10.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.25.0",
+    "vanilla-framework": "4.26.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },