@contember/react-utils 1.2.0-rc.0 → 1.2.0-rc.2

package/dist/development/context/createOptionalContextFactory.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+function createOptionalContextFactory(name, initialValue) {
+  const OptionalContext = createContext(initialValue);
+  OptionalContext.displayName = name;
+  const useOptionalContext = () => {
+    return useContext(OptionalContext) ?? initialValue;
+  };
+  return [OptionalContext, useOptionalContext];
+}
+export {
+  createOptionalContextFactory
+};
+//# sourceMappingURL=createOptionalContextFactory.js.map

package/dist/development/context/createOptionalContextFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOptionalContextFactory.js","sources":["../../../src/context/createOptionalContextFactory.ts"],"sourcesContent":["import type { Context } from 'react'\nimport { createContext, useContext } from 'react'\n\nexport function createOptionalContextFactory<T>(name: string, initialValue: T): [Context<T>, () => T] {\n  const OptionalContext = createContext<T>(initialValue)\n  OptionalContext.displayName = name\n\n  const useOptionalContext = () => {\n    return useContext(OptionalContext) ?? initialValue\n  }\n\n  return [OptionalContext, useOptionalContext]\n}\n"],"names":[],"mappings":";AAGgB,SAAA,6BAAgC,MAAc,cAAwC;AAC9F,QAAA,kBAAkB,cAAiB,YAAY;AACrD,kBAAgB,cAAc;AAE9B,QAAM,qBAAqB,MAAM;AACxB,WAAA,WAAW,eAAe,KAAK;AAAA,EAAA;AAGjC,SAAA,CAAC,iBAAiB,kBAAkB;AAC7C;"}

package/dist/development/index.js

@@ -1,4 +1,5 @@
 import { createNonNullableContextFactory } from "./context/createNonNullableContextFactory.js";
+import { createOptionalContextFactory } from "./context/createOptionalContextFactory.js";
 import { isNoopScopedConsole, noopLog, noopLogged, noopScopedConsole } from "./debug-context/Constants.js";
 import { DebugChildren, ScopedConsoleContext, useScopedConsoleRef } from "./debug-context/Context.js";
 import { unwrapRefValue } from "./hooks/unwrapRefValue.js";
@@ -33,11 +34,23 @@ import { noop } from "./referentiallyStable/noop.js";
 import { returnFalse } from "./referentiallyStable/returnFalse.js";
 import { returnTrue } from "./referentiallyStable/returnTrue.js";
 import { useReferentiallyStableCallback } from "./referentiallyStable/useReferentiallyStableCallback.js";
+import { ColorSchemeProvider } from "./theming/ColorSchemeProvider.js";
+import { GlobalClassNamePrefixContext } from "./theming/GlobalClassNamePrefixContext.js";
+import { ColorSchemeContext, DEFAULT_COLOR_SCHEME, useColorScheme } from "./theming/contexts.js";
+import { useClassName } from "./theming/useClassName.js";
+import { useClassNameFactory } from "./theming/useClassNameFactory.js";
+import { useThemedClassName } from "./theming/useThemedClassName.js";
+import { useThemedClassNameFactory } from "./theming/useThemedClassNameFactory.js";
 export {
+  ColorSchemeContext,
+  ColorSchemeProvider,
   ContainerWidthContext,
+  DEFAULT_COLOR_SCHEME,
   DebugChildren,
+  GlobalClassNamePrefixContext,
   ScopedConsoleContext,
   createNonNullableContextFactory,
+  createOptionalContextFactory,
   emptyArray,
   emptyObject,
   identityFunction,
@@ -52,6 +65,9 @@ export {
   useAbortController,
   useAddClassNameDuringResize,
   useArrayMapMemo,
+  useClassName,
+  useClassNameFactory,
+  useColorScheme,
   useComposeRef,
   useConstantLengthInvariant,
   useConstantValueInvariant,
@@ -73,6 +89,8 @@ export {
   useScopedConsoleRef,
   useScrollOffsets,
   useSessionStorageState,
+  useThemedClassName,
+  useThemedClassNameFactory,
   useUpdatedRef,
   useWindowSize
 };

package/dist/development/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/development/theming/ColorSchemeProvider.js

@@ -0,0 +1,18 @@
+import { jsxDEV } from "react/jsx-dev-runtime";
+import { memo } from "react";
+import { useColorScheme, ColorSchemeContext } from "./contexts.js";
+const ColorSchemeProvider = memo(
+  ({ children, scheme }) => {
+    const inheritedColorScheme = useColorScheme();
+    return /* @__PURE__ */ jsxDEV(ColorSchemeContext.Provider, { value: scheme ?? inheritedColorScheme, children }, void 0, false, {
+      fileName: "/__w/interface/interface/packages/react-utils/src/theming/ColorSchemeProvider.tsx",
+      lineNumber: 15,
+      columnNumber: 4
+    }, globalThis);
+  }
+);
+ColorSchemeProvider.displayName = "Interface.ColorSchemeProvider";
+export {
+  ColorSchemeProvider
+};
+//# sourceMappingURL=ColorSchemeProvider.js.map

package/dist/development/theming/ColorSchemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","sources":["../../../src/theming/ColorSchemeProvider.tsx"],"sourcesContent":["import { KebabCase } from '@contember/utilities'\nimport { memo } from 'react'\nimport { ColorSchemeContext, useColorScheme } from './contexts'\n\nexport type ColorSchemeProviderProps<T extends KebabCase<string>> = {\n\tchildren: React.ReactNode\n\tscheme?: T\n}\n\nexport const ColorSchemeProvider = memo(\n\t<T extends KebabCase<string>>({ children, scheme }: ColorSchemeProviderProps<T>) => {\n\t\tconst inheritedColorScheme = useColorScheme()\n\n\t\treturn (\n\t\t\t<ColorSchemeContext.Provider value={scheme ?? inheritedColorScheme}>{children}</ColorSchemeContext.Provider>\n\t\t)\n\t},\n)\nColorSchemeProvider.displayName = 'Interface.ColorSchemeProvider'\n"],"names":["this"],"mappings":";;;AASO,MAAM,sBAAsB;AAAA,EAClC,CAA8B,EAAE,UAAU,aAA0C;AACnF,UAAM,uBAAuB;AAE7B,kCACE,mBAAmB,UAAnB,EAA4B,OAAO,UAAU,sBAAuB,SAArE,GAAA,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAA8E,GAAAA,UAAA;AAAA,EAEhF;AACD;AACA,oBAAoB,cAAc;"}

package/dist/development/theming/GlobalClassNamePrefixContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const GlobalClassNamePrefixContext = createContext("cui-");
+export {
+  GlobalClassNamePrefixContext
+};
+//# sourceMappingURL=GlobalClassNamePrefixContext.js.map

package/dist/development/theming/GlobalClassNamePrefixContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalClassNamePrefixContext.js","sources":["../../../src/theming/GlobalClassNamePrefixContext.ts"],"sourcesContent":["import { createContext } from 'react'\n\nexport const GlobalClassNamePrefixContext = createContext<string>('cui-')\n"],"names":[],"mappings":";AAEa,MAAA,+BAA+B,cAAsB,MAAM;"}

package/dist/development/theming/contexts.js

@@ -0,0 +1,12 @@
+import { createOptionalContextFactory } from "../context/createOptionalContextFactory.js";
+const DEFAULT_COLOR_SCHEME = "system";
+const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory(
+  "Interface.ColorScheme",
+  DEFAULT_COLOR_SCHEME
+);
+export {
+  ColorSchemeContext,
+  DEFAULT_COLOR_SCHEME,
+  useColorScheme
+};
+//# sourceMappingURL=contexts.js.map

package/dist/development/theming/contexts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contexts.js","sources":["../../../src/theming/contexts.ts"],"sourcesContent":["import { createOptionalContextFactory } from '../context'\n\nexport const DEFAULT_COLOR_SCHEME = 'system'\n\n\n/**\n * @group UI\n *\n * @description\n * Provides the current color scheme, possible values are `'light'`, `'dark'` or `'system'`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\n *\n */\nexport const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory<string>(\n\t'Interface.ColorScheme',\n\tDEFAULT_COLOR_SCHEME,\n)\n"],"names":[],"mappings":";AAEO,MAAM,uBAAuB;AAYvB,MAAA,CAAC,oBAAoB,cAAc,IAAI;AAAA,EACnD;AAAA,EACA;AACD;"}

package/dist/development/theming/useClassName.js

@@ -0,0 +1,17 @@
+import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
+import { useContext } from "react";
+import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+function useClassName(componentClassName, additionalClassName = null, prefixOverride) {
+  const contextPrefix = useContext(GlobalClassNamePrefixContext);
+  const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
+  const componentClassNameList = flatClassNameList(componentClassName).map(
+    (componentClassName2) => `${classNamePrefix}${componentClassName2}`
+  );
+  return deduplicateClassName(componentClassNameList.concat(
+    flatClassNameList(additionalClassName)
+  )).join(" ");
+}
+export {
+  useClassName
+};
+//# sourceMappingURL=useClassName.js.map

package/dist/development/theming/useClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassName.js","sources":["../../../src/theming/useClassName.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * @param componentClassName - Component class name\n * @param additionalClassName - Additional class name\n * @param prefixOverride - Context component prefix override\n * @returns Prefixed component class name.\n */\nexport function useClassName (\n\tcomponentClassName: NestedClassName,\n\tadditionalClassName: NestedClassName = null,\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn deduplicateClassName(componentClassNameList.concat(\n\t\tflatClassNameList(additionalClassName),\n\t)).join(' ')\n}\n"],"names":["componentClassName"],"mappings":";;;AAYO,SAAS,aACf,oBACA,sBAAuC,MACvC,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,qBAAqB,uBAAuB;AAAA,IAClD,kBAAkB,mBAAmB;AAAA,EAAA,CACrC,EAAE,KAAK,GAAG;AACZ;"}

package/dist/development/theming/useClassNameFactory.js

@@ -0,0 +1,20 @@
+import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
+import { useContext } from "react";
+import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+function useClassNameFactory(componentClassName, glue = "-", prefixOverride) {
+  const contextPrefix = useContext(GlobalClassNamePrefixContext);
+  const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
+  const componentClassNameList = flatClassNameList(componentClassName).map(
+    (componentClassName2) => `${classNamePrefix}${componentClassName2}`
+  );
+  return function componentClassNameFor(suffix = null, additionalClassName = null) {
+    const classNameSuffix = suffix ?? "";
+    return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
+      flatClassNameList(additionalClassName)
+    )).join(" ");
+  };
+}
+export {
+  useClassNameFactory
+};
+//# sourceMappingURL=useClassNameFactory.js.map

package/dist/development/theming/useClassNameFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassNameFactory.js","sources":["../../../src/theming/useClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * Returns a reusable function almost that is handy for components\n * with many sub-component parts that should inherit the root component\n * name.\n *\n * Also, product of the factory is a function that can be used outside of rules of hooks.\n *\n * @param componentClassName - Component class name\n * @param glue - String to use to glue component and sub-component suffix\n * @param prefixOverride - Context component prefix override\n * @returns\n */\nexport function useClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(additionalClassName),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;AAkBO,SAAS,oBACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD,kBAAkB,mBAAmB;AAAA,IAAA,CACrC,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}

package/dist/development/theming/useThemedClassName.js

@@ -0,0 +1,17 @@
+import { filterThemedClassName, colorSchemeClassName } from "@contember/utilities";
+import { useColorScheme } from "./contexts.js";
+import { useClassName } from "./useClassName.js";
+function useThemedClassName(componentClassName, additionalClassName, prefixOverride) {
+  return useClassName(
+    componentClassName,
+    filterThemedClassName(
+      additionalClassName,
+      colorSchemeClassName(useColorScheme())
+    ),
+    prefixOverride
+  );
+}
+export {
+  useThemedClassName
+};
+//# sourceMappingURL=useThemedClassName.js.map

package/dist/development/theming/useThemedClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedClassName.js","sources":["../../../src/theming/useThemedClassName.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, filterThemedClassName } from '@contember/utilities'\nimport { useColorScheme } from './contexts'\nimport { useClassName } from './useClassName'\n\n/**\n * Hook for component class name accepting outer class name with theme-* and scheme-* class manes\n *\n * It looks for theme CSS classes in the given class name, deduplicates them and returns final theme class name with scheme CSS class set\n * @internal\n *\n * @param componentClassName - Component class name\n * @param additionalClassName - Additional class name\n * @param prefixOverride - Context component prefix override\n * @returns string\n * @see useColorScheme\n *\n * @example\n * ```tsx\n * function Button({ className }: { className?: string | string[] }) {\n * \t const [contentThemeClassName, controlsThemeClassName] = useThemedClassName(className)\n *\n * \t return (\n * \t\t <div className={contentThemeClassName}>\n * \t\t\t <button className={controlsThemeClassName}>Click me</button>\n * \t\t </div>\n * \t )\n * }\n *\n * function App() {\n * \t return (\n * \t\t <Button className=\"theme-default theme-danger:hover\" />\n * \t )\n * }\n *\n * // renders:\n * // <div class=\"scheme-system theme-default-content theme-danger-content:hover\">\n * // \t<button class=\"scheme-system theme-default-controls theme-danger-controls:hover\">Click me</button>\n * // </div>\n * ```\n */\nexport function useThemedClassName(\n\tcomponentClassName: NestedClassName,\n\tadditionalClassName: NestedClassName,\n\tprefixOverride?: string | null | undefined,\n): string {\n\treturn useClassName(\n\t\tcomponentClassName,\n\t\tfilterThemedClassName(\n\t\t\tadditionalClassName,\n\t\t\tcolorSchemeClassName(useColorScheme()),\n\t\t),\n\t\tprefixOverride,\n\t)\n}\n"],"names":[],"mappings":";;;AAwCgB,SAAA,mBACf,oBACA,qBACA,gBACS;AACF,SAAA;AAAA,IACN;AAAA,IACA;AAAA,MACC;AAAA,MACA,qBAAqB,gBAAgB;AAAA,IACtC;AAAA,IACA;AAAA,EAAA;AAEF;"}

package/dist/development/theming/useThemedClassNameFactory.js

@@ -0,0 +1,27 @@
+import { flatClassNameList, colorSchemeClassName, deduplicateClassName, filterThemedClassName } from "@contember/utilities";
+import { useContext } from "react";
+import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+import { useColorScheme } from "./contexts.js";
+function useThemedClassNameFactory(componentClassName, glue = "-", prefixOverride) {
+  const contextPrefix = useContext(GlobalClassNamePrefixContext);
+  const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
+  const componentClassNameList = flatClassNameList(componentClassName).map(
+    (componentClassName2) => `${classNamePrefix}${componentClassName2}`
+  );
+  const colorScheme = colorSchemeClassName(useColorScheme());
+  return function componentClassNameFor(suffix = null, additionalClassName = null) {
+    const classNameSuffix = suffix ?? "";
+    return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
+      flatClassNameList(
+        filterThemedClassName(
+          additionalClassName,
+          colorScheme
+        )
+      )
+    )).join(" ");
+  };
+}
+export {
+  useThemedClassNameFactory
+};
+//# sourceMappingURL=useThemedClassNameFactory.js.map

package/dist/development/theming/useThemedClassNameFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedClassNameFactory.js","sources":["../../../src/theming/useThemedClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\nimport { useColorScheme } from './contexts'\n\nexport function useThemedClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\tconst colorScheme = colorSchemeClassName(useColorScheme())\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(\n\t\t\t\tfilterThemedClassName(\n\t\t\t\t\tadditionalClassName,\n\t\t\t\t\tcolorScheme,\n\t\t\t\t),\n\t\t\t),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;;AAKO,SAAS,0BACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAGtC,QAAA,cAAc,qBAAqB,eAAA,CAAgB;AAEzD,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IAAA,CACA,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}

package/dist/production/context/createOptionalContextFactory.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+function createOptionalContextFactory(name, initialValue) {
+  const OptionalContext = createContext(initialValue);
+  OptionalContext.displayName = name;
+  const useOptionalContext = () => {
+    return useContext(OptionalContext) ?? initialValue;
+  };
+  return [OptionalContext, useOptionalContext];
+}
+export {
+  createOptionalContextFactory
+};
+//# sourceMappingURL=createOptionalContextFactory.js.map

package/dist/production/context/createOptionalContextFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOptionalContextFactory.js","sources":["../../../src/context/createOptionalContextFactory.ts"],"sourcesContent":["import type { Context } from 'react'\nimport { createContext, useContext } from 'react'\n\nexport function createOptionalContextFactory<T>(name: string, initialValue: T): [Context<T>, () => T] {\n  const OptionalContext = createContext<T>(initialValue)\n  OptionalContext.displayName = name\n\n  const useOptionalContext = () => {\n    return useContext(OptionalContext) ?? initialValue\n  }\n\n  return [OptionalContext, useOptionalContext]\n}\n"],"names":[],"mappings":";AAGgB,SAAA,6BAAgC,MAAc,cAAwC;AAC9F,QAAA,kBAAkB,cAAiB,YAAY;AACrD,kBAAgB,cAAc;AAE9B,QAAM,qBAAqB,MAAM;AACxB,WAAA,WAAW,eAAe,KAAK;AAAA,EAAA;AAGjC,SAAA,CAAC,iBAAiB,kBAAkB;AAC7C;"}

package/dist/production/index.js

@@ -1,4 +1,5 @@
 import { createNonNullableContextFactory } from "./context/createNonNullableContextFactory.js";
+import { createOptionalContextFactory } from "./context/createOptionalContextFactory.js";
 import { isNoopScopedConsole, noopLog, noopLogged, noopScopedConsole } from "./debug-context/Constants.js";
 import { DebugChildren, ScopedConsoleContext, useScopedConsoleRef } from "./debug-context/Context.js";
 import { unwrapRefValue } from "./hooks/unwrapRefValue.js";
@@ -33,11 +34,23 @@ import { noop } from "./referentiallyStable/noop.js";
 import { returnFalse } from "./referentiallyStable/returnFalse.js";
 import { returnTrue } from "./referentiallyStable/returnTrue.js";
 import { useReferentiallyStableCallback } from "./referentiallyStable/useReferentiallyStableCallback.js";
+import { ColorSchemeProvider } from "./theming/ColorSchemeProvider.js";
+import { GlobalClassNamePrefixContext } from "./theming/GlobalClassNamePrefixContext.js";
+import { ColorSchemeContext, DEFAULT_COLOR_SCHEME, useColorScheme } from "./theming/contexts.js";
+import { useClassName } from "./theming/useClassName.js";
+import { useClassNameFactory } from "./theming/useClassNameFactory.js";
+import { useThemedClassName } from "./theming/useThemedClassName.js";
+import { useThemedClassNameFactory } from "./theming/useThemedClassNameFactory.js";
 export {
+  ColorSchemeContext,
+  ColorSchemeProvider,
   ContainerWidthContext,
+  DEFAULT_COLOR_SCHEME,
   DebugChildren,
+  GlobalClassNamePrefixContext,
   ScopedConsoleContext,
   createNonNullableContextFactory,
+  createOptionalContextFactory,
   emptyArray,
   emptyObject,
   identityFunction,
@@ -52,6 +65,9 @@ export {
   useAbortController,
   useAddClassNameDuringResize,
   useArrayMapMemo,
+  useClassName,
+  useClassNameFactory,
+  useColorScheme,
   useComposeRef,
   useConstantLengthInvariant,
   useConstantValueInvariant,
@@ -73,6 +89,8 @@ export {
   useScopedConsoleRef,
   useScrollOffsets,
   useSessionStorageState,
+  useThemedClassName,
+  useThemedClassNameFactory,
   useUpdatedRef,
   useWindowSize
 };

package/dist/production/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/production/theming/ColorSchemeProvider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useColorScheme, ColorSchemeContext } from "./contexts.js";
+const ColorSchemeProvider = memo(
+  ({ children, scheme }) => {
+    const inheritedColorScheme = useColorScheme();
+    return /* @__PURE__ */ jsx(ColorSchemeContext.Provider, { value: scheme ?? inheritedColorScheme, children });
+  }
+);
+ColorSchemeProvider.displayName = "Interface.ColorSchemeProvider";
+export {
+  ColorSchemeProvider
+};
+//# sourceMappingURL=ColorSchemeProvider.js.map

package/dist/production/theming/ColorSchemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.js","sources":["../../../src/theming/ColorSchemeProvider.tsx"],"sourcesContent":["import { KebabCase } from '@contember/utilities'\nimport { memo } from 'react'\nimport { ColorSchemeContext, useColorScheme } from './contexts'\n\nexport type ColorSchemeProviderProps<T extends KebabCase<string>> = {\n\tchildren: React.ReactNode\n\tscheme?: T\n}\n\nexport const ColorSchemeProvider = memo(\n\t<T extends KebabCase<string>>({ children, scheme }: ColorSchemeProviderProps<T>) => {\n\t\tconst inheritedColorScheme = useColorScheme()\n\n\t\treturn (\n\t\t\t<ColorSchemeContext.Provider value={scheme ?? inheritedColorScheme}>{children}</ColorSchemeContext.Provider>\n\t\t)\n\t},\n)\nColorSchemeProvider.displayName = 'Interface.ColorSchemeProvider'\n"],"names":[],"mappings":";;;AASO,MAAM,sBAAsB;AAAA,EAClC,CAA8B,EAAE,UAAU,aAA0C;AACnF,UAAM,uBAAuB;AAE7B,+BACE,mBAAmB,UAAnB,EAA4B,OAAO,UAAU,sBAAuB,SAAS,CAAA;AAAA,EAEhF;AACD;AACA,oBAAoB,cAAc;"}

package/dist/production/theming/GlobalClassNamePrefixContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const GlobalClassNamePrefixContext = createContext("cui-");
+export {
+  GlobalClassNamePrefixContext
+};
+//# sourceMappingURL=GlobalClassNamePrefixContext.js.map

package/dist/production/theming/GlobalClassNamePrefixContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalClassNamePrefixContext.js","sources":["../../../src/theming/GlobalClassNamePrefixContext.ts"],"sourcesContent":["import { createContext } from 'react'\n\nexport const GlobalClassNamePrefixContext = createContext<string>('cui-')\n"],"names":[],"mappings":";AAEa,MAAA,+BAA+B,cAAsB,MAAM;"}

package/dist/production/theming/contexts.js

@@ -0,0 +1,12 @@
+import { createOptionalContextFactory } from "../context/createOptionalContextFactory.js";
+const DEFAULT_COLOR_SCHEME = "system";
+const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory(
+  "Interface.ColorScheme",
+  DEFAULT_COLOR_SCHEME
+);
+export {
+  ColorSchemeContext,
+  DEFAULT_COLOR_SCHEME,
+  useColorScheme
+};
+//# sourceMappingURL=contexts.js.map

package/dist/production/theming/contexts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contexts.js","sources":["../../../src/theming/contexts.ts"],"sourcesContent":["import { createOptionalContextFactory } from '../context'\n\nexport const DEFAULT_COLOR_SCHEME = 'system'\n\n\n/**\n * @group UI\n *\n * @description\n * Provides the current color scheme, possible values are `'light'`, `'dark'` or `'system'`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\n *\n */\nexport const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory<string>(\n\t'Interface.ColorScheme',\n\tDEFAULT_COLOR_SCHEME,\n)\n"],"names":[],"mappings":";AAEO,MAAM,uBAAuB;AAYvB,MAAA,CAAC,oBAAoB,cAAc,IAAI;AAAA,EACnD;AAAA,EACA;AACD;"}

package/dist/production/theming/useClassName.js

@@ -0,0 +1,17 @@
+import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
+import { useContext } from "react";
+import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+function useClassName(componentClassName, additionalClassName = null, prefixOverride) {
+  const contextPrefix = useContext(GlobalClassNamePrefixContext);
+  const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
+  const componentClassNameList = flatClassNameList(componentClassName).map(
+    (componentClassName2) => `${classNamePrefix}${componentClassName2}`
+  );
+  return deduplicateClassName(componentClassNameList.concat(
+    flatClassNameList(additionalClassName)
+  )).join(" ");
+}
+export {
+  useClassName
+};
+//# sourceMappingURL=useClassName.js.map

package/dist/production/theming/useClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassName.js","sources":["../../../src/theming/useClassName.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * @param componentClassName - Component class name\n * @param additionalClassName - Additional class name\n * @param prefixOverride - Context component prefix override\n * @returns Prefixed component class name.\n */\nexport function useClassName (\n\tcomponentClassName: NestedClassName,\n\tadditionalClassName: NestedClassName = null,\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn deduplicateClassName(componentClassNameList.concat(\n\t\tflatClassNameList(additionalClassName),\n\t)).join(' ')\n}\n"],"names":["componentClassName"],"mappings":";;;AAYO,SAAS,aACf,oBACA,sBAAuC,MACvC,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,qBAAqB,uBAAuB;AAAA,IAClD,kBAAkB,mBAAmB;AAAA,EAAA,CACrC,EAAE,KAAK,GAAG;AACZ;"}

package/dist/production/theming/useClassNameFactory.js

@@ -0,0 +1,20 @@
+import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
+import { useContext } from "react";
+import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+function useClassNameFactory(componentClassName, glue = "-", prefixOverride) {
+  const contextPrefix = useContext(GlobalClassNamePrefixContext);
+  const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
+  const componentClassNameList = flatClassNameList(componentClassName).map(
+    (componentClassName2) => `${classNamePrefix}${componentClassName2}`
+  );
+  return function componentClassNameFor(suffix = null, additionalClassName = null) {
+    const classNameSuffix = suffix ?? "";
+    return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
+      flatClassNameList(additionalClassName)
+    )).join(" ");
+  };
+}
+export {
+  useClassNameFactory
+};
+//# sourceMappingURL=useClassNameFactory.js.map

package/dist/production/theming/useClassNameFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassNameFactory.js","sources":["../../../src/theming/useClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * Returns a reusable function almost that is handy for components\n * with many sub-component parts that should inherit the root component\n * name.\n *\n * Also, product of the factory is a function that can be used outside of rules of hooks.\n *\n * @param componentClassName - Component class name\n * @param glue - String to use to glue component and sub-component suffix\n * @param prefixOverride - Context component prefix override\n * @returns\n */\nexport function useClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(additionalClassName),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;AAkBO,SAAS,oBACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD,kBAAkB,mBAAmB;AAAA,IAAA,CACrC,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}

package/dist/production/theming/useThemedClassName.js

@@ -0,0 +1,17 @@
+import { filterThemedClassName, colorSchemeClassName } from "@contember/utilities";
+import { useColorScheme } from "./contexts.js";
+import { useClassName } from "./useClassName.js";
+function useThemedClassName(componentClassName, additionalClassName, prefixOverride) {
+  return useClassName(
+    componentClassName,
+    filterThemedClassName(
+      additionalClassName,
+      colorSchemeClassName(useColorScheme())
+    ),
+    prefixOverride
+  );
+}
+export {
+  useThemedClassName
+};
+//# sourceMappingURL=useThemedClassName.js.map

package/dist/production/theming/useThemedClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedClassName.js","sources":["../../../src/theming/useThemedClassName.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, filterThemedClassName } from '@contember/utilities'\nimport { useColorScheme } from './contexts'\nimport { useClassName } from './useClassName'\n\n/**\n * Hook for component class name accepting outer class name with theme-* and scheme-* class manes\n *\n * It looks for theme CSS classes in the given class name, deduplicates them and returns final theme class name with scheme CSS class set\n * @internal\n *\n * @param componentClassName - Component class name\n * @param additionalClassName - Additional class name\n * @param prefixOverride - Context component prefix override\n * @returns string\n * @see useColorScheme\n *\n * @example\n * ```tsx\n * function Button({ className }: { className?: string | string[] }) {\n * \t const [contentThemeClassName, controlsThemeClassName] = useThemedClassName(className)\n *\n * \t return (\n * \t\t <div className={contentThemeClassName}>\n * \t\t\t <button className={controlsThemeClassName}>Click me</button>\n * \t\t </div>\n * \t )\n * }\n *\n * function App() {\n * \t return (\n * \t\t <Button className=\"theme-default theme-danger:hover\" />\n * \t )\n * }\n *\n * // renders:\n * // <div class=\"scheme-system theme-default-content theme-danger-content:hover\">\n * // \t<button class=\"scheme-system theme-default-controls theme-danger-controls:hover\">Click me</button>\n * // </div>\n * ```\n */\nexport function useThemedClassName(\n\tcomponentClassName: NestedClassName,\n\tadditionalClassName: NestedClassName,\n\tprefixOverride?: string | null | undefined,\n): string {\n\treturn useClassName(\n\t\tcomponentClassName,\n\t\tfilterThemedClassName(\n\t\t\tadditionalClassName,\n\t\t\tcolorSchemeClassName(useColorScheme()),\n\t\t),\n\t\tprefixOverride,\n\t)\n}\n"],"names":[],"mappings":";;;AAwCgB,SAAA,mBACf,oBACA,qBACA,gBACS;AACF,SAAA;AAAA,IACN;AAAA,IACA;AAAA,MACC;AAAA,MACA,qBAAqB,gBAAgB;AAAA,IACtC;AAAA,IACA;AAAA,EAAA;AAEF;"}

package/dist/production/theming/useThemedClassNameFactory.js

@@ -0,0 +1,27 @@
+import { flatClassNameList, colorSchemeClassName, deduplicateClassName, filterThemedClassName } from "@contember/utilities";
+import { useContext } from "react";
+import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
+import { useColorScheme } from "./contexts.js";
+function useThemedClassNameFactory(componentClassName, glue = "-", prefixOverride) {
+  const contextPrefix = useContext(GlobalClassNamePrefixContext);
+  const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
+  const componentClassNameList = flatClassNameList(componentClassName).map(
+    (componentClassName2) => `${classNamePrefix}${componentClassName2}`
+  );
+  const colorScheme = colorSchemeClassName(useColorScheme());
+  return function componentClassNameFor(suffix = null, additionalClassName = null) {
+    const classNameSuffix = suffix ?? "";
+    return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
+      flatClassNameList(
+        filterThemedClassName(
+          additionalClassName,
+          colorScheme
+        )
+      )
+    )).join(" ");
+  };
+}
+export {
+  useThemedClassNameFactory
+};
+//# sourceMappingURL=useThemedClassNameFactory.js.map

package/dist/production/theming/useThemedClassNameFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedClassNameFactory.js","sources":["../../../src/theming/useThemedClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\nimport { useColorScheme } from './contexts'\n\nexport function useThemedClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\tconst colorScheme = colorSchemeClassName(useColorScheme())\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(\n\t\t\t\tfilterThemedClassName(\n\t\t\t\t\tadditionalClassName,\n\t\t\t\t\tcolorScheme,\n\t\t\t\t),\n\t\t\t),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;;AAKO,SAAS,0BACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAGtC,QAAA,cAAc,qBAAqB,eAAA,CAAgB;AAEzD,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IAAA,CACA,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}

package/dist/types/context/createOptionalContextFactory.d.ts

@@ -0,0 +1,3 @@
+import type { Context } from 'react';
+export declare function createOptionalContextFactory<T>(name: string, initialValue: T): [Context<T>, () => T];
+//# sourceMappingURL=createOptionalContextFactory.d.ts.map

package/dist/types/context/createOptionalContextFactory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOptionalContextFactory.d.ts","sourceRoot":"","sources":["../../../src/context/createOptionalContextFactory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAGpC,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CASpG"}

package/dist/types/context/index.d.ts

@@ -1,2 +1,3 @@
 export * from './createNonNullableContextFactory';
+export * from './createOptionalContextFactory';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/context/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/context/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,gCAAgC,CAAA"}

package/dist/types/index.d.ts

@@ -2,5 +2,6 @@ export * from './context';
 export * from './debug-context';
 export * from './hooks';
 export * from './referentiallyStable';
+export * from './theming';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA;AACrC,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA"}

package/dist/types/theming/ColorSchemeProvider.d.ts

@@ -0,0 +1,7 @@
+import { KebabCase } from '@contember/utilities';
+export type ColorSchemeProviderProps<T extends KebabCase<string>> = {
+    children: React.ReactNode;
+    scheme?: T;
+};
+export declare const ColorSchemeProvider: import("react").MemoExoticComponent<(<T extends string>({ children, scheme }: ColorSchemeProviderProps<T>) => JSX.Element)>;
+//# sourceMappingURL=ColorSchemeProvider.d.ts.map

package/dist/types/theming/ColorSchemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeProvider.d.ts","sourceRoot":"","sources":["../../../src/theming/ColorSchemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAIhD,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,SAAS,CAAC,MAAM,CAAC,IAAI;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,CAAA;CACV,CAAA;AAED,eAAO,MAAM,mBAAmB,6HAQ/B,CAAA"}

package/dist/types/theming/GlobalClassNamePrefixContext.d.ts

@@ -0,0 +1,2 @@
+export declare const GlobalClassNamePrefixContext: import("react").Context<string>;
+//# sourceMappingURL=GlobalClassNamePrefixContext.d.ts.map

package/dist/types/theming/GlobalClassNamePrefixContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalClassNamePrefixContext.d.ts","sourceRoot":"","sources":["../../../src/theming/GlobalClassNamePrefixContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B,iCAAgC,CAAA"}

package/dist/types/theming/contexts.d.ts

@@ -0,0 +1,12 @@
+export declare const DEFAULT_COLOR_SCHEME = "system";
+/**
+ * @group UI
+ *
+ * @description
+ * Provides the current color scheme, possible values are `'light'`, `'dark'` or `'system'`.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+ *
+ */
+export declare const ColorSchemeContext: import("react").Context<string>, useColorScheme: () => string;
+//# sourceMappingURL=contexts.d.ts.map

package/dist/types/theming/contexts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/theming/contexts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,WAAW,CAAA;AAG5C;;;;;;;;GAQG;AACH,eAAO,MAAO,kBAAkB,mCAAE,cAAc,cAG/C,CAAA"}

package/dist/types/theming/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ColorSchemeProvider';
+export * from './GlobalClassNamePrefixContext';
+export * from './contexts';
+export * from './useClassName';
+export * from './useClassNameFactory';
+export * from './useThemedClassName';
+export * from './useThemedClassNameFactory';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/theming/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA"}

package/dist/types/theming/useClassName.d.ts

@@ -0,0 +1,11 @@
+import { NestedClassName } from '@contember/utilities';
+/**
+ * Hook for component class name accepting outer class name
+ *
+ * @param componentClassName - Component class name
+ * @param additionalClassName - Additional class name
+ * @param prefixOverride - Context component prefix override
+ * @returns Prefixed component class name.
+ */
+export declare function useClassName(componentClassName: NestedClassName, additionalClassName?: NestedClassName, prefixOverride?: string | null | undefined): string;
+//# sourceMappingURL=useClassName.d.ts.map

package/dist/types/theming/useClassName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClassName.d.ts","sourceRoot":"","sources":["../../../src/theming/useClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2C,MAAM,sBAAsB,CAAA;AAI/F;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC3B,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,GAAE,eAAsB,EAC3C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,UAY1C"}

package/dist/types/theming/useClassNameFactory.d.ts

@@ -0,0 +1,17 @@
+import { NestedClassName } from '@contember/utilities';
+/**
+ * Hook for component class name accepting outer class name
+ *
+ * Returns a reusable function almost that is handy for components
+ * with many sub-component parts that should inherit the root component
+ * name.
+ *
+ * Also, product of the factory is a function that can be used outside of rules of hooks.
+ *
+ * @param componentClassName - Component class name
+ * @param glue - String to use to glue component and sub-component suffix
+ * @param prefixOverride - Context component prefix override
+ * @returns
+ */
+export declare function useClassNameFactory(componentClassName: NestedClassName, glue?: string | null, prefixOverride?: string | null | undefined): (suffix?: string | null | undefined, additionalClassName?: NestedClassName) => string;
+//# sourceMappingURL=useClassNameFactory.d.ts.map