chroma-panel 0.1.0

package/dist/components/Popover.cjs

@@ -0,0 +1,154 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_useMediaQuery = require("../core/useMediaQuery.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+//#region src/components/Popover.tsx
+const MARGIN = 8;
+const MIN_AVAILABLE = 160;
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+function Popover(props) {
+	const { anchor, open, onClose, offset = 8, sheetOnMobile = true, className, children } = props;
+	const panelRef = react.useRef(null);
+	const [position, setPosition] = react.useState(null);
+	const compact = require_useMediaQuery.useMediaQuery(require_useMediaQuery.COMPACT_QUERY);
+	const asSheet = sheetOnMobile && compact;
+	const [mounted, setMounted] = react.useState(false);
+	react.useEffect(() => setMounted(true), []);
+	const place = react.useCallback(() => {
+		const panel = panelRef.current;
+		if (anchor === null || panel === null) return;
+		const a = anchor.getBoundingClientRect();
+		const p = panel.getBoundingClientRect();
+		const below = window.innerHeight - a.bottom - offset - MARGIN;
+		const above = a.top - offset - MARGIN;
+		let top;
+		let available;
+		if (p.height <= below || below >= above && p.height > above) {
+			top = a.bottom + offset;
+			available = below;
+		} else {
+			available = above;
+			top = Math.max(MARGIN, a.top - offset - p.height);
+		}
+		let left = a.left;
+		const maxLeft = window.innerWidth - p.width - MARGIN;
+		if (left > maxLeft) left = Math.max(MARGIN, maxLeft);
+		if (left < MARGIN) left = MARGIN;
+		setPosition({
+			top: top + window.scrollY,
+			left: left + window.scrollX,
+			available: Math.max(available, MIN_AVAILABLE)
+		});
+	}, [anchor, offset]);
+	react.useLayoutEffect(() => {
+		if (!open || asSheet) {
+			setPosition(null);
+			return;
+		}
+		place();
+		window.addEventListener("scroll", place, true);
+		window.addEventListener("resize", place);
+		return () => {
+			window.removeEventListener("scroll", place, true);
+			window.removeEventListener("resize", place);
+		};
+	}, [
+		open,
+		asSheet,
+		place
+	]);
+	const hasFocused = react.useRef(false);
+	const visible = asSheet || position !== null;
+	react.useEffect(() => {
+		if (!open) {
+			hasFocused.current = false;
+			return;
+		}
+		const panel = panelRef.current;
+		if (panel === null || !visible || hasFocused.current) return;
+		hasFocused.current = true;
+		const previous = document.activeElement;
+		(panel.querySelector(FOCUSABLE) ?? panel).focus({ preventScroll: true });
+		return () => {
+			if (panel.contains(document.activeElement)) previous?.focus({ preventScroll: true });
+		};
+	}, [open, visible]);
+	react.useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+				anchor?.focus({ preventScroll: true });
+				return;
+			}
+			if (event.key !== "Tab") return;
+			const panel = panelRef.current;
+			if (panel === null) return;
+			const items = Array.from(panel.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+			if (items.length === 0) return;
+			const first = items[0];
+			const last = items[items.length - 1];
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		const onPointerDown = (event) => {
+			const target = event.target;
+			if (panelRef.current?.contains(target) === true) return;
+			if (anchor?.contains(target) === true) return;
+			onClose();
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		document.addEventListener("pointerdown", onPointerDown, true);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown, true);
+			document.removeEventListener("pointerdown", onPointerDown, true);
+		};
+	}, [
+		open,
+		onClose,
+		anchor
+	]);
+	if (!open || !mounted) return null;
+	if (asSheet) return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "cp-sheet-root",
+		"data-cp-open": "true",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cp-scrim",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: panelRef,
+			className: require_context.cx("cp-sheet", className),
+			tabIndex: -1,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "cp-grabber",
+				"aria-label": "Close",
+				onClick: onClose
+			}), children]
+		})]
+	}), document.body);
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: panelRef,
+		className: require_context.cx("cp-popover", className),
+		tabIndex: -1,
+		style: {
+			top: position?.top ?? 0,
+			left: position?.left ?? 0,
+			visibility: position === null ? "hidden" : "visible",
+			...position === null ? null : { ["--cp-available-h"]: `${position.available}px` }
+		},
+		children
+	}), document.body);
+}
+//#endregion
+exports.Popover = Popover;

package/dist/components/Popover.d.cts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/components/Popover.d.ts
+export interface PopoverProps {
+  anchor: HTMLElement | null;
+  open: boolean;
+  onClose: () => void;
+  offset?: number;
+  sheetOnMobile?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+export declare function Popover(props: PopoverProps): React.ReactElement | null;
+//#endregion

package/dist/components/Popover.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/components/Popover.d.ts
+export interface PopoverProps {
+  anchor: HTMLElement | null;
+  open: boolean;
+  onClose: () => void;
+  offset?: number;
+  sheetOnMobile?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+export declare function Popover(props: PopoverProps): React.ReactElement | null;
+//#endregion

package/dist/components/Popover.js

@@ -0,0 +1,153 @@
+"use client";
+import { cx } from "../core/context.js";
+import { COMPACT_QUERY, useMediaQuery } from "../core/useMediaQuery.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Popover.tsx
+const MARGIN = 8;
+const MIN_AVAILABLE = 160;
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
+function Popover(props) {
+	const { anchor, open, onClose, offset = 8, sheetOnMobile = true, className, children } = props;
+	const panelRef = React.useRef(null);
+	const [position, setPosition] = React.useState(null);
+	const compact = useMediaQuery(COMPACT_QUERY);
+	const asSheet = sheetOnMobile && compact;
+	const [mounted, setMounted] = React.useState(false);
+	React.useEffect(() => setMounted(true), []);
+	const place = React.useCallback(() => {
+		const panel = panelRef.current;
+		if (anchor === null || panel === null) return;
+		const a = anchor.getBoundingClientRect();
+		const p = panel.getBoundingClientRect();
+		const below = window.innerHeight - a.bottom - offset - MARGIN;
+		const above = a.top - offset - MARGIN;
+		let top;
+		let available;
+		if (p.height <= below || below >= above && p.height > above) {
+			top = a.bottom + offset;
+			available = below;
+		} else {
+			available = above;
+			top = Math.max(MARGIN, a.top - offset - p.height);
+		}
+		let left = a.left;
+		const maxLeft = window.innerWidth - p.width - MARGIN;
+		if (left > maxLeft) left = Math.max(MARGIN, maxLeft);
+		if (left < MARGIN) left = MARGIN;
+		setPosition({
+			top: top + window.scrollY,
+			left: left + window.scrollX,
+			available: Math.max(available, MIN_AVAILABLE)
+		});
+	}, [anchor, offset]);
+	React.useLayoutEffect(() => {
+		if (!open || asSheet) {
+			setPosition(null);
+			return;
+		}
+		place();
+		window.addEventListener("scroll", place, true);
+		window.addEventListener("resize", place);
+		return () => {
+			window.removeEventListener("scroll", place, true);
+			window.removeEventListener("resize", place);
+		};
+	}, [
+		open,
+		asSheet,
+		place
+	]);
+	const hasFocused = React.useRef(false);
+	const visible = asSheet || position !== null;
+	React.useEffect(() => {
+		if (!open) {
+			hasFocused.current = false;
+			return;
+		}
+		const panel = panelRef.current;
+		if (panel === null || !visible || hasFocused.current) return;
+		hasFocused.current = true;
+		const previous = document.activeElement;
+		(panel.querySelector(FOCUSABLE) ?? panel).focus({ preventScroll: true });
+		return () => {
+			if (panel.contains(document.activeElement)) previous?.focus({ preventScroll: true });
+		};
+	}, [open, visible]);
+	React.useEffect(() => {
+		if (!open) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onClose();
+				anchor?.focus({ preventScroll: true });
+				return;
+			}
+			if (event.key !== "Tab") return;
+			const panel = panelRef.current;
+			if (panel === null) return;
+			const items = Array.from(panel.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+			if (items.length === 0) return;
+			const first = items[0];
+			const last = items[items.length - 1];
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		const onPointerDown = (event) => {
+			const target = event.target;
+			if (panelRef.current?.contains(target) === true) return;
+			if (anchor?.contains(target) === true) return;
+			onClose();
+		};
+		document.addEventListener("keydown", onKeyDown, true);
+		document.addEventListener("pointerdown", onPointerDown, true);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown, true);
+			document.removeEventListener("pointerdown", onPointerDown, true);
+		};
+	}, [
+		open,
+		onClose,
+		anchor
+	]);
+	if (!open || !mounted) return null;
+	if (asSheet) return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: "cp-sheet-root",
+		"data-cp-open": "true",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "cp-scrim",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			className: cx("cp-sheet", className),
+			tabIndex: -1,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cp-grabber",
+				"aria-label": "Close",
+				onClick: onClose
+			}), children]
+		})]
+	}), document.body);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref: panelRef,
+		className: cx("cp-popover", className),
+		tabIndex: -1,
+		style: {
+			top: position?.top ?? 0,
+			left: position?.left ?? 0,
+			visibility: position === null ? "hidden" : "visible",
+			...position === null ? null : { ["--cp-available-h"]: `${position.available}px` }
+		},
+		children
+	}), document.body);
+}
+//#endregion
+export { Popover };
+

package/dist/contrast.cjs

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_contrast = require("./a11y/contrast.cjs");
+exports.apcaContrast = require_contrast.apcaContrast;
+exports.contrastRatio = require_contrast.contrastRatio;
+exports.contrastReport = require_contrast.contrastReport;
+exports.meetsContrast = require_contrast.meetsContrast;
+exports.meetsNonTextContrast = require_contrast.meetsNonTextContrast;
+exports.readableTextColor = require_contrast.readableTextColor;
+exports.relativeLuminance = require_contrast.relativeLuminance;
+exports.wcagLevel = require_contrast.wcagLevel;

package/dist/contrast.d.cts

@@ -0,0 +1,2 @@
+import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.cjs";
+export { type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };

package/dist/contrast.d.ts

@@ -0,0 +1,2 @@
+import { ContrastOptions, ContrastReport, TextSize, WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
+export { type ContrastOptions, type ContrastReport, type TextSize, type WcagLevel, apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };

package/dist/contrast.js

@@ -0,0 +1,2 @@
+import { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel } from "./a11y/contrast.js";
+export { apcaContrast, contrastRatio, contrastReport, meetsContrast, meetsNonTextContrast, readableTextColor, relativeLuminance, wcagLevel };

package/dist/core/context.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/core/context.ts
+const PanelContext = react.createContext(null);
+const PanelProvider = PanelContext.Provider;
+function usePanel() {
+	const value = react.useContext(PanelContext);
+	if (value === null) throw new Error("chroma-panel: this component must be rendered inside <ChromaPanel> or <ColorInput>.");
+	return value;
+}
+function cx(...parts) {
+	let out = "";
+	for (const part of parts) if (typeof part === "string" && part !== "") out = out === "" ? part : out + " " + part;
+	return out;
+}
+let idCounter = 0;
+function useStableId(prefix) {
+	const reactUseId = react.useId;
+	if (typeof reactUseId === "function") return prefix + reactUseId().replace(/:/g, "");
+	const ref = react.useRef(null);
+	if (ref.current === null) ref.current = prefix + String(++idCounter);
+	return ref.current;
+}
+//#endregion
+exports.PanelProvider = PanelProvider;
+exports.cx = cx;
+exports.usePanel = usePanel;
+exports.useStableId = useStableId;

package/dist/core/context.d.cts

@@ -0,0 +1,43 @@
+import { ColorStore } from "./store.cjs";
+import "react";
+//#region src/core/context.d.ts
+export interface ChromaClassNames {
+  root?: string;
+  titlebar?: string;
+  toolbar?: string;
+  tab?: string;
+  panel?: string;
+  footer?: string;
+  swatch?: string;
+  slider?: string;
+  thumb?: string;
+  field?: string;
+  trigger?: string;
+  popover?: string;
+}
+export interface ColorPalette {
+  name: string;
+  colors: (string | {
+    color: string;
+    name?: string;
+  })[];
+}
+export interface PanelOptions {
+  modeProps: Record<string, Record<string, unknown>>;
+  palettes: ColorPalette[] | undefined;
+  pencils: string[] | undefined;
+  showAlpha: boolean;
+  showEyedropper: boolean;
+  showRecentColors: boolean;
+  recentColors: string[];
+  onRecentColorsChange?: (colors: string[]) => void;
+}
+export interface PanelContextValue {
+  store: ColorStore;
+  disabled: boolean;
+  classNames: ChromaClassNames;
+  options: PanelOptions;
+  idPrefix: string;
+}
+export declare function usePanel(): PanelContextValue;
+//#endregion

package/dist/core/context.d.ts

@@ -0,0 +1,43 @@
+import { ColorStore } from "./store.js";
+import "react";
+//#region src/core/context.d.ts
+export interface ChromaClassNames {
+  root?: string;
+  titlebar?: string;
+  toolbar?: string;
+  tab?: string;
+  panel?: string;
+  footer?: string;
+  swatch?: string;
+  slider?: string;
+  thumb?: string;
+  field?: string;
+  trigger?: string;
+  popover?: string;
+}
+export interface ColorPalette {
+  name: string;
+  colors: (string | {
+    color: string;
+    name?: string;
+  })[];
+}
+export interface PanelOptions {
+  modeProps: Record<string, Record<string, unknown>>;
+  palettes: ColorPalette[] | undefined;
+  pencils: string[] | undefined;
+  showAlpha: boolean;
+  showEyedropper: boolean;
+  showRecentColors: boolean;
+  recentColors: string[];
+  onRecentColorsChange?: (colors: string[]) => void;
+}
+export interface PanelContextValue {
+  store: ColorStore;
+  disabled: boolean;
+  classNames: ChromaClassNames;
+  options: PanelOptions;
+  idPrefix: string;
+}
+export declare function usePanel(): PanelContextValue;
+//#endregion

package/dist/core/context.js

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+//#region src/core/context.ts
+const PanelContext = React.createContext(null);
+const PanelProvider = PanelContext.Provider;
+function usePanel() {
+	const value = React.useContext(PanelContext);
+	if (value === null) throw new Error("chroma-panel: this component must be rendered inside <ChromaPanel> or <ColorInput>.");
+	return value;
+}
+function cx(...parts) {
+	let out = "";
+	for (const part of parts) if (typeof part === "string" && part !== "") out = out === "" ? part : out + " " + part;
+	return out;
+}
+let idCounter = 0;
+function useStableId(prefix) {
+	const reactUseId = React.useId;
+	if (typeof reactUseId === "function") return prefix + reactUseId().replace(/:/g, "");
+	const ref = React.useRef(null);
+	if (ref.current === null) ref.current = prefix + String(++idCounter);
+	return ref.current;
+}
+//#endregion
+export { PanelProvider, cx, usePanel, useStableId };
+

package/dist/core/dev.cjs

@@ -0,0 +1,11 @@
+//#region src/core/dev.ts
+const isDev = typeof process !== "undefined" && typeof process.env === "object" ? process.env.NODE_ENV !== "production" : false;
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+	if (!isDev || warned.has(message)) return;
+	warned.add(message);
+	console.warn(`chroma-panel: ${message}`);
+}
+//#endregion
+exports.isDev = isDev;
+exports.warnOnce = warnOnce;

package/dist/core/dev.js

@@ -0,0 +1,11 @@
+//#region src/core/dev.ts
+const isDev = typeof process !== "undefined" && typeof process.env === "object" ? process.env.NODE_ENV !== "production" : false;
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+	if (!isDev || warned.has(message)) return;
+	warned.add(message);
+	console.warn(`chroma-panel: ${message}`);
+}
+//#endregion
+export { isDev, warnOnce };
+

package/dist/core/store.cjs

@@ -0,0 +1,43 @@
+const require_sticky = require("../color/sticky.cjs");
+//#region src/core/store.ts
+function createColorStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	const commitListeners = /* @__PURE__ */ new Set();
+	function emit() {
+		for (const listener of Array.from(listeners)) listener(state);
+	}
+	function set(next) {
+		if (require_sticky.sameHsva(state, next)) return;
+		state = next;
+		emit();
+	}
+	return {
+		get: () => state,
+		set,
+		patch: (partial) => set({
+			...state,
+			...partial
+		}),
+		ingest: (next) => set(require_sticky.ingest(next, state)),
+		commit: () => {
+			for (const listener of Array.from(commitListeners)) listener(state);
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		subscribeCommit: (listener) => {
+			commitListeners.add(listener);
+			return () => {
+				commitListeners.delete(listener);
+			};
+		},
+		getSnapshot: () => state,
+		getServerSnapshot: () => state
+	};
+}
+//#endregion
+exports.createColorStore = createColorStore;

package/dist/core/store.d.cts

@@ -0,0 +1,17 @@
+import { Hsva } from "../color/types.cjs";
+//#region src/core/store.d.ts
+export type ColorListener = (color: Hsva) => void;
+export type Unsubscribe = () => void;
+export interface ColorStore {
+  get(): Hsva;
+  set(next: Hsva): void;
+  patch(partial: Partial<Hsva>): void;
+  ingest(next: Hsva): void;
+  commit(): void;
+  subscribe(listener: ColorListener): Unsubscribe;
+  subscribeCommit(listener: ColorListener): Unsubscribe;
+  getSnapshot(): Hsva;
+  getServerSnapshot(): Hsva;
+}
+export declare function createColorStore(initial: Hsva): ColorStore;
+//#endregion

package/dist/core/store.d.ts

@@ -0,0 +1,17 @@
+import { Hsva } from "../color/types.js";
+//#region src/core/store.d.ts
+export type ColorListener = (color: Hsva) => void;
+export type Unsubscribe = () => void;
+export interface ColorStore {
+  get(): Hsva;
+  set(next: Hsva): void;
+  patch(partial: Partial<Hsva>): void;
+  ingest(next: Hsva): void;
+  commit(): void;
+  subscribe(listener: ColorListener): Unsubscribe;
+  subscribeCommit(listener: ColorListener): Unsubscribe;
+  getSnapshot(): Hsva;
+  getServerSnapshot(): Hsva;
+}
+export declare function createColorStore(initial: Hsva): ColorStore;
+//#endregion

package/dist/core/store.js

@@ -0,0 +1,44 @@
+import { ingest, sameHsva } from "../color/sticky.js";
+//#region src/core/store.ts
+function createColorStore(initial) {
+	let state = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	const commitListeners = /* @__PURE__ */ new Set();
+	function emit() {
+		for (const listener of Array.from(listeners)) listener(state);
+	}
+	function set(next) {
+		if (sameHsva(state, next)) return;
+		state = next;
+		emit();
+	}
+	return {
+		get: () => state,
+		set,
+		patch: (partial) => set({
+			...state,
+			...partial
+		}),
+		ingest: (next) => set(ingest(next, state)),
+		commit: () => {
+			for (const listener of Array.from(commitListeners)) listener(state);
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		subscribeCommit: (listener) => {
+			commitListeners.add(listener);
+			return () => {
+				commitListeners.delete(listener);
+			};
+		},
+		getSnapshot: () => state,
+		getServerSnapshot: () => state
+	};
+}
+//#endregion
+export { createColorStore };
+