@charcoal-ui/react 6.0.0-rc.6 → 6.0.0-rc.8

package/dist/components/TextField/useFocusWithClick.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect } from "react";
+
+//#region src/components/TextField/useFocusWithClick.tsx
+function useFocusWithClick(containerRef, inputRef) {
+	useEffect(() => {
+		const el = containerRef.current;
+		if (el) {
+			const handleDown = (e) => {
+				if (e.target !== inputRef.current) inputRef.current?.focus();
+			};
+			el.addEventListener("click", handleDown);
+			return () => {
+				el.removeEventListener("click", handleDown);
+			};
+		}
+	});
+}
+
+//#endregion
+export { useFocusWithClick };
+//# sourceMappingURL=useFocusWithClick.js.map

package/dist/components/TextField/useFocusWithClick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithClick.js","names":["useEffect","React","useFocusWithClick","containerRef","RefObject","HTMLDivElement","inputRef","HTMLInputElement","HTMLTextAreaElement","el","current","handleDown","e","MouseEvent","target","focus","addEventListener","removeEventListener"],"sources":["../../../src/components/TextField/useFocusWithClick.tsx"],"sourcesContent":["import { useEffect } from 'react'\nimport * as React from 'react'\n\nexport function useFocusWithClick(\n  containerRef: React.RefObject<HTMLDivElement | null>,\n  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n) {\n  useEffect(() => {\n    const el = containerRef.current\n    if (el) {\n      const handleDown = (e: MouseEvent) => {\n        if (e.target !== inputRef.current) {\n          inputRef.current?.focus()\n        }\n      }\n      el.addEventListener('click', handleDown)\n      return () => {\n        el.removeEventListener('click', handleDown)\n      }\n    }\n  })\n}\n"],"mappings":";;;;AAGA,SAAgBE,kBACdC,cACAG,UACA;CACAN,gBAAgB;EACd,MAAMS,KAAKN,aAAaO;EACxB,IAAID,IAAI;GACN,MAAME,cAAcC,MAAkB;IACpC,IAAIA,EAAEE,WAAWR,SAASI,SACxBJ,SAASI,SAASK,OAAO;;GAG7BN,GAAGO,iBAAiB,SAASL,WAAW;GACxC,aAAa;IACXF,GAAGQ,oBAAoB,SAASN,WAAW;;;GAG/C"}

package/dist/core/CharcoalProvider.cjs

@@ -0,0 +1,16 @@
+"use client";
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_SSRProvider = require('./SSRProvider.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_private_overlays_useModal = require("react-aria/private/overlays/useModal");
+
+//#region src/core/CharcoalProvider.tsx
+function CharcoalProvider({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SSRProvider.SSRProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_private_overlays_useModal.OverlayProvider, { children }) });
+}
+
+//#endregion
+exports.CharcoalProvider = CharcoalProvider;
+//# sourceMappingURL=CharcoalProvider.cjs.map

package/dist/core/CharcoalProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharcoalProvider.cjs","names":["React","OverlayProvider","SSRProvider","CharcoalProviderProps","children","ReactNode","CharcoalProvider"],"sources":["../../src/core/CharcoalProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { OverlayProvider } from './OverlayProvider'\nimport { SSRProvider } from './SSRProvider'\n\nexport type CharcoalProviderProps = {\n  children: React.ReactNode\n}\n\nexport function CharcoalProvider({ children }: CharcoalProviderProps) {\n  return (\n    <SSRProvider>\n      <OverlayProvider>{children}</OverlayProvider>\n    </SSRProvider>\n  )\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgBM,iBAAiB,EAAEF,YAAmC;CACpE,OACE,2CAAC,iCAAD,YACE,2CAAC,sDAAD,EAAkBA,UAA0B,GAChC"}

package/dist/core/CharcoalProvider.js

@@ -0,0 +1,14 @@
+"use client";
+import { SSRProvider } from "./SSRProvider.js";
+import { OverlayProvider } from "./OverlayProvider.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/core/CharcoalProvider.tsx
+function CharcoalProvider({ children }) {
+	return /* @__PURE__ */ jsx(SSRProvider, { children: /* @__PURE__ */ jsx(OverlayProvider, { children }) });
+}
+
+//#endregion
+export { CharcoalProvider };
+//# sourceMappingURL=CharcoalProvider.js.map

package/dist/core/CharcoalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CharcoalProvider.js","names":["React","OverlayProvider","SSRProvider","CharcoalProviderProps","children","ReactNode","CharcoalProvider"],"sources":["../../src/core/CharcoalProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { OverlayProvider } from './OverlayProvider'\nimport { SSRProvider } from './SSRProvider'\n\nexport type CharcoalProviderProps = {\n  children: React.ReactNode\n}\n\nexport function CharcoalProvider({ children }: CharcoalProviderProps) {\n  return (\n    <SSRProvider>\n      <OverlayProvider>{children}</OverlayProvider>\n    </SSRProvider>\n  )\n}\n"],"mappings":";;;;;;;AAQA,SAAgBM,iBAAiB,EAAEF,YAAmC;CACpE,OACE,oBAAC,aAAD,YACE,oBAAC,iBAAD,EAAkBA,UAA0B,GAChC"}

package/dist/core/OverlayProvider.js

@@ -0,0 +1,4 @@
+"use client";
+import { OverlayProvider } from "react-aria/private/overlays/useModal";
+
+export { OverlayProvider };

package/dist/core/SSRProvider.cjs

@@ -0,0 +1,15 @@
+"use client";
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+let react_aria_SSRProvider = require("react-aria/SSRProvider");
+
+//#region src/core/SSRProvider.tsx
+function isReactVersionOver(minVersion) {
+	const reactMajorVersion = parseInt(react.version.split(".")[0], 10);
+	return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
+}
+const SSRProvider = isReactVersionOver(18) ? react.Fragment : react_aria_SSRProvider.SSRProvider;
+
+//#endregion
+exports.SSRProvider = SSRProvider;
+//# sourceMappingURL=SSRProvider.cjs.map

package/dist/core/SSRProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSRProvider.cjs","names":["version","Fragment","SSRProvider","OriginSSRProvider","isReactVersionOver","minVersion","reactMajorVersion","parseInt","split","Number","isFinite"],"sources":["../../src/core/SSRProvider.tsx"],"sourcesContent":["import { version, Fragment } from 'react'\nimport { SSRProvider as OriginSSRProvider } from 'react-aria/SSRProvider'\n\nexport function isReactVersionOver(minVersion: number): boolean {\n  // version history on the react side: https://github.com/facebook/react/commits/main/packages/shared/ReactVersion.js\n  const reactMajorVersion = parseInt(version.split('.')[0], 10)\n  return Number.isFinite(reactMajorVersion)\n    ? reactMajorVersion >= minVersion\n    : false\n}\n\nexport const SSRProvider = isReactVersionOver(18) ? Fragment : OriginSSRProvider\n"],"mappings":";;;;;;AAGA,SAAgBI,mBAAmBC,YAA6B;CAE9D,MAAMC,oBAAoBC,SAASP,cAAQQ,MAAM,IAAI,CAAC,IAAI,GAAG;CAC7D,OAAOC,OAAOC,SAASJ,kBAAkB,GACrCA,qBAAqBD,aACrB;;AAGN,MAAaH,cAAcE,mBAAmB,GAAG,GAAGH,iBAAWE"}

package/dist/core/SSRProvider.js

@@ -0,0 +1,14 @@
+"use client";
+import { Fragment, version } from "react";
+import { SSRProvider } from "react-aria/SSRProvider";
+
+//#region src/core/SSRProvider.tsx
+function isReactVersionOver(minVersion) {
+	const reactMajorVersion = parseInt(version.split(".")[0], 10);
+	return Number.isFinite(reactMajorVersion) ? reactMajorVersion >= minVersion : false;
+}
+const SSRProvider$1 = isReactVersionOver(18) ? Fragment : SSRProvider;
+
+//#endregion
+export { SSRProvider$1 as SSRProvider };
+//# sourceMappingURL=SSRProvider.js.map

package/dist/core/SSRProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SSRProvider.js","names":["version","Fragment","SSRProvider","OriginSSRProvider","isReactVersionOver","minVersion","reactMajorVersion","parseInt","split","Number","isFinite"],"sources":["../../src/core/SSRProvider.tsx"],"sourcesContent":["import { version, Fragment } from 'react'\nimport { SSRProvider as OriginSSRProvider } from 'react-aria/SSRProvider'\n\nexport function isReactVersionOver(minVersion: number): boolean {\n  // version history on the react side: https://github.com/facebook/react/commits/main/packages/shared/ReactVersion.js\n  const reactMajorVersion = parseInt(version.split('.')[0], 10)\n  return Number.isFinite(reactMajorVersion)\n    ? reactMajorVersion >= minVersion\n    : false\n}\n\nexport const SSRProvider = isReactVersionOver(18) ? Fragment : OriginSSRProvider\n"],"mappings":";;;;;AAGA,SAAgBI,mBAAmBC,YAA6B;CAE9D,MAAMC,oBAAoBC,SAASP,QAAQQ,MAAM,IAAI,CAAC,IAAI,GAAG;CAC7D,OAAOC,OAAOC,SAASJ,kBAAkB,GACrCA,qBAAqBD,aACrB;;AAGN,MAAaH,gBAAcE,mBAAmB,GAAG,GAAGH,WAAWE"}

package/dist/core/SetThemeScript.cjs

@@ -0,0 +1,45 @@
+"use client";
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_themeHelper = require('./themeHelper.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/core/SetThemeScript.tsx
+/**
+* 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
+* @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+* @returns ソースコードの文字列
+*/
+function makeSetThemeScriptCode({ localStorageKey = defaultProps.localStorageKey, rootAttribute = defaultProps.rootAttribute } = defaultProps) {
+	require_themeHelper.assertKeyString(localStorageKey);
+	require_themeHelper.assertKeyString(rootAttribute);
+	return `'use strict';
+(function () {
+    var localStorageKey = '${localStorageKey}'
+    var rootAttribute = '${rootAttribute}'
+    var currentTheme = localStorage.getItem(localStorageKey);
+    if (currentTheme) {
+        document.documentElement.dataset[rootAttribute] = currentTheme;
+    }
+})();
+`;
+}
+/**
+* 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
+* @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+* @returns
+*/
+function SetThemeScript({ localStorageKey = defaultProps.localStorageKey, rootAttribute = defaultProps.rootAttribute }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("script", { dangerouslySetInnerHTML: { __html: makeSetThemeScriptCode({
+		localStorageKey,
+		rootAttribute
+	}) } });
+}
+const defaultProps = {
+	localStorageKey: require_themeHelper.LOCAL_STORAGE_KEY,
+	rootAttribute: require_themeHelper.DEFAULT_ROOT_ATTRIBUTE
+};
+
+//#endregion
+exports.SetThemeScript = SetThemeScript;
+exports.makeSetThemeScriptCode = makeSetThemeScriptCode;
+//# sourceMappingURL=SetThemeScript.cjs.map

package/dist/core/SetThemeScript.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetThemeScript.cjs","names":["assertKeyString","DEFAULT_ROOT_ATTRIBUTE","LOCAL_STORAGE_KEY","Props","localStorageKey","rootAttribute","makeSetThemeScriptCode","defaultProps","Partial","SetThemeScript","src","__html"],"sources":["../../src/core/SetThemeScript.tsx"],"sourcesContent":["import {\n  assertKeyString,\n  DEFAULT_ROOT_ATTRIBUTE,\n  LOCAL_STORAGE_KEY,\n} from './themeHelper'\n\ninterface Props {\n  localStorageKey: string\n  rootAttribute: string\n}\n\n/**\n * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する\n * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト\n * @returns ソースコードの文字列\n */\nexport function makeSetThemeScriptCode({\n  localStorageKey = defaultProps.localStorageKey,\n  rootAttribute = defaultProps.rootAttribute,\n}: Partial<Props> = defaultProps) {\n  assertKeyString(localStorageKey)\n  assertKeyString(rootAttribute)\n  return `'use strict';\n(function () {\n    var localStorageKey = '${localStorageKey}'\n    var rootAttribute = '${rootAttribute}'\n    var currentTheme = localStorage.getItem(localStorageKey);\n    if (currentTheme) {\n        document.documentElement.dataset[rootAttribute] = currentTheme;\n    }\n})();\n`\n}\n\n/**\n * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ\n * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト\n * @returns\n */\nexport function SetThemeScript({\n  localStorageKey = defaultProps.localStorageKey,\n  rootAttribute = defaultProps.rootAttribute,\n}: Props) {\n  const src = makeSetThemeScriptCode({ localStorageKey, rootAttribute })\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: src,\n      }}\n    />\n  )\n}\n\nconst defaultProps: Props = {\n  localStorageKey: LOCAL_STORAGE_KEY,\n  rootAttribute: DEFAULT_ROOT_ATTRIBUTE,\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgBM,uBAAuB,EACrCF,kBAAkBG,aAAaH,iBAC/BC,gBAAgBE,aAAaF,kBACXE,cAAc;CAChCP,oCAAgBI,gBAAgB;CAChCJ,oCAAgBK,cAAc;CAC9B,OAAO;;6BAEoBD,gBAAe;2BACjBC,cAAa;;;;;;;;;;;;;AAcxC,SAAgBI,eAAe,EAC7BL,kBAAkBG,aAAaH,iBAC/BC,gBAAgBE,aAAaF,iBACrB;CAER,OACE,2CAAC,UAAD,EACE,yBAAyB,EACvBM,QAJML,uBAAuB;EAAEF;EAAiBC;EAAe,CAIvDK,EACT,EACD;;AAIN,MAAMH,eAAsB;CAC1BH,iBAAiBF;CACjBG,eAAeJ;CAChB"}

package/dist/core/SetThemeScript.js

@@ -0,0 +1,43 @@
+"use client";
+import { DEFAULT_ROOT_ATTRIBUTE, LOCAL_STORAGE_KEY, assertKeyString } from "./themeHelper.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/core/SetThemeScript.tsx
+/**
+* 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する
+* @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+* @returns ソースコードの文字列
+*/
+function makeSetThemeScriptCode({ localStorageKey = defaultProps.localStorageKey, rootAttribute = defaultProps.rootAttribute } = defaultProps) {
+	assertKeyString(localStorageKey);
+	assertKeyString(rootAttribute);
+	return `'use strict';
+(function () {
+    var localStorageKey = '${localStorageKey}'
+    var rootAttribute = '${rootAttribute}'
+    var currentTheme = localStorage.getItem(localStorageKey);
+    if (currentTheme) {
+        document.documentElement.dataset[rootAttribute] = currentTheme;
+    }
+})();
+`;
+}
+/**
+* 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ
+* @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト
+* @returns
+*/
+function SetThemeScript({ localStorageKey = defaultProps.localStorageKey, rootAttribute = defaultProps.rootAttribute }) {
+	return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: makeSetThemeScriptCode({
+		localStorageKey,
+		rootAttribute
+	}) } });
+}
+const defaultProps = {
+	localStorageKey: LOCAL_STORAGE_KEY,
+	rootAttribute: DEFAULT_ROOT_ATTRIBUTE
+};
+
+//#endregion
+export { SetThemeScript, makeSetThemeScriptCode };
+//# sourceMappingURL=SetThemeScript.js.map

package/dist/core/SetThemeScript.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetThemeScript.js","names":["assertKeyString","DEFAULT_ROOT_ATTRIBUTE","LOCAL_STORAGE_KEY","Props","localStorageKey","rootAttribute","makeSetThemeScriptCode","defaultProps","Partial","SetThemeScript","src","__html"],"sources":["../../src/core/SetThemeScript.tsx"],"sourcesContent":["import {\n  assertKeyString,\n  DEFAULT_ROOT_ATTRIBUTE,\n  LOCAL_STORAGE_KEY,\n} from './themeHelper'\n\ninterface Props {\n  localStorageKey: string\n  rootAttribute: string\n}\n\n/**\n * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するコードを取得する\n * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト\n * @returns ソースコードの文字列\n */\nexport function makeSetThemeScriptCode({\n  localStorageKey = defaultProps.localStorageKey,\n  rootAttribute = defaultProps.rootAttribute,\n}: Partial<Props> = defaultProps) {\n  assertKeyString(localStorageKey)\n  assertKeyString(rootAttribute)\n  return `'use strict';\n(function () {\n    var localStorageKey = '${localStorageKey}'\n    var rootAttribute = '${rootAttribute}'\n    var currentTheme = localStorage.getItem(localStorageKey);\n    if (currentTheme) {\n        document.documentElement.dataset[rootAttribute] = currentTheme;\n    }\n})();\n`\n}\n\n/**\n * 同期的にテーマをローカルストレージから取得してhtmlの属性に設定するスクリプトタグ\n * @param props localStorageのキー、htmlのdataになる属性のキーを含むオブジェクト\n * @returns\n */\nexport function SetThemeScript({\n  localStorageKey = defaultProps.localStorageKey,\n  rootAttribute = defaultProps.rootAttribute,\n}: Props) {\n  const src = makeSetThemeScriptCode({ localStorageKey, rootAttribute })\n  return (\n    <script\n      dangerouslySetInnerHTML={{\n        __html: src,\n      }}\n    />\n  )\n}\n\nconst defaultProps: Props = {\n  localStorageKey: LOCAL_STORAGE_KEY,\n  rootAttribute: DEFAULT_ROOT_ATTRIBUTE,\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgBM,uBAAuB,EACrCF,kBAAkBG,aAAaH,iBAC/BC,gBAAgBE,aAAaF,kBACXE,cAAc;CAChCP,gBAAgBI,gBAAgB;CAChCJ,gBAAgBK,cAAc;CAC9B,OAAO;;6BAEoBD,gBAAe;2BACjBC,cAAa;;;;;;;;;;;;;AAcxC,SAAgBI,eAAe,EAC7BL,kBAAkBG,aAAaH,iBAC/BC,gBAAgBE,aAAaF,iBACrB;CAER,OACE,oBAAC,UAAD,EACE,yBAAyB,EACvBM,QAJML,uBAAuB;EAAEF;EAAiBC;EAAe,CAIvDK,EACT,EACD;;AAIN,MAAMH,eAAsB;CAC1BH,iBAAiBF;CACjBG,eAAeJ;CAChB"}

package/dist/core/themeHelper.cjs

@@ -0,0 +1,154 @@
+"use client";
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/core/themeHelper.ts
+const LOCAL_STORAGE_KEY = "charcoal-theme";
+const DEFAULT_ROOT_ATTRIBUTE = "theme";
+const keyStringRegExp = /* @__PURE__ */ new RegExp(/^(\w|-)+$/);
+/**
+* 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
+* @param key 検証するキー
+*/
+function assertKeyString(key) {
+	if (!keyStringRegExp.test(key)) throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`);
+}
+/**
+* `<html data-theme="dark">` のような設定を行うデフォルトのセッター
+*/
+const themeSetter = (attr = DEFAULT_ROOT_ATTRIBUTE) => (theme) => {
+	assertKeyString(attr);
+	if (theme !== void 0) document.documentElement.dataset[attr] = theme;
+	else delete document.documentElement.dataset[attr];
+};
+const defaultThemeSetter = themeSetter();
+/**
+* `<html data-theme="dark">` にマッチするセレクタを生成する
+*/
+function themeSelector(theme, attr) {
+	return `:root[data-${attr ?? "theme"}='${theme}']`;
+}
+/**
+* prefers-color-scheme を利用する media クエリを生成する
+*/
+function prefersColorScheme(theme) {
+	return `@media (prefers-color-scheme: ${theme})`;
+}
+/**
+* LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
+*/
+function useThemeSetter({ key = LOCAL_STORAGE_KEY, setter = defaultThemeSetter } = {}) {
+	const [theme, , system] = useTheme(key);
+	(0, react.useEffect)(() => {
+		if (theme === void 0) return;
+		setter(system ? void 0 : theme);
+	}, [
+		setter,
+		system,
+		theme
+	]);
+}
+/**
+* 同期的にLocalStorageからテーマを取得するヘルパ
+*/
+function getThemeSync(key = LOCAL_STORAGE_KEY) {
+	return localStorage.getItem(key);
+}
+/**
+* LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
+*
+* `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
+*/
+const useTheme = (localStorageKey = LOCAL_STORAGE_KEY) => {
+	assertKeyString(localStorageKey);
+	const isDark = useMedia("(prefers-color-scheme: dark)");
+	const media = isDark !== void 0 ? isDark ? "dark" : "light" : void 0;
+	const [local, setTheme, ready] = useLocalStorage(localStorageKey);
+	return [
+		!ready || media === void 0 ? void 0 : local ?? media,
+		setTheme,
+		local === void 0
+	];
+};
+function useLocalStorage(key, defaultValue) {
+	const [ready, setReady] = (0, react.useState)(false);
+	const [state, setState] = (0, react.useState)();
+	const defaultValueMemo = (0, react.useMemo)(() => defaultValue?.(), [defaultValue]);
+	const fetch = (0, react.useCallback)(() => {
+		const raw = localStorage.getItem(key);
+		setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo);
+		setReady(true);
+	}, [defaultValueMemo, key]);
+	const handleStorage = (0, react.useCallback)((e) => {
+		if (e.storageArea !== localStorage) return;
+		if (e.key !== key) return;
+		fetch();
+	}, [fetch, key]);
+	(0, react.useEffect)(() => {
+		fetch();
+		window.addEventListener("storage", handleStorage);
+		return () => {
+			window.removeEventListener("storage", handleStorage);
+		};
+	}, [fetch, handleStorage]);
+	const set = (value) => {
+		if (value === void 0) localStorage.removeItem(key);
+		else {
+			const raw = serialize(value);
+			localStorage.setItem(key, raw);
+		}
+		const event = new StorageEvent("storage", {
+			bubbles: true,
+			cancelable: false,
+			key,
+			url: location.href,
+			storageArea: localStorage
+		});
+		dispatchEvent(event);
+	};
+	return [
+		state ?? defaultValueMemo,
+		set,
+		ready
+	];
+}
+function deserialize(raw) {
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return raw;
+	}
+}
+function serialize(value) {
+	if (typeof value === "string") return value;
+	else return JSON.stringify(value);
+}
+function useMedia(query) {
+	const [match, setState] = (0, react.useState)();
+	(0, react.useEffect)(() => {
+		const matcher = window.matchMedia(query);
+		const onChange = () => {
+			setState(matcher.matches);
+		};
+		matcher.addEventListener("change", onChange);
+		setState(matcher.matches);
+		return () => {
+			matcher.removeEventListener("change", onChange);
+		};
+	}, [query]);
+	return match;
+}
+
+//#endregion
+exports.DEFAULT_ROOT_ATTRIBUTE = DEFAULT_ROOT_ATTRIBUTE;
+exports.LOCAL_STORAGE_KEY = LOCAL_STORAGE_KEY;
+exports.assertKeyString = assertKeyString;
+exports.getThemeSync = getThemeSync;
+exports.prefersColorScheme = prefersColorScheme;
+exports.themeSelector = themeSelector;
+exports.themeSetter = themeSetter;
+exports.useLocalStorage = useLocalStorage;
+exports.useMedia = useMedia;
+exports.useTheme = useTheme;
+exports.useThemeSetter = useThemeSetter;
+//# sourceMappingURL=themeHelper.cjs.map

package/dist/core/themeHelper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeHelper.cjs","names":["useCallback","useEffect","useMemo","useState","LOCAL_STORAGE_KEY","DEFAULT_ROOT_ATTRIBUTE","keyStringRegExp","RegExp","assertKeyString","key","test","Error","themeSetter","attr","theme","undefined","document","documentElement","dataset","defaultThemeSetter","themeSelector","T","S","const","prefersColorScheme","useThemeSetter","setter","system","useTheme","getThemeSync","localStorage","getItem","localStorageKey","isDark","useMedia","media","local","setTheme","ready","useLocalStorage","defaultValue","setReady","state","setState","defaultValueMemo","fetch","raw","deserialize","handleStorage","e","StorageEvent","storageArea","window","addEventListener","removeEventListener","set","value","removeItem","serialize","setItem","event","bubbles","cancelable","url","location","href","dispatchEvent","JSON","parse","stringify","query","match","matcher","matchMedia","onChange","matches"],"sources":["../../src/core/themeHelper.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\n\nexport const LOCAL_STORAGE_KEY = 'charcoal-theme'\nexport const DEFAULT_ROOT_ATTRIBUTE = 'theme'\n\nconst keyStringRegExp = new RegExp(/^(\\w|-)+$/)\n\n/**\n * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる\n * @param key 検証するキー\n */\nexport function assertKeyString(key: string) {\n  if (!keyStringRegExp.test(key)) {\n    throw new Error(`Unexpected key :${key}, expect: /^(\\\\w|-)+$/`)\n  }\n}\n\n/**\n * `<html data-theme=\"dark\">` のような設定を行うデフォルトのセッター\n */\nexport const themeSetter =\n  (attr: string = DEFAULT_ROOT_ATTRIBUTE) =>\n  (theme: string | undefined) => {\n    assertKeyString(attr)\n    if (theme !== undefined) {\n      document.documentElement.dataset[attr] = theme\n    } else {\n      delete document.documentElement.dataset[attr]\n    }\n  }\n\n// デフォルト引数で生成すると毎レンダー新しい関数になり、effect が再実行される\nconst defaultThemeSetter = themeSetter()\n\n/**\n * `<html data-theme=\"dark\">` にマッチするセレクタを生成する\n */\nexport function themeSelector<\n  T extends string,\n  S extends string = typeof DEFAULT_ROOT_ATTRIBUTE,\n>(theme: T, attr?: S) {\n  return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']` as const\n}\n\n/**\n * prefers-color-scheme を利用する media クエリを生成する\n */\nexport function prefersColorScheme<T extends 'light' | 'dark'>(theme: T) {\n  return `@media (prefers-color-scheme: ${theme})` as const\n}\n\n/**\n * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks\n */\nexport function useThemeSetter({\n  key = LOCAL_STORAGE_KEY,\n  setter = defaultThemeSetter,\n}: { key?: string; setter?: (theme: string | undefined) => void } = {}) {\n  const [theme, , system] = useTheme(key)\n\n  useEffect(() => {\n    if (theme === undefined) {\n      return\n    }\n    // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする\n    setter(system ? undefined : theme)\n  }, [setter, system, theme])\n}\n\n/**\n * 同期的にLocalStorageからテーマを取得するヘルパ\n */\nexport function getThemeSync(key: string = LOCAL_STORAGE_KEY) {\n  const theme = localStorage.getItem(key)\n  return theme\n}\n\n/**\n * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks\n *\n * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります\n */\nexport const useTheme = (localStorageKey: string = LOCAL_STORAGE_KEY) => {\n  assertKeyString(localStorageKey)\n  const isDark = useMedia('(prefers-color-scheme: dark)')\n  const media = isDark !== undefined ? (isDark ? 'dark' : 'light') : undefined\n  const [local, setTheme, ready] =\n    useLocalStorage<typeof media>(localStorageKey)\n  const theme = !ready || media === undefined ? undefined : (local ?? media)\n  const system = local === undefined\n  return [theme, setTheme, system] as const\n}\n\nexport function useLocalStorage<T>(key: string, defaultValue?: () => T) {\n  const [ready, setReady] = useState(false)\n  const [state, setState] = useState<T>()\n  const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue])\n\n  const fetch = useCallback(() => {\n    const raw = localStorage.getItem(key)\n    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)\n    setReady(true)\n  }, [defaultValueMemo, key])\n\n  const handleStorage = useCallback(\n    (e: StorageEvent) => {\n      if (e.storageArea !== localStorage) {\n        return\n      }\n      if (e.key !== key) {\n        return\n      }\n      fetch()\n    },\n    [fetch, key],\n  )\n\n  // JSON は deserialize のたびに新しい object になるため、入力変更時だけ再取得する\n  useEffect(() => {\n    fetch()\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [fetch, handleStorage])\n\n  const set = (value: T | undefined) => {\n    if (value === undefined) {\n      // undefinedがセットされる場合にはkeyごと削除\n      localStorage.removeItem(key)\n    } else {\n      const raw = serialize(value)\n      localStorage.setItem(key, raw)\n    }\n\n    // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる\n    const event = new StorageEvent('storage', {\n      bubbles: true,\n      cancelable: false,\n      key,\n      url: location.href,\n      storageArea: localStorage,\n    })\n    dispatchEvent(event)\n  }\n\n  return [state ?? defaultValueMemo, set, ready] as const\n}\n\nfunction deserialize<T>(raw: string): T {\n  try {\n    return JSON.parse(raw) as T\n  } catch {\n    // syntax error はすべて文字列として扱う\n    return raw as unknown as T\n  }\n}\n\nfunction serialize(value: unknown): string {\n  if (typeof value === 'string') {\n    return value\n  } else {\n    return JSON.stringify(value)\n  }\n}\n\nexport function useMedia(query: string) {\n  const [match, setState] = useState<boolean>()\n\n  useEffect(() => {\n    const matcher = window.matchMedia(query)\n\n    const onChange = () => {\n      setState(matcher.matches)\n    }\n\n    matcher.addEventListener('change', onChange)\n\n    setState(matcher.matches)\n\n    return () => {\n      matcher.removeEventListener('change', onChange)\n    }\n  }, [query])\n\n  return match\n}\n"],"mappings":"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"}

package/dist/core/themeHelper.js

@@ -0,0 +1,143 @@
+"use client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+//#region src/core/themeHelper.ts
+const LOCAL_STORAGE_KEY = "charcoal-theme";
+const DEFAULT_ROOT_ATTRIBUTE = "theme";
+const keyStringRegExp = /* @__PURE__ */ new RegExp(/^(\w|-)+$/);
+/**
+* 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる
+* @param key 検証するキー
+*/
+function assertKeyString(key) {
+	if (!keyStringRegExp.test(key)) throw new Error(`Unexpected key :${key}, expect: /^(\\w|-)+$/`);
+}
+/**
+* `<html data-theme="dark">` のような設定を行うデフォルトのセッター
+*/
+const themeSetter = (attr = DEFAULT_ROOT_ATTRIBUTE) => (theme) => {
+	assertKeyString(attr);
+	if (theme !== void 0) document.documentElement.dataset[attr] = theme;
+	else delete document.documentElement.dataset[attr];
+};
+const defaultThemeSetter = themeSetter();
+/**
+* `<html data-theme="dark">` にマッチするセレクタを生成する
+*/
+function themeSelector(theme, attr) {
+	return `:root[data-${attr ?? "theme"}='${theme}']`;
+}
+/**
+* prefers-color-scheme を利用する media クエリを生成する
+*/
+function prefersColorScheme(theme) {
+	return `@media (prefers-color-scheme: ${theme})`;
+}
+/**
+* LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks
+*/
+function useThemeSetter({ key = LOCAL_STORAGE_KEY, setter = defaultThemeSetter } = {}) {
+	const [theme, , system] = useTheme(key);
+	useEffect(() => {
+		if (theme === void 0) return;
+		setter(system ? void 0 : theme);
+	}, [
+		setter,
+		system,
+		theme
+	]);
+}
+/**
+* 同期的にLocalStorageからテーマを取得するヘルパ
+*/
+function getThemeSync(key = LOCAL_STORAGE_KEY) {
+	return localStorage.getItem(key);
+}
+/**
+* LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks
+*
+* `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります
+*/
+const useTheme = (localStorageKey = LOCAL_STORAGE_KEY) => {
+	assertKeyString(localStorageKey);
+	const isDark = useMedia("(prefers-color-scheme: dark)");
+	const media = isDark !== void 0 ? isDark ? "dark" : "light" : void 0;
+	const [local, setTheme, ready] = useLocalStorage(localStorageKey);
+	return [
+		!ready || media === void 0 ? void 0 : local ?? media,
+		setTheme,
+		local === void 0
+	];
+};
+function useLocalStorage(key, defaultValue) {
+	const [ready, setReady] = useState(false);
+	const [state, setState] = useState();
+	const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue]);
+	const fetch = useCallback(() => {
+		const raw = localStorage.getItem(key);
+		setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo);
+		setReady(true);
+	}, [defaultValueMemo, key]);
+	const handleStorage = useCallback((e) => {
+		if (e.storageArea !== localStorage) return;
+		if (e.key !== key) return;
+		fetch();
+	}, [fetch, key]);
+	useEffect(() => {
+		fetch();
+		window.addEventListener("storage", handleStorage);
+		return () => {
+			window.removeEventListener("storage", handleStorage);
+		};
+	}, [fetch, handleStorage]);
+	const set = (value) => {
+		if (value === void 0) localStorage.removeItem(key);
+		else {
+			const raw = serialize(value);
+			localStorage.setItem(key, raw);
+		}
+		const event = new StorageEvent("storage", {
+			bubbles: true,
+			cancelable: false,
+			key,
+			url: location.href,
+			storageArea: localStorage
+		});
+		dispatchEvent(event);
+	};
+	return [
+		state ?? defaultValueMemo,
+		set,
+		ready
+	];
+}
+function deserialize(raw) {
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return raw;
+	}
+}
+function serialize(value) {
+	if (typeof value === "string") return value;
+	else return JSON.stringify(value);
+}
+function useMedia(query) {
+	const [match, setState] = useState();
+	useEffect(() => {
+		const matcher = window.matchMedia(query);
+		const onChange = () => {
+			setState(matcher.matches);
+		};
+		matcher.addEventListener("change", onChange);
+		setState(matcher.matches);
+		return () => {
+			matcher.removeEventListener("change", onChange);
+		};
+	}, [query]);
+	return match;
+}
+
+//#endregion
+export { DEFAULT_ROOT_ATTRIBUTE, LOCAL_STORAGE_KEY, assertKeyString, getThemeSync, prefersColorScheme, themeSelector, themeSetter, useLocalStorage, useMedia, useTheme, useThemeSetter };
+//# sourceMappingURL=themeHelper.js.map

package/dist/core/themeHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeHelper.js","names":["useCallback","useEffect","useMemo","useState","LOCAL_STORAGE_KEY","DEFAULT_ROOT_ATTRIBUTE","keyStringRegExp","RegExp","assertKeyString","key","test","Error","themeSetter","attr","theme","undefined","document","documentElement","dataset","defaultThemeSetter","themeSelector","T","S","const","prefersColorScheme","useThemeSetter","setter","system","useTheme","getThemeSync","localStorage","getItem","localStorageKey","isDark","useMedia","media","local","setTheme","ready","useLocalStorage","defaultValue","setReady","state","setState","defaultValueMemo","fetch","raw","deserialize","handleStorage","e","StorageEvent","storageArea","window","addEventListener","removeEventListener","set","value","removeItem","serialize","setItem","event","bubbles","cancelable","url","location","href","dispatchEvent","JSON","parse","stringify","query","match","matcher","matchMedia","onChange","matches"],"sources":["../../src/core/themeHelper.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\n\nexport const LOCAL_STORAGE_KEY = 'charcoal-theme'\nexport const DEFAULT_ROOT_ATTRIBUTE = 'theme'\n\nconst keyStringRegExp = new RegExp(/^(\\w|-)+$/)\n\n/**\n * 文字列が英数字_-のみで構成されているか検証する。不正な文字列ならエラーを投げる\n * @param key 検証するキー\n */\nexport function assertKeyString(key: string) {\n  if (!keyStringRegExp.test(key)) {\n    throw new Error(`Unexpected key :${key}, expect: /^(\\\\w|-)+$/`)\n  }\n}\n\n/**\n * `<html data-theme=\"dark\">` のような設定を行うデフォルトのセッター\n */\nexport const themeSetter =\n  (attr: string = DEFAULT_ROOT_ATTRIBUTE) =>\n  (theme: string | undefined) => {\n    assertKeyString(attr)\n    if (theme !== undefined) {\n      document.documentElement.dataset[attr] = theme\n    } else {\n      delete document.documentElement.dataset[attr]\n    }\n  }\n\n// デフォルト引数で生成すると毎レンダー新しい関数になり、effect が再実行される\nconst defaultThemeSetter = themeSetter()\n\n/**\n * `<html data-theme=\"dark\">` にマッチするセレクタを生成する\n */\nexport function themeSelector<\n  T extends string,\n  S extends string = typeof DEFAULT_ROOT_ATTRIBUTE,\n>(theme: T, attr?: S) {\n  return `:root[data-${attr ?? DEFAULT_ROOT_ATTRIBUTE}='${theme}']` as const\n}\n\n/**\n * prefers-color-scheme を利用する media クエリを生成する\n */\nexport function prefersColorScheme<T extends 'light' | 'dark'>(theme: T) {\n  return `@media (prefers-color-scheme: ${theme})` as const\n}\n\n/**\n * LocalStorageからテーマの情報を取得して、変化時にテーマをセットするhooks\n */\nexport function useThemeSetter({\n  key = LOCAL_STORAGE_KEY,\n  setter = defaultThemeSetter,\n}: { key?: string; setter?: (theme: string | undefined) => void } = {}) {\n  const [theme, , system] = useTheme(key)\n\n  useEffect(() => {\n    if (theme === undefined) {\n      return\n    }\n    // prefers-color-scheme から値を取っている場合にはcssのみで処理したいのでアンセットする\n    setter(system ? undefined : theme)\n  }, [setter, system, theme])\n}\n\n/**\n * 同期的にLocalStorageからテーマを取得するヘルパ\n */\nexport function getThemeSync(key: string = LOCAL_STORAGE_KEY) {\n  const theme = localStorage.getItem(key)\n  return theme\n}\n\n/**\n * LocalStorage, prefers-color-scheme からテーマの情報を取得して、現在のテーマを返すhooks\n *\n * `dark` `light` という名前だけは特別扱いされていて、prefers-color-schemeにマッチした場合に返ります\n */\nexport const useTheme = (localStorageKey: string = LOCAL_STORAGE_KEY) => {\n  assertKeyString(localStorageKey)\n  const isDark = useMedia('(prefers-color-scheme: dark)')\n  const media = isDark !== undefined ? (isDark ? 'dark' : 'light') : undefined\n  const [local, setTheme, ready] =\n    useLocalStorage<typeof media>(localStorageKey)\n  const theme = !ready || media === undefined ? undefined : (local ?? media)\n  const system = local === undefined\n  return [theme, setTheme, system] as const\n}\n\nexport function useLocalStorage<T>(key: string, defaultValue?: () => T) {\n  const [ready, setReady] = useState(false)\n  const [state, setState] = useState<T>()\n  const defaultValueMemo = useMemo(() => defaultValue?.(), [defaultValue])\n\n  const fetch = useCallback(() => {\n    const raw = localStorage.getItem(key)\n    setState((raw !== null ? deserialize(raw) : null) ?? defaultValueMemo)\n    setReady(true)\n  }, [defaultValueMemo, key])\n\n  const handleStorage = useCallback(\n    (e: StorageEvent) => {\n      if (e.storageArea !== localStorage) {\n        return\n      }\n      if (e.key !== key) {\n        return\n      }\n      fetch()\n    },\n    [fetch, key],\n  )\n\n  // JSON は deserialize のたびに新しい object になるため、入力変更時だけ再取得する\n  useEffect(() => {\n    fetch()\n    window.addEventListener('storage', handleStorage)\n    return () => {\n      window.removeEventListener('storage', handleStorage)\n    }\n  }, [fetch, handleStorage])\n\n  const set = (value: T | undefined) => {\n    if (value === undefined) {\n      // undefinedがセットされる場合にはkeyごと削除\n      localStorage.removeItem(key)\n    } else {\n      const raw = serialize(value)\n      localStorage.setItem(key, raw)\n    }\n\n    // 同一ウィンドウではstorageイベントが発火しないので、手動で発火させる\n    const event = new StorageEvent('storage', {\n      bubbles: true,\n      cancelable: false,\n      key,\n      url: location.href,\n      storageArea: localStorage,\n    })\n    dispatchEvent(event)\n  }\n\n  return [state ?? defaultValueMemo, set, ready] as const\n}\n\nfunction deserialize<T>(raw: string): T {\n  try {\n    return JSON.parse(raw) as T\n  } catch {\n    // syntax error はすべて文字列として扱う\n    return raw as unknown as T\n  }\n}\n\nfunction serialize(value: unknown): string {\n  if (typeof value === 'string') {\n    return value\n  } else {\n    return JSON.stringify(value)\n  }\n}\n\nexport function useMedia(query: string) {\n  const [match, setState] = useState<boolean>()\n\n  useEffect(() => {\n    const matcher = window.matchMedia(query)\n\n    const onChange = () => {\n      setState(matcher.matches)\n    }\n\n    matcher.addEventListener('change', onChange)\n\n    setState(matcher.matches)\n\n    return () => {\n      matcher.removeEventListener('change', onChange)\n    }\n  }, [query])\n\n  return match\n}\n"],"mappings":"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"}