@redocly/theme 0.10.0 → 0.11.0

package/lib/components/Catalog/useCatalog.js

@@ -0,0 +1,241 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCatalog = void 0;
+const React = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("../../utils");
+function useCatalog(items, config) {
+    const location = (0, react_router_dom_1.useLocation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const searchParams = useSearchParams(location);
+    const [filtersState, setFiltersState] = React.useState(() => {
+        var _a;
+        return ((_a = config.filters) !== null && _a !== void 0 ? _a : []).map((f) => {
+            return new Set(searchParams.getAll(f.property));
+        });
+    });
+    const [filterTerm, setFilterTerm] = React.useState(() => searchParams.get('filter') || '');
+    const filtersWithOptions = React.useMemo(() => collectFilterOptions(items, config.filters), [items, config.filters]);
+    const normalizedItems = React.useMemo(() => normalizeItems(items, config), [items, config]);
+    const toggleOption = React.useCallback((filterIdx, option) => {
+        setFiltersState((prev) => {
+            const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set();
+            if (newFilterOptions.has(option)) {
+                newFilterOptions.delete(option);
+            }
+            else {
+                newFilterOptions.add(option);
+            }
+            return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
+        });
+        window.scrollTo(0, 0);
+    }, []);
+    const selectOption = React.useCallback((filterIdx, option) => {
+        setFiltersState((prev) => {
+            const newFilterOptions = new Set(option ? [option] : []);
+            const filter = filtersWithOptions[filterIdx];
+            return prev.map((f, idx) => idx === filterIdx
+                ? newFilterOptions
+                : filtersWithOptions[idx].parentFilter === filter.property
+                    ? new Set()
+                    : f);
+        });
+        window.scrollTo(0, 0);
+    }, [filtersWithOptions]);
+    React.useEffect(() => {
+        filtersState.forEach((filterValues, filterIdx) => {
+            var _a;
+            const filter = (_a = config.filters) === null || _a === void 0 ? void 0 : _a[filterIdx];
+            if (!filter)
+                return;
+            searchParams.delete(filter.property);
+            filterValues.forEach((value) => {
+                searchParams.append(filter.property, value);
+            });
+        });
+        searchParams;
+        if (filterTerm) {
+            searchParams.set('filter', filterTerm);
+        }
+        else {
+            searchParams.delete('filter');
+        }
+        const newSearch = searchParams.toString();
+        navigate({ search: newSearch });
+    }, [config.filters, searchParams, filtersState, filterTerm, navigate]);
+    // filterParents[i] is a Set with indexes of parents of this filter
+    const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
+    return React.useMemo(() => {
+        const filters = filtersWithOptions.map((filter, idx) => {
+            var _a, _b, _c;
+            return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 }));
+        });
+        const filteredItems = filterItems(normalizedItems, filters, filterTerm);
+        // add more information to filters state which is known only after filtering items
+        const resolvedFilters = filters.map((filter, idx) => {
+            var _a, _b;
+            const parentFilterIdx = filters.findIndex((f) => f.property === filter.parentFilter);
+            const parentUsed = filter.parentFilter
+                ? ((_b = (_a = filtersState[parentFilterIdx]) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0
+                : true;
+            // we filter items with all the other independent filters current state
+            // then we can calculate the options for this filter after other filters are applied
+            // we need it to have correct numbers but also to eliminate options which are not available due to other filters
+            const otherIndependentFilters = filters.filter((_f, i) => { var _a; return i !== idx && !((_a = filterParents[idx]) === null || _a === void 0 ? void 0 : _a.has(i)); });
+            const filteredWithOtherFilters = filterItems(normalizedItems, otherIndependentFilters, filterTerm);
+            // collect filter options for this filter, this is probably not optimal but perf is not critical here
+            const adjustedFilterOptions = collectFilterOptions(filteredWithOtherFilters.map((m) => ({ metadata: m })), config.filters);
+            return Object.assign(Object.assign({}, filter), { parentUsed, filteredOptions: adjustedFilterOptions[idx].options });
+        });
+        const groups = config.groupByFirstFilter && filters[0].selectedOptions.size > 0
+            ? groupByFirstFilter(resolvedFilters, filteredItems)
+            : [{ title: 'APIs', items: filteredItems }];
+        return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+    }, [
+        filtersWithOptions,
+        normalizedItems,
+        filterTerm,
+        config.groupByFirstFilter,
+        config.filters,
+        filtersState,
+        toggleOption,
+        selectOption,
+        filterParents,
+    ]);
+}
+exports.useCatalog = useCatalog;
+function groupByFirstFilter(filters, filteredItems) {
+    return filters[0].options
+        .map((option) => ({
+        title: option.value,
+        items: filteredItems.filter((item) => {
+            const itemValue = (item === null || item === void 0 ? void 0 : item[filters[0].property]) || filters[0].missingCategoryName || 'Others';
+            if (Array.isArray(itemValue)) {
+                return itemValue.includes(option.value);
+            }
+            return itemValue === option.value;
+        }),
+    }))
+        .filter((group) => group.items.length > 0);
+}
+function useSearchParams(location) {
+    return React.useMemo(() => new URLSearchParams(location.search), [location.search]);
+}
+function normalizeItems(items, config) {
+    if (!config.separateVersions) {
+        // keep only default version
+        // idea: save other versions information (may be useful for cards)
+        items = items.filter((item) => item.isDefault === true || item.isDefault === undefined);
+    }
+    return items.map((item) => {
+        var _a, _b, _c;
+        const metadata = item.metadata || {};
+        const link = item.link || ((_a = (0, utils_1.findDeepFirst)(item.items || [], (i) => 'link' in i && !!i.link)) === null || _a === void 0 ? void 0 : _a.link);
+        const firstSidebarItem = (_b = item.sidebar) === null || _b === void 0 ? void 0 : _b[0];
+        return Object.assign(Object.assign({}, metadata), { title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
+    });
+}
+function collectFilterParents(filtersWithOptions) {
+    if (!filtersWithOptions)
+        return [];
+    const parents = [];
+    // use filter idx as id so we don't need users to provide unique ids
+    for (let i = 0; i < filtersWithOptions.length; i++) {
+        const filter = filtersWithOptions[i];
+        if (filter.parentFilter) {
+            const idx = filtersWithOptions.findIndex((f) => f.property === filter.parentFilter);
+            parents[idx] = parents[idx] || new Set();
+            parents[idx].add(i);
+        }
+    }
+    return parents;
+}
+function collectFilterOptions(items, filters) {
+    return (filters !== null && filters !== void 0 ? filters : []).map((filter) => {
+        var _a, _b, _c, _d;
+        const staticOptions = filter.options
+            ? Object.fromEntries(filter.options.map((o) => [o, 0]))
+            : undefined;
+        const usedOptions = staticOptions !== null && staticOptions !== void 0 ? staticOptions : {};
+        let othersCount = 0;
+        for (const item of items) {
+            const values = Array.isArray((_a = item.metadata) === null || _a === void 0 ? void 0 : _a[filter.property])
+                ? (_b = item.metadata) === null || _b === void 0 ? void 0 : _b[filter.property]
+                : [(_c = item.metadata) === null || _c === void 0 ? void 0 : _c[filter.property]];
+            for (const value of values) {
+                const str = String(value);
+                if (staticOptions) {
+                    if (str in staticOptions) {
+                        usedOptions[str] = usedOptions[str] + 1;
+                    }
+                    continue;
+                }
+                if (value) {
+                    usedOptions[str] = ((_d = usedOptions[str]) !== null && _d !== void 0 ? _d : 0) + 1;
+                }
+                else {
+                    othersCount++;
+                }
+            }
+        }
+        const options = Object.entries(usedOptions)
+            .map(([value, count]) => ({ value, count }))
+            .sort((a, b) => b.value.localeCompare(a.value));
+        if (othersCount) {
+            options.push({ value: filter.missingCategoryName || 'Others', count: othersCount });
+        }
+        return Object.assign(Object.assign({}, filter), { options });
+    });
+}
+function filterItems(normalizedItems, filters, term) {
+    // filter by filters first, and then by search term
+    const filteredByFilters = normalizedItems.filter((item) => {
+        return filters.every((filter) => {
+            if (filter.selectedOptions.size === 0) {
+                return true;
+            }
+            const itemValue = (item === null || item === void 0 ? void 0 : item[filter.property]) || filter.missingCategoryName || 'Others';
+            if (Array.isArray(itemValue)) {
+                return itemValue.some((value) => filter.selectedOptions.has(value));
+            }
+            return filter.selectedOptions.has(itemValue);
+        });
+    });
+    if (term) {
+        term = term.toLowerCase();
+        return filteredByFilters.filter((item) => {
+            return Object.values(item).some((value) => {
+                return Array.isArray(value)
+                    ? value.some((value) => String(value).toLowerCase().includes(term))
+                    : String(value).toLowerCase().includes(term);
+            });
+        });
+    }
+    else {
+        return filteredByFilters;
+    }
+}
+//# sourceMappingURL=useCatalog.js.map

package/lib/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../utils");
+exports.CodeBlock = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'CodeBlock/CodeBlock',
+})) `
+  max-height: var(--code-block-max-height, 600px);
+  word-break: var(--code-block-word-break, initial);
+  /**
+  * Based on prism-dark.css
+  */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: 0 -0.1em 0.2em black;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  .token.punctuation {
+    opacity: 1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    & + a,
+    & + a:visited {
+      color: var(--code-block-tokens-link-color);
+      text-decoration: underline;
+    }
+  }
+
+  .token.property.string {
+    color: var(--code-block-tokens-property-string-color);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  ${(0, utils_1.generateCodeBlockTokens)()}
+`;
+//# sourceMappingURL=CodeBlock.js.map

package/lib/components/CodeBlock/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/CodeBlock/CodeBlock';

package/lib/components/CodeBlock/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/CodeBlock/CodeBlock"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/CodeSample/CodeSample.js

@@ -0,0 +1,217 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeSample = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const ClipboardService_1 = require("../../utils/ClipboardService");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const Feedback_1 = require("../../components/Feedback");
+function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    const langClassName = language ? `language-${language}` : '';
+    const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } = (0, Feedback_1.useReportDialog)(report);
+    const copyCode = (code) => {
+        ClipboardService_1.ClipboardService.copyCustom(code);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
+    };
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
+        react_1.default.createElement(CodeSampleButtonContainer, null,
+            !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
+                !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copy.tooltipText || 'Copy to clipboard' }, copy.buttonText || 'Copy')),
+                isCopied && react_1.default.createElement(DoneIndicator, null, copy.toasterText || 'Copied!'))),
+            isReportButtonShown && react_1.default.createElement(Button, Object.assign({}, reportButtonProps), "Report"),
+            isReportDialogShown && react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialogProps, { location: rawContent }))),
+        react_1.default.createElement("pre", { className: langClassName },
+            react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
+}
+exports.CodeSample = CodeSample;
+const CodeSampleButtonContainer = styled_components_1.default.div `
+  display: flex;
+  position: absolute;
+  top: 12px;
+  right: 5px;
+`;
+const Button = styled_components_1.default.div `
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
+  &:hover {
+    cursor: pointer;
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+const DoneIndicator = styled_components_1.default.div `
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
+  cursor: default;
+`;
+const darkStyleTokens = (0, styled_components_1.css) `
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: hsl(30, 20%, 50%);
+  }
+  .token.property,
+  .token.tag,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: #62bff9;
+  }
+  .token.boolean {
+    color: firebrick;
+  }
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #a0fbaa;
+    & + a,
+    & + a:visited {
+      color: #4ed2ba;
+      text-decoration: underline;
+    }
+  }
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: hsl(40, 90%, 60%);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: hsl(350, 40%, 70%);
+  }
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+  .token.deleted {
+    color: red;
+  }
+`;
+const Wrapper = styled_components_1.default.div `
+  overflow: auto;
+  border-radius: 4px;
+  position: relative;
+
+  ${Button},
+  ${DoneIndicator} {
+    color: var(--code-block-controls-text-color);
+    background-color: var(--code-block-controls-background-color);
+    opacity: var(--code-block-controls-opacity);
+  }
+  ${Button}:hover {
+    color: var(--code-block-controls-hover-text-color);
+    background-color: var(--code-block-controls-hover-background-color);
+    opacity: var(--code-block-controls-active-opacity);
+  }
+
+  pre {
+    white-space: var(--code-wrap);
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: var(--code-block-border-radius);
+    font-family: var(--code-font-family);
+    background-color: var(--code-block-background-color);
+
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+
+    code {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      color: var(--code-block-text-color);
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+  }
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0;
+    border-radius: var(--border-radius);
+  }
+  code[class='language-text'] {
+    line-height: 1.2em;
+    display: inline-flex;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+    .token.italic {
+      font-style: italic;
+    }
+    .token.entity {
+      cursor: help;
+    }
+    .token.punctuation {
+      opacity: 0.7;
+    }
+    .namespace {
+      opacity: 0.7;
+    }
+
+    ${darkStyleTokens};
+  }
+`;
+//# sourceMappingURL=CodeSample.js.map

package/lib/components/CodeSample/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/CodeSample/CodeSample';

package/lib/components/CodeSample/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/CodeSample/CodeSample"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeSwitcher = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ColorModeIcon_1 = require("../../icons/ColorModeIcon");
+const hooks_1 = require("../../hooks");
+function ColorModeSwitcher() {
+    const themeSettings = (0, hooks_1.useThemeConfig)();
+    const colorMode = themeSettings.colorMode;
+    const [activeColorMode, setActiveColorMode] = (0, react_1.useState)('');
+    const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
+    const defaultColor = modes[0] || 'light';
+    (0, hooks_1.useMount)(() => {
+        setActiveColorMode(document.documentElement.className || defaultColor);
+    });
+    if (colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide) {
+        return null;
+    }
+    const handelChangeColorMode = () => {
+        const activeIndex = modes.indexOf(activeColorMode);
+        const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
+        setActiveColorMode(mode);
+        localStorage.setItem('colorSchema', mode);
+        document.documentElement.className = `${mode} notransition`;
+        window.requestAnimationFrame(() => {
+            document.documentElement.classList.remove('notransition');
+        });
+    };
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
+}
+exports.ColorModeSwitcher = ColorModeSwitcher;
+const Wrapper = styled_components_1.default.div `
+  margin-left: var(--navbar-item-padding-horizontal);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  ${ColorModeIcon_1.ColorModeIcon} {
+    display: none;
+  }
+
+  ${({ modes }) => {
+    const items = modes.map((mode) => {
+        return `
+        html.${mode} & ${ColorModeIcon_1.ColorModeIcon}.${mode} {
+          display: block;
+        }
+      `;
+    });
+    return items.join('');
+}}
+`;
+//# sourceMappingURL=ColorModeSwitcher.js.map

package/lib/components/ColorModeSwitcher/index.d.ts

@@ -0,0 +1 @@
+export * from '../../components/ColorModeSwitcher/ColorModeSwitcher';