chroma-panel 0.1.0

package/dist/components/ColorInput.cjs

@@ -0,0 +1,128 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_useColorStore = require("../core/useColorStore.cjs");
+const require_parse = require("../color/parse.cjs");
+const require_serialize = require("../color/serialize.cjs");
+const require_store = require("../core/store.cjs");
+const require_useFormControl = require("../core/useFormControl.cjs");
+const require_styleInjector = require("../core/styleInjector.cjs");
+const require_css = require("../styles/css.cjs");
+const require_ChromaPanel = require("./ChromaPanel.cjs");
+const require_Popover = require("./Popover.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/ColorInput.tsx
+function ColorInput(props) {
+	const { open, defaultOpen = false, onOpenChange, name, form, required = false, readOnly = false, autoComplete, validationBehavior = "native", id, "aria-label": ariaLabel = "Choose a colour", triggerClassName, disabled: disabledProp = false, className, classNames = {}, format = "hex", value, defaultValue = require_ChromaPanel.DEFAULT_COLOR, store: externalStore, mode, defaultMode, onModeChange, ...panelProps } = props;
+	const triggerId = require_context.useStableId("cp-trigger-");
+	const hiddenRef = react.useRef(null);
+	const fieldsetDisabled = require_useFormControl.useFieldsetDisabled(hiddenRef);
+	const disabled = disabledProp || fieldsetDisabled;
+	const [trigger, setTrigger] = react.useState(null);
+	const shouldInject = panelProps.injectStyles ?? true;
+	react.useEffect(() => {
+		if (shouldInject) require_styleInjector.injectStyles(require_css.css, "v2", trigger);
+	}, [shouldInject, trigger]);
+	const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
+	const isOpen = open ?? internalOpen;
+	const setOpen = react.useCallback((next) => {
+		if (open === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [open, onOpenChange]);
+	const ownStore = react.useMemo(() => {
+		const seed = value ?? defaultValue;
+		const parsed = typeof seed === "string" ? require_parse.parse(seed) : seed;
+		return require_store.createColorStore(parsed ?? require_ChromaPanel.FALLBACK);
+	}, []);
+	const store = externalStore ?? ownStore;
+	const [internalMode, setInternalMode] = react.useState(defaultMode);
+	const activeMode = mode ?? internalMode;
+	const handleModeChange = react.useCallback((next) => {
+		if (mode === void 0) setInternalMode(next);
+		onModeChange?.(next);
+	}, [mode, onModeChange]);
+	const closeFromPanel = react.useCallback(() => {
+		setOpen(false);
+		trigger?.focus({ preventScroll: true });
+	}, [setOpen, trigger]);
+	const formatRef = react.useRef(format);
+	react.useEffect(() => {
+		formatRef.current = format;
+	});
+	require_useColorStore.useTransientColor(store, (c) => {
+		trigger?.style.setProperty("--cp-trigger-color", require_serialize.toRgbaString(c));
+		const hidden = hiddenRef.current;
+		if (hidden !== null) require_useFormControl.setNativeValue(hidden, require_serialize.toFormat(c, formatRef.current));
+	});
+	require_useFormControl.useFormReset(hiddenRef, () => {
+		const parsed = typeof defaultValue === "string" ? require_parse.parse(defaultValue) : defaultValue;
+		if (parsed !== null && parsed !== void 0) store.ingest(parsed);
+	});
+	require_useFormControl.useConstraintValidation(hiddenRef, {
+		behavior: validationBehavior,
+		required,
+		isEmpty: false,
+		focusTrigger: () => trigger?.focus()
+	});
+	const seed = store.get();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			ref: setTrigger,
+			type: "button",
+			id: id ?? triggerId,
+			className: require_context.cx("cp-trigger", classNames.trigger, triggerClassName, className),
+			style: { ["--cp-trigger-color"]: require_serialize.toRgbaString(seed) },
+			"aria-label": ariaLabel,
+			"aria-haspopup": "dialog",
+			"aria-expanded": isOpen,
+			"aria-readonly": readOnly || void 0,
+			disabled,
+			onClick: () => {
+				if (!readOnly) setOpen(!isOpen);
+			}
+		}),
+		name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: hiddenRef,
+			type: "text",
+			name,
+			form,
+			defaultValue: require_serialize.toFormat(seed, format),
+			disabled,
+			required,
+			readOnly,
+			autoComplete,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			style: require_useFormControl.visuallyHiddenInput,
+			onChange: () => {}
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
+			anchor: trigger,
+			open: isOpen,
+			onClose: () => setOpen(false),
+			className: classNames.popover,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cp-dialog",
+				role: "dialog",
+				"aria-label": ariaLabel,
+				"aria-modal": "false",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChromaPanel.ChromaPanel, {
+					...panelProps,
+					store,
+					value,
+					defaultValue,
+					format,
+					disabled: disabled || readOnly,
+					classNames,
+					mode: activeMode,
+					onModeChange: handleModeChange,
+					onClose: closeFromPanel
+				})
+			})
+		})
+	] });
+}
+//#endregion
+exports.ColorInput = ColorInput;

package/dist/components/ColorInput.d.cts

@@ -0,0 +1,19 @@
+import { ChromaPanelProps } from "./ChromaPanel.cjs";
+import * as React from "react";
+//#region src/components/ColorInput.d.ts
+export interface ColorInputProps extends ChromaPanelProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  name?: string;
+  form?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  autoComplete?: string;
+  validationBehavior?: "native" | "aria";
+  id?: string;
+  "aria-label"?: string;
+  triggerClassName?: string;
+}
+export declare function ColorInput(props: ColorInputProps): React.ReactElement;
+//#endregion

package/dist/components/ColorInput.d.ts

@@ -0,0 +1,19 @@
+import { ChromaPanelProps } from "./ChromaPanel.js";
+import * as React from "react";
+//#region src/components/ColorInput.d.ts
+export interface ColorInputProps extends ChromaPanelProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  name?: string;
+  form?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  autoComplete?: string;
+  validationBehavior?: "native" | "aria";
+  id?: string;
+  "aria-label"?: string;
+  triggerClassName?: string;
+}
+export declare function ColorInput(props: ColorInputProps): React.ReactElement;
+//#endregion

package/dist/components/ColorInput.js

@@ -0,0 +1,127 @@
+"use client";
+import { cx, useStableId } from "../core/context.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { parse } from "../color/parse.js";
+import { toFormat, toRgbaString } from "../color/serialize.js";
+import { createColorStore } from "../core/store.js";
+import { setNativeValue, useConstraintValidation, useFieldsetDisabled, useFormReset, visuallyHiddenInput } from "../core/useFormControl.js";
+import { injectStyles } from "../core/styleInjector.js";
+import { css } from "../styles/css.js";
+import { ChromaPanel, DEFAULT_COLOR, FALLBACK } from "./ChromaPanel.js";
+import { Popover } from "./Popover.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ColorInput.tsx
+function ColorInput(props) {
+	const { open, defaultOpen = false, onOpenChange, name, form, required = false, readOnly = false, autoComplete, validationBehavior = "native", id, "aria-label": ariaLabel = "Choose a colour", triggerClassName, disabled: disabledProp = false, className, classNames = {}, format = "hex", value, defaultValue = DEFAULT_COLOR, store: externalStore, mode, defaultMode, onModeChange, ...panelProps } = props;
+	const triggerId = useStableId("cp-trigger-");
+	const hiddenRef = React.useRef(null);
+	const fieldsetDisabled = useFieldsetDisabled(hiddenRef);
+	const disabled = disabledProp || fieldsetDisabled;
+	const [trigger, setTrigger] = React.useState(null);
+	const shouldInject = panelProps.injectStyles ?? true;
+	React.useEffect(() => {
+		if (shouldInject) injectStyles(css, "v2", trigger);
+	}, [shouldInject, trigger]);
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const isOpen = open ?? internalOpen;
+	const setOpen = React.useCallback((next) => {
+		if (open === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [open, onOpenChange]);
+	const ownStore = React.useMemo(() => {
+		const seed = value ?? defaultValue;
+		const parsed = typeof seed === "string" ? parse(seed) : seed;
+		return createColorStore(parsed ?? FALLBACK);
+	}, []);
+	const store = externalStore ?? ownStore;
+	const [internalMode, setInternalMode] = React.useState(defaultMode);
+	const activeMode = mode ?? internalMode;
+	const handleModeChange = React.useCallback((next) => {
+		if (mode === void 0) setInternalMode(next);
+		onModeChange?.(next);
+	}, [mode, onModeChange]);
+	const closeFromPanel = React.useCallback(() => {
+		setOpen(false);
+		trigger?.focus({ preventScroll: true });
+	}, [setOpen, trigger]);
+	const formatRef = React.useRef(format);
+	React.useEffect(() => {
+		formatRef.current = format;
+	});
+	useTransientColor(store, (c) => {
+		trigger?.style.setProperty("--cp-trigger-color", toRgbaString(c));
+		const hidden = hiddenRef.current;
+		if (hidden !== null) setNativeValue(hidden, toFormat(c, formatRef.current));
+	});
+	useFormReset(hiddenRef, () => {
+		const parsed = typeof defaultValue === "string" ? parse(defaultValue) : defaultValue;
+		if (parsed !== null && parsed !== void 0) store.ingest(parsed);
+	});
+	useConstraintValidation(hiddenRef, {
+		behavior: validationBehavior,
+		required,
+		isEmpty: false,
+		focusTrigger: () => trigger?.focus()
+	});
+	const seed = store.get();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("button", {
+			ref: setTrigger,
+			type: "button",
+			id: id ?? triggerId,
+			className: cx("cp-trigger", classNames.trigger, triggerClassName, className),
+			style: { ["--cp-trigger-color"]: toRgbaString(seed) },
+			"aria-label": ariaLabel,
+			"aria-haspopup": "dialog",
+			"aria-expanded": isOpen,
+			"aria-readonly": readOnly || void 0,
+			disabled,
+			onClick: () => {
+				if (!readOnly) setOpen(!isOpen);
+			}
+		}),
+		name !== void 0 && /* @__PURE__ */ jsx("input", {
+			ref: hiddenRef,
+			type: "text",
+			name,
+			form,
+			defaultValue: toFormat(seed, format),
+			disabled,
+			required,
+			readOnly,
+			autoComplete,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			style: visuallyHiddenInput,
+			onChange: () => {}
+		}),
+		/* @__PURE__ */ jsx(Popover, {
+			anchor: trigger,
+			open: isOpen,
+			onClose: () => setOpen(false),
+			className: classNames.popover,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "cp-dialog",
+				role: "dialog",
+				"aria-label": ariaLabel,
+				"aria-modal": "false",
+				children: /* @__PURE__ */ jsx(ChromaPanel, {
+					...panelProps,
+					store,
+					value,
+					defaultValue,
+					format,
+					disabled: disabled || readOnly,
+					classNames,
+					mode: activeMode,
+					onModeChange: handleModeChange,
+					onClose: closeFromPanel
+				})
+			})
+		})
+	] });
+}
+//#endregion
+export { ColorInput };
+

package/dist/components/ModeToolbar.cjs

@@ -0,0 +1,33 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_SegmentedControl = require("../primitives/SegmentedControl.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/ModeToolbar.tsx
+function ModeToolbar(props) {
+	const { modes, activeId, onSelect } = props;
+	const { classNames, idPrefix, disabled } = require_context.usePanel();
+	const items = react.useMemo(() => modes.map((mode) => {
+		const Icon = mode.icon;
+		return {
+			id: mode.id,
+			label: mode.label,
+			content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+		};
+	}), [modes]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SegmentedControl.SegmentedControl, {
+		items,
+		value: activeId,
+		onChange: onSelect,
+		ariaLabel: "Picker mode",
+		disabled,
+		segmentId: (id) => `${idPrefix}-tab-${id}`,
+		controls: (id) => `${idPrefix}-panel-${id}`,
+		className: require_context.cx("cp-toolbar", classNames.toolbar),
+		tabClassName: require_context.cx(classNames.tab)
+	});
+}
+//#endregion
+exports.ModeToolbar = ModeToolbar;

package/dist/components/ModeToolbar.d.cts

@@ -0,0 +1,10 @@
+import { PickerMode } from "../modes/registry.cjs";
+import * as React from "react";
+//#region src/components/ModeToolbar.d.ts
+export interface ModeToolbarProps {
+  modes: PickerMode[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}
+export declare function ModeToolbar(props: ModeToolbarProps): React.ReactElement;
+//#endregion

package/dist/components/ModeToolbar.d.ts

@@ -0,0 +1,10 @@
+import { PickerMode } from "../modes/registry.js";
+import * as React from "react";
+//#region src/components/ModeToolbar.d.ts
+export interface ModeToolbarProps {
+  modes: PickerMode[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}
+export declare function ModeToolbar(props: ModeToolbarProps): React.ReactElement;
+//#endregion

package/dist/components/ModeToolbar.js

@@ -0,0 +1,32 @@
+"use client";
+import { cx, usePanel } from "../core/context.js";
+import { SegmentedControl } from "../primitives/SegmentedControl.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ModeToolbar.tsx
+function ModeToolbar(props) {
+	const { modes, activeId, onSelect } = props;
+	const { classNames, idPrefix, disabled } = usePanel();
+	const items = React.useMemo(() => modes.map((mode) => {
+		const Icon = mode.icon;
+		return {
+			id: mode.id,
+			label: mode.label,
+			content: /* @__PURE__ */ jsx(Icon, {})
+		};
+	}), [modes]);
+	return /* @__PURE__ */ jsx(SegmentedControl, {
+		items,
+		value: activeId,
+		onChange: onSelect,
+		ariaLabel: "Picker mode",
+		disabled,
+		segmentId: (id) => `${idPrefix}-tab-${id}`,
+		controls: (id) => `${idPrefix}-panel-${id}`,
+		className: cx("cp-toolbar", classNames.toolbar),
+		tabClassName: cx(classNames.tab)
+	});
+}
+//#endregion
+export { ModeToolbar };
+

package/dist/components/PanelFooter.cjs

@@ -0,0 +1,82 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_parse = require("../color/parse.cjs");
+const require_serialize = require("../color/serialize.cjs");
+const require_icons = require("../primitives/icons.cjs");
+const require_useScrollFade = require("../core/useScrollFade.cjs");
+const require_useEyedropper = require("../primitives/useEyedropper.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/PanelFooter.tsx
+function PanelFooter() {
+	const { store, classNames, options, disabled } = require_context.usePanel();
+	const { supported, pick } = require_useEyedropper.useEyedropper();
+	const handlePick = async () => {
+		const hex = await pick();
+		if (hex === null) return;
+		const parsed = require_parse.parse(hex);
+		if (parsed === null) return;
+		store.ingest(parsed);
+		store.commit();
+	};
+	const recentsRef = react.useRef(null);
+	const [current, setCurrent] = react.useState(null);
+	react.useEffect(() => store.subscribeCommit((c) => setCurrent(require_serialize.toHex(c).toLowerCase())), [store]);
+	const recents = options.showRecentColors ? options.recentColors.filter((color) => {
+		if (current === null) return true;
+		const parsed = require_parse.parse(color);
+		return (parsed === null ? color : require_serialize.toHex(parsed)).toLowerCase() !== current;
+	}).slice(0, 10) : [];
+	const showEyedropper = options.showEyedropper && supported;
+	require_useScrollFade.useScrollFade(recentsRef, recents.length, "x");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_context.cx("cp-footer", classNames.footer),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cp-preview",
+				"aria-hidden": "true"
+			}),
+			recents.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				ref: recentsRef,
+				className: "cp-recents",
+				"aria-label": "Recent colours",
+				children: recents.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: require_context.cx("cp-swatch", "cp-swatch-round", classNames.swatch),
+					style: { ["--cp-swatch-color"]: color },
+					"aria-label": `Recent colour ${color}`,
+					disabled,
+					onClick: () => {
+						const parsed = require_parse.parse(color);
+						if (parsed === null) return;
+						store.ingest(parsed);
+						store.commit();
+					}
+				}) }, `${color}-${index}`))
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "cp-footer-spacer" }),
+			showEyedropper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "cp-icon-button",
+				"aria-label": "Pick a colour from the screen",
+				title: "Pick a colour from the screen",
+				disabled,
+				onClick: () => {
+					handlePick();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.EyedropperIcon, {})
+			})
+		]
+	});
+}
+function pushRecent(list, hex, limit = 10) {
+	const key = hex.toLowerCase();
+	return [hex, ...list.filter((c) => {
+		const parsed = require_parse.parse(c);
+		return parsed === null ? c.toLowerCase() !== key : require_serialize.toHex(parsed).toLowerCase() !== key;
+	})].slice(0, limit);
+}
+//#endregion
+exports.PanelFooter = PanelFooter;
+exports.pushRecent = pushRecent;

package/dist/components/PanelFooter.d.cts

@@ -0,0 +1,5 @@
+import * as React from "react";
+//#region src/components/PanelFooter.d.ts
+export declare function PanelFooter(): React.ReactElement | null;
+export declare function pushRecent(list: string[], hex: string, limit?: number): string[];
+//#endregion

package/dist/components/PanelFooter.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+//#region src/components/PanelFooter.d.ts
+export declare function PanelFooter(): React.ReactElement | null;
+export declare function pushRecent(list: string[], hex: string, limit?: number): string[];
+//#endregion

package/dist/components/PanelFooter.js

@@ -0,0 +1,80 @@
+"use client";
+import { cx, usePanel } from "../core/context.js";
+import { parse } from "../color/parse.js";
+import { toHex } from "../color/serialize.js";
+import { EyedropperIcon } from "../primitives/icons.js";
+import { useScrollFade } from "../core/useScrollFade.js";
+import { useEyedropper } from "../primitives/useEyedropper.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PanelFooter.tsx
+function PanelFooter() {
+	const { store, classNames, options, disabled } = usePanel();
+	const { supported, pick } = useEyedropper();
+	const handlePick = async () => {
+		const hex = await pick();
+		if (hex === null) return;
+		const parsed = parse(hex);
+		if (parsed === null) return;
+		store.ingest(parsed);
+		store.commit();
+	};
+	const recentsRef = React.useRef(null);
+	const [current, setCurrent] = React.useState(null);
+	React.useEffect(() => store.subscribeCommit((c) => setCurrent(toHex(c).toLowerCase())), [store]);
+	const recents = options.showRecentColors ? options.recentColors.filter((color) => {
+		if (current === null) return true;
+		const parsed = parse(color);
+		return (parsed === null ? color : toHex(parsed)).toLowerCase() !== current;
+	}).slice(0, 10) : [];
+	const showEyedropper = options.showEyedropper && supported;
+	useScrollFade(recentsRef, recents.length, "x");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("cp-footer", classNames.footer),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "cp-preview",
+				"aria-hidden": "true"
+			}),
+			recents.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				ref: recentsRef,
+				className: "cp-recents",
+				"aria-label": "Recent colours",
+				children: recents.map((color, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("cp-swatch", "cp-swatch-round", classNames.swatch),
+					style: { ["--cp-swatch-color"]: color },
+					"aria-label": `Recent colour ${color}`,
+					disabled,
+					onClick: () => {
+						const parsed = parse(color);
+						if (parsed === null) return;
+						store.ingest(parsed);
+						store.commit();
+					}
+				}) }, `${color}-${index}`))
+			}) : /* @__PURE__ */ jsx("div", { className: "cp-footer-spacer" }),
+			showEyedropper && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "cp-icon-button",
+				"aria-label": "Pick a colour from the screen",
+				title: "Pick a colour from the screen",
+				disabled,
+				onClick: () => {
+					handlePick();
+				},
+				children: /* @__PURE__ */ jsx(EyedropperIcon, {})
+			})
+		]
+	});
+}
+function pushRecent(list, hex, limit = 10) {
+	const key = hex.toLowerCase();
+	return [hex, ...list.filter((c) => {
+		const parsed = parse(c);
+		return parsed === null ? c.toLowerCase() !== key : toHex(parsed).toLowerCase() !== key;
+	})].slice(0, limit);
+}
+//#endregion
+export { PanelFooter, pushRecent };
+