chroma-panel 0.1.0

package/dist/primitives/NumberField.cjs

@@ -0,0 +1,65 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+const require_convert = require("../color/convert.cjs");
+const require_useColorStore = require("../core/useColorStore.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/NumberField.tsx
+function NumberField(props) {
+	const { label, min, max, step, read, write, className } = props;
+	const { store, disabled, classNames } = require_context.usePanel();
+	const id = require_context.useStableId("cp-num-");
+	const inputRef = react.useRef(null);
+	const focused = react.useRef(false);
+	const fns = react.useRef({
+		read,
+		write
+	});
+	react.useEffect(() => {
+		fns.current = {
+			read,
+			write
+		};
+	});
+	require_useColorStore.useTransientColor(store, (c) => {
+		if (focused.current) return;
+		const el = inputRef.current;
+		if (el !== null) el.value = String(Math.round(fns.current.read(c)));
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_context.cx("cp-field", classNames.field, className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: "cp-field-label",
+			htmlFor: id,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: inputRef,
+			id,
+			className: "cp-input",
+			type: "number",
+			inputMode: "numeric",
+			min,
+			max,
+			step: step ?? 1,
+			defaultValue: Math.round(read(store.get())),
+			disabled,
+			onFocus: () => {
+				focused.current = true;
+			},
+			onChange: (e) => {
+				const raw = e.currentTarget.valueAsNumber;
+				if (Number.isNaN(raw)) return;
+				store.set(fns.current.write(require_convert.clamp(raw, min, max), store.get()));
+			},
+			onBlur: (e) => {
+				focused.current = false;
+				e.currentTarget.value = String(Math.round(fns.current.read(store.get())));
+				store.commit();
+			}
+		})]
+	});
+}
+//#endregion
+exports.NumberField = NumberField;

package/dist/primitives/NumberField.d.cts

@@ -0,0 +1,14 @@
+import { Hsva } from "../color/types.cjs";
+import * as React from "react";
+//#region src/primitives/NumberField.d.ts
+export interface NumberFieldProps {
+  label: string;
+  min: number;
+  max: number;
+  step?: number;
+  read: (color: Hsva) => number;
+  write: (value: number, current: Hsva) => Hsva;
+  className?: string;
+}
+export declare function NumberField(props: NumberFieldProps): React.ReactElement;
+//#endregion

package/dist/primitives/NumberField.d.ts

@@ -0,0 +1,14 @@
+import { Hsva } from "../color/types.js";
+import * as React from "react";
+//#region src/primitives/NumberField.d.ts
+export interface NumberFieldProps {
+  label: string;
+  min: number;
+  max: number;
+  step?: number;
+  read: (color: Hsva) => number;
+  write: (value: number, current: Hsva) => Hsva;
+  className?: string;
+}
+export declare function NumberField(props: NumberFieldProps): React.ReactElement;
+//#endregion

package/dist/primitives/NumberField.js

@@ -0,0 +1,64 @@
+"use client";
+import { cx, usePanel, useStableId } from "../core/context.js";
+import { clamp } from "../color/convert.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/NumberField.tsx
+function NumberField(props) {
+	const { label, min, max, step, read, write, className } = props;
+	const { store, disabled, classNames } = usePanel();
+	const id = useStableId("cp-num-");
+	const inputRef = React.useRef(null);
+	const focused = React.useRef(false);
+	const fns = React.useRef({
+		read,
+		write
+	});
+	React.useEffect(() => {
+		fns.current = {
+			read,
+			write
+		};
+	});
+	useTransientColor(store, (c) => {
+		if (focused.current) return;
+		const el = inputRef.current;
+		if (el !== null) el.value = String(Math.round(fns.current.read(c)));
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("cp-field", classNames.field, className),
+		children: [/* @__PURE__ */ jsx("label", {
+			className: "cp-field-label",
+			htmlFor: id,
+			children: label
+		}), /* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			id,
+			className: "cp-input",
+			type: "number",
+			inputMode: "numeric",
+			min,
+			max,
+			step: step ?? 1,
+			defaultValue: Math.round(read(store.get())),
+			disabled,
+			onFocus: () => {
+				focused.current = true;
+			},
+			onChange: (e) => {
+				const raw = e.currentTarget.valueAsNumber;
+				if (Number.isNaN(raw)) return;
+				store.set(fns.current.write(clamp(raw, min, max), store.get()));
+			},
+			onBlur: (e) => {
+				focused.current = false;
+				e.currentTarget.value = String(Math.round(fns.current.read(store.get())));
+				store.commit();
+			}
+		})]
+	});
+}
+//#endregion
+export { NumberField };
+

package/dist/primitives/SegmentedControl.cjs

@@ -0,0 +1,66 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/SegmentedControl.tsx
+function SegmentedControl(props) {
+	const { items, value, onChange, size = "md", ariaLabel, controls, segmentId, disabled = false, className, tabClassName } = props;
+	const refs = react.useRef([]);
+	const activeIndex = Math.max(0, items.findIndex((item) => item.id === value));
+	const move = (to) => {
+		const wrapped = (to + items.length) % items.length;
+		const item = items[wrapped];
+		if (item === void 0) return;
+		onChange(item.id);
+		refs.current[wrapped]?.focus();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_context.cx("cp-seg", size === "sm" && "cp-seg-sm", className),
+		role: "tablist",
+		"aria-label": ariaLabel,
+		"aria-orientation": "horizontal",
+		style: {
+			["--cp-seg-count"]: items.length,
+			["--cp-seg-active"]: activeIndex
+		},
+		children: items.map((item, index) => {
+			const selected = item.id === value;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: (el) => {
+					refs.current[index] = el;
+				},
+				type: "button",
+				role: "tab",
+				id: segmentId?.(item.id),
+				"aria-controls": controls?.(item.id),
+				"aria-selected": selected,
+				"aria-label": item.label,
+				title: item.label,
+				tabIndex: selected ? 0 : -1,
+				disabled,
+				className: require_context.cx("cp-tab", tabClassName),
+				onClick: () => onChange(item.id),
+				onKeyDown: (event) => {
+					if (event.key === "ArrowRight") {
+						event.preventDefault();
+						move(index + 1);
+					} else if (event.key === "ArrowLeft") {
+						event.preventDefault();
+						move(index - 1);
+					} else if (event.key === "Home") {
+						event.preventDefault();
+						move(0);
+					} else if (event.key === "End") {
+						event.preventDefault();
+						move(items.length - 1);
+					}
+				},
+				children: item.content
+			}, item.id);
+		})
+	});
+}
+//#endregion
+exports.SegmentedControl = SegmentedControl;

package/dist/primitives/SegmentedControl.d.cts

@@ -0,0 +1,21 @@
+import * as React from "react";
+//#region src/primitives/SegmentedControl.d.ts
+export interface SegmentedItem {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+export interface SegmentedControlProps {
+  items: SegmentedItem[];
+  value: string;
+  onChange: (id: string) => void;
+  size?: "md" | "sm";
+  ariaLabel: string;
+  controls?: (id: string) => string;
+  segmentId?: (id: string) => string;
+  disabled?: boolean;
+  className?: string;
+  tabClassName?: string;
+}
+export declare function SegmentedControl(props: SegmentedControlProps): React.ReactElement;
+//#endregion

package/dist/primitives/SegmentedControl.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+//#region src/primitives/SegmentedControl.d.ts
+export interface SegmentedItem {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+export interface SegmentedControlProps {
+  items: SegmentedItem[];
+  value: string;
+  onChange: (id: string) => void;
+  size?: "md" | "sm";
+  ariaLabel: string;
+  controls?: (id: string) => string;
+  segmentId?: (id: string) => string;
+  disabled?: boolean;
+  className?: string;
+  tabClassName?: string;
+}
+export declare function SegmentedControl(props: SegmentedControlProps): React.ReactElement;
+//#endregion

package/dist/primitives/SegmentedControl.js

@@ -0,0 +1,65 @@
+"use client";
+import { cx } from "../core/context.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/SegmentedControl.tsx
+function SegmentedControl(props) {
+	const { items, value, onChange, size = "md", ariaLabel, controls, segmentId, disabled = false, className, tabClassName } = props;
+	const refs = React.useRef([]);
+	const activeIndex = Math.max(0, items.findIndex((item) => item.id === value));
+	const move = (to) => {
+		const wrapped = (to + items.length) % items.length;
+		const item = items[wrapped];
+		if (item === void 0) return;
+		onChange(item.id);
+		refs.current[wrapped]?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("cp-seg", size === "sm" && "cp-seg-sm", className),
+		role: "tablist",
+		"aria-label": ariaLabel,
+		"aria-orientation": "horizontal",
+		style: {
+			["--cp-seg-count"]: items.length,
+			["--cp-seg-active"]: activeIndex
+		},
+		children: items.map((item, index) => {
+			const selected = item.id === value;
+			return /* @__PURE__ */ jsx("button", {
+				ref: (el) => {
+					refs.current[index] = el;
+				},
+				type: "button",
+				role: "tab",
+				id: segmentId?.(item.id),
+				"aria-controls": controls?.(item.id),
+				"aria-selected": selected,
+				"aria-label": item.label,
+				title: item.label,
+				tabIndex: selected ? 0 : -1,
+				disabled,
+				className: cx("cp-tab", tabClassName),
+				onClick: () => onChange(item.id),
+				onKeyDown: (event) => {
+					if (event.key === "ArrowRight") {
+						event.preventDefault();
+						move(index + 1);
+					} else if (event.key === "ArrowLeft") {
+						event.preventDefault();
+						move(index - 1);
+					} else if (event.key === "Home") {
+						event.preventDefault();
+						move(0);
+					} else if (event.key === "End") {
+						event.preventDefault();
+						move(items.length - 1);
+					}
+				},
+				children: item.content
+			}, item.id);
+		})
+	});
+}
+//#endregion
+export { SegmentedControl };
+

package/dist/primitives/Swatch.cjs

@@ -0,0 +1,22 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../core/context.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Swatch.tsx
+function Swatch(props) {
+	const { color, label, matchKey, round, disabled, onSelect, className } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: require_context.cx("cp-swatch", round === true && "cp-swatch-round", className),
+		style: { ["--cp-swatch-color"]: color },
+		"data-cp-color": matchKey ?? color,
+		"aria-label": label ?? color,
+		"aria-pressed": false,
+		disabled,
+		onClick: () => onSelect?.(color)
+	});
+}
+//#endregion
+exports.Swatch = Swatch;

package/dist/primitives/Swatch.d.cts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/primitives/Swatch.d.ts
+export interface SwatchProps {
+  color: string;
+  label?: string;
+  matchKey?: string;
+  round?: boolean;
+  disabled?: boolean;
+  onSelect?: (color: string) => void;
+  className?: string;
+}
+export declare function Swatch(props: SwatchProps): React.ReactElement;
+//#endregion

package/dist/primitives/Swatch.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+//#region src/primitives/Swatch.d.ts
+export interface SwatchProps {
+  color: string;
+  label?: string;
+  matchKey?: string;
+  round?: boolean;
+  disabled?: boolean;
+  onSelect?: (color: string) => void;
+  className?: string;
+}
+export declare function Swatch(props: SwatchProps): React.ReactElement;
+//#endregion

package/dist/primitives/Swatch.js

@@ -0,0 +1,21 @@
+"use client";
+import { cx } from "../core/context.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/Swatch.tsx
+function Swatch(props) {
+	const { color, label, matchKey, round, disabled, onSelect, className } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cx("cp-swatch", round === true && "cp-swatch-round", className),
+		style: { ["--cp-swatch-color"]: color },
+		"data-cp-color": matchKey ?? color,
+		"aria-label": label ?? color,
+		"aria-pressed": false,
+		disabled,
+		onClick: () => onSelect?.(color)
+	});
+}
+//#endregion
+export { Swatch };
+

package/dist/primitives/SwatchGrid.cjs

@@ -0,0 +1,63 @@
+"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");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/SwatchGrid.tsx
+function SwatchGrid(props) {
+	const { swatches, columns = 10, variant = "spaced", round = false, label, className } = props;
+	const { store, disabled, classNames } = require_context.usePanel();
+	const gridRef = react.useRef(null);
+	const selected = react.useRef(null);
+	require_useColorStore.useTransientColor(store, (c) => {
+		const grid = gridRef.current;
+		if (grid === null) return;
+		const hex = require_serialize.toHex(c);
+		const next = grid.querySelector(`[data-cp-color="${hex}"]`);
+		if (next === selected.current) return;
+		selected.current?.setAttribute("aria-pressed", "false");
+		next?.setAttribute("aria-pressed", "true");
+		selected.current = next;
+	});
+	const handleClick = (event) => {
+		const target = event.target.closest("[data-cp-color]");
+		if (target === null) return;
+		const parsed = require_parse.parse(target.getAttribute("data-cp-color") ?? "");
+		if (parsed === null) return;
+		store.ingest(parsed);
+		store.commit();
+	};
+	const grid = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		ref: gridRef,
+		className: require_context.cx("cp-swatch-grid", variant === "spaced" && className),
+		style: { ["--cp-columns"]: columns },
+		"data-cp-variant": variant,
+		"data-cp-large": swatches.length > 1e3 ? "true" : void 0,
+		"aria-label": label,
+		onClick: handleClick,
+		children: swatches.map((swatch, index) => {
+			const key = require_parse.parse(swatch.color);
+			const match = key === null ? swatch.color : require_serialize.toHex(key);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: require_context.cx("cp-swatch", round && "cp-swatch-round", classNames.swatch),
+				style: { ["--cp-swatch-color"]: swatch.color },
+				"data-cp-color": match,
+				"aria-label": swatch.name ?? swatch.color,
+				"aria-pressed": false,
+				disabled
+			}) }, `${swatch.color}-${index}`);
+		})
+	});
+	if (variant === "mosaic") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_context.cx("cp-mosaic", className),
+		children: grid
+	});
+	return grid;
+}
+//#endregion
+exports.SwatchGrid = SwatchGrid;

package/dist/primitives/SwatchGrid.d.cts

@@ -0,0 +1,17 @@
+import * as React from "react";
+//#region src/primitives/SwatchGrid.d.ts
+export interface SwatchEntry {
+  color: string;
+  name?: string;
+}
+export type SwatchVariant = "mosaic" | "spaced";
+export interface SwatchGridProps {
+  swatches: SwatchEntry[];
+  columns?: number;
+  variant?: SwatchVariant;
+  round?: boolean;
+  label: string;
+  className?: string;
+}
+export declare function SwatchGrid(props: SwatchGridProps): React.ReactElement;
+//#endregion

package/dist/primitives/SwatchGrid.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+//#region src/primitives/SwatchGrid.d.ts
+export interface SwatchEntry {
+  color: string;
+  name?: string;
+}
+export type SwatchVariant = "mosaic" | "spaced";
+export interface SwatchGridProps {
+  swatches: SwatchEntry[];
+  columns?: number;
+  variant?: SwatchVariant;
+  round?: boolean;
+  label: string;
+  className?: string;
+}
+export declare function SwatchGrid(props: SwatchGridProps): React.ReactElement;
+//#endregion

package/dist/primitives/SwatchGrid.js

@@ -0,0 +1,62 @@
+"use client";
+import { cx, usePanel } from "../core/context.js";
+import { useTransientColor } from "../core/useColorStore.js";
+import { parse } from "../color/parse.js";
+import { toHex } from "../color/serialize.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/SwatchGrid.tsx
+function SwatchGrid(props) {
+	const { swatches, columns = 10, variant = "spaced", round = false, label, className } = props;
+	const { store, disabled, classNames } = usePanel();
+	const gridRef = React.useRef(null);
+	const selected = React.useRef(null);
+	useTransientColor(store, (c) => {
+		const grid = gridRef.current;
+		if (grid === null) return;
+		const hex = toHex(c);
+		const next = grid.querySelector(`[data-cp-color="${hex}"]`);
+		if (next === selected.current) return;
+		selected.current?.setAttribute("aria-pressed", "false");
+		next?.setAttribute("aria-pressed", "true");
+		selected.current = next;
+	});
+	const handleClick = (event) => {
+		const target = event.target.closest("[data-cp-color]");
+		if (target === null) return;
+		const parsed = parse(target.getAttribute("data-cp-color") ?? "");
+		if (parsed === null) return;
+		store.ingest(parsed);
+		store.commit();
+	};
+	const grid = /* @__PURE__ */ jsx("ul", {
+		ref: gridRef,
+		className: cx("cp-swatch-grid", variant === "spaced" && className),
+		style: { ["--cp-columns"]: columns },
+		"data-cp-variant": variant,
+		"data-cp-large": swatches.length > 1e3 ? "true" : void 0,
+		"aria-label": label,
+		onClick: handleClick,
+		children: swatches.map((swatch, index) => {
+			const key = parse(swatch.color);
+			const match = key === null ? swatch.color : toHex(key);
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cx("cp-swatch", round && "cp-swatch-round", classNames.swatch),
+				style: { ["--cp-swatch-color"]: swatch.color },
+				"data-cp-color": match,
+				"aria-label": swatch.name ?? swatch.color,
+				"aria-pressed": false,
+				disabled
+			}) }, `${swatch.color}-${index}`);
+		})
+	});
+	if (variant === "mosaic") return /* @__PURE__ */ jsx("div", {
+		className: cx("cp-mosaic", className),
+		children: grid
+	});
+	return grid;
+}
+//#endregion
+export { SwatchGrid };
+