@ctrl-ui/react 0.8.6 → 0.8.7

package/dist/context.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { deriveContextModel } from "./context-model.js";
-import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";

package/dist/dynamic-notification.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
-import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
 import { createDynamicNotificationLiquid } from "./dynamic-notification-liquid.js";
+import { createDynamicNotificationGlass } from "./dynamic-notification-glass.js";
 import { useDynamicNotification } from "./hooks/use-dynamic-notification.js";
 import { createContext, useContext, useEffect, useId, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/environment-variables.js

@@ -3,8 +3,8 @@ import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, collectEnvironmentVariables, rowsToEnvFileText } from "./lib/env-file.js";
 import { useEnvironmentVariables } from "./hooks/use-environment-variables.js";
-import { Input } from "./ui/input.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./ui/input-group.js";
+import { Input } from "./ui/input.js";
 import { createContext, use, useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangleIcon, EyeIcon, EyeOffIcon, FileUpIcon, PlusIcon, RotateCcwIcon, SaveIcon, Trash2Icon } from "lucide-react";

package/dist/filter-bar/context.d.ts

@@ -0,0 +1,32 @@
+import { FilterBarDraft, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarScalar, FilterBarStage, FilterBarValue } from "./types.js";
+import { CSSProperties, KeyboardEvent } from "react";
+//#region src/filter-bar/context.d.ts
+export type FilterBarExit = {
+  item: FilterBarItem;
+  style: CSSProperties;
+};
+export type FilterBarContextValue = {
+  fields: readonly FilterBarField[];
+  operators: readonly FilterBarOperator[];
+  items: readonly FilterBarItem[];
+  draft: FilterBarDraft | null;
+  exits: FilterBarExit[];
+  disabled: boolean;
+  readOnly: boolean;
+  register: (key: string, element: HTMLElement | null) => void;
+  start: (owner: string, anchor: HTMLElement, stage?: FilterBarStage, item?: FilterBarItem, query?: string) => void;
+  close: (restoreFocus?: boolean) => void;
+  back: () => void;
+  setQuery: (query: string) => void;
+  selectField: (fieldId: string) => void;
+  selectOperator: (operatorId: string) => void;
+  selectValues: (values: FilterBarScalar[]) => void;
+  commit: (value: FilterBarValue) => void;
+  remove: (item: FilterBarItem) => void;
+  clear: () => void;
+  releaseExit: (id: string) => void;
+  navigate: (event: KeyboardEvent<HTMLElement>, itemId?: string, part?: string) => void;
+};
+export declare const FilterBarContext: import("react").Context<FilterBarContextValue | null>;
+export declare function useFilterBarContext(): FilterBarContextValue;
+//#endregion

package/dist/filter-bar/context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/filter-bar/context.tsx
+const FilterBarContext = createContext(null);
+function useFilterBarContext() {
+	const context = use(FilterBarContext);
+	if (!context) throw new Error("FilterBar parts must be used inside FilterBar.Root.");
+	return context;
+}
+//#endregion
+export { FilterBarContext, useFilterBarContext };

package/dist/filter-bar/editor.d.ts

@@ -0,0 +1,14 @@
+import { ComboboxInputProps } from "../ui/combobox.js";
+import { ReactNode, RefObject } from "react";
+//#region src/filter-bar/editor.d.ts
+export declare function FilterBarEditor({ owner, mode, anchorRef, children }: {
+  owner: string;
+  mode: "input" | "button";
+  anchorRef?: RefObject<HTMLInputElement | null>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FilterBarInlineInput({ owner, inputRef, className, ...props }: Omit<ComboboxInputProps, "ref"> & {
+  owner: string;
+  inputRef: RefObject<HTMLInputElement | null>;
+}): import("react").JSX.Element;
+//#endregion

package/dist/filter-bar/editor.js

@@ -0,0 +1,204 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { useFilterBarContext } from "./context.js";
+import { allowsCustomValue, fieldOperators, fieldOptions, parseCustomValue } from "./model.js";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox.js";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-bar/editor.tsx
+function valueChoice(value, label) {
+	return {
+		id: `${typeof value}:${value}`,
+		value,
+		label
+	};
+}
+function sameChoice(first, second) {
+	return first.id === second.id;
+}
+function valueChoices(field, query) {
+	const choices = fieldOptions(field).map((option) => ({
+		...valueChoice(option.value, option.label),
+		icon: option.icon,
+		disabled: option.disabled
+	}));
+	const customValue = allowsCustomValue(field) ? parseCustomValue(field, query) : void 0;
+	if (customValue !== void 0 && !choices.some((choice) => choice.value === customValue)) choices.push(valueChoice(customValue, `Use “${customValue}”`));
+	return choices;
+}
+function editorChoices(context, draft) {
+	if (!draft || draft.stage === "field") return context.fields.filter((candidate) => fieldOperators(candidate, context.operators).length > 0).map((candidate) => ({
+		id: candidate.id,
+		label: candidate.label,
+		icon: candidate.icon
+	}));
+	const field = context.fields.find((candidate) => candidate.id === draft.fieldId);
+	if (!field) return [];
+	if (draft.stage === "operator") return fieldOperators(field, context.operators).map((operator) => ({
+		id: operator.id,
+		label: operator.label
+	}));
+	return valueChoices(field, draft.query);
+}
+function searchLabel(stage, field) {
+	if (stage === "field") return "Filter field";
+	if (stage === "operator") return "Filter operator";
+	return `${field?.label ?? "Filter"} value`;
+}
+function handleSelection(context, draft, choice) {
+	if (!choice || !draft) return;
+	const field = context.fields.find((candidate) => candidate.id === draft.fieldId);
+	if (draft.stage === "value" && (field?.loading || field?.error)) return;
+	if (Array.isArray(choice)) context.selectValues(choice.flatMap((selected) => selected.value === void 0 ? [] : [selected.value]));
+	else if (draft.stage === "field") context.selectField(choice.id);
+	else if (draft.stage === "operator") context.selectOperator(choice.id);
+	else if (choice.value !== void 0) context.commit(choice.value);
+}
+function handleEditorKeyDown(context, draft, event) {
+	if (event.nativeEvent.isComposing) return false;
+	const backwards = event.key === "Escape" || event.key === "Backspace" && draft?.query === "";
+	if (draft && backwards) {
+		event.preventDefault();
+		event.stopPropagation();
+		context.back();
+		return true;
+	}
+	const operator = context.operators.find((candidate) => candidate.id === draft?.operatorId);
+	const field = context.fields.find((candidate) => candidate.id === draft?.fieldId);
+	if (!(draft?.stage === "value" && operator?.arity === "many" && event.key === "Enter" && (event.metaKey || event.ctrlKey)) || !draft || draft.values.length === 0 || field?.loading || field?.error) return false;
+	event.preventDefault();
+	context.commit(draft.values);
+	return true;
+}
+function EditorOptions({ field, invalidNumber }) {
+	if (field?.loading || field?.error) return /* @__PURE__ */ jsx("div", {
+		className: "p-3 text-caption",
+		role: field.error ? "alert" : "status",
+		children: field.error ?? "Loading values…"
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: invalidNumber ? "Enter a finite number." : "No matching options." }), /* @__PURE__ */ jsx(ComboboxList, { children: (choice) => /* @__PURE__ */ jsx(ComboboxItem, {
+		value: choice,
+		disabled: choice.disabled,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [choice.icon, /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: choice.label
+			})]
+		})
+	}, choice.id) })] });
+}
+function handleOpenChange(context, draft, anchorRef, owner, open, eventDetails) {
+	if (open && !draft && anchorRef?.current && eventDetails.reason !== "input-change") context.start(owner, anchorRef.current);
+	if (open || !draft) return;
+	if (eventDetails.reason === "item-press" || eventDetails.reason === "escape-key") eventDetails.cancel();
+	else context.close(false);
+}
+function editorView(context, draft) {
+	const field = context.fields.find((candidate) => candidate.id === draft?.fieldId);
+	const operator = context.operators.find((candidate) => candidate.id === draft?.operatorId);
+	const stage = draft?.stage ?? "field";
+	const many = stage === "value" && operator?.arity === "many";
+	const query = draft?.query ?? "";
+	const choices = editorChoices(context, draft);
+	const selected = (draft?.values ?? []).map((value) => choices.find((choice) => choice.value === value) ?? valueChoice(value, field?.formatValue?.(value) ?? String(value)));
+	const customNumber = field?.type === "number" && allowsCustomValue(field);
+	return {
+		field,
+		stage,
+		many,
+		query,
+		choices,
+		selected,
+		invalidNumber: stage === "value" && Boolean(customNumber) && query.trim() !== "" && field !== void 0 && parseCustomValue(field, query) === void 0,
+		remote: stage === "value" && field?.optionsMode === "remote",
+		unavailable: stage === "value" && Boolean(field?.loading || field?.error),
+		label: searchLabel(stage, field)
+	};
+}
+function FilterBarEditor({ owner, mode, anchorRef, children }) {
+	const context = useFilterBarContext();
+	const searchRef = useRef(null);
+	const draft = context.draft?.owner === owner ? context.draft : null;
+	const { field, stage, many, query, choices, selected, invalidNumber, remote, unavailable, label } = editorView(context, draft);
+	const canCommitMany = selected.length > 0 && !unavailable && !context.disabled && !context.readOnly;
+	return /* @__PURE__ */ jsxs(Combobox, {
+		items: choices,
+		multiple: many,
+		value: many ? selected : null,
+		inputValue: query,
+		open: draft !== null,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		modal: false,
+		isItemEqualToValue: sameChoice,
+		filter: remote ? null : void 0,
+		onValueChange: (choice) => handleSelection(context, draft, choice),
+		onInputValueChange: (nextQuery, eventDetails) => {
+			if (eventDetails.reason !== "input-change" && eventDetails.reason !== "input-clear") return;
+			if (draft) context.setQuery(nextQuery);
+			else if (anchorRef?.current) context.start(owner, anchorRef.current, "field", void 0, nextQuery);
+		},
+		onOpenChange: (open, eventDetails) => handleOpenChange(context, draft, anchorRef, owner, open, eventDetails),
+		children: [children, /* @__PURE__ */ jsxs(ComboboxContent, {
+			anchor: draft?.anchor,
+			initialFocus: mode === "input" ? false : searchRef,
+			finalFocus: false,
+			className: "w-72 max-h-(--available-height) overflow-y-auto",
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && !event.defaultPrevented) {
+					event.preventDefault();
+					context.back();
+				}
+			},
+			children: [
+				mode === "button" && /* @__PURE__ */ jsx("div", {
+					className: "p-2",
+					children: /* @__PURE__ */ jsx(ComboboxInput, {
+						ref: searchRef,
+						size: "sm",
+						"aria-label": label,
+						placeholder: label,
+						inputMode: field?.type === "number" && stage === "value" ? "decimal" : void 0,
+						onKeyDown: (event) => handleEditorKeyDown(context, draft, event)
+					})
+				}),
+				/* @__PURE__ */ jsx(EditorOptions, {
+					field: stage === "value" ? field : void 0,
+					invalidNumber
+				}),
+				many && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end p-2",
+					children: /* @__PURE__ */ jsx(Button, {
+						disabled: !canCommitMany,
+						onClick: () => context.commit(draft?.values ?? []),
+						children: "Done"
+					})
+				})
+			]
+		})]
+	});
+}
+function FilterBarInlineInput({ owner, inputRef, className, ...props }) {
+	const context = useFilterBarContext();
+	const draft = context.draft?.owner === owner ? context.draft : null;
+	function handleKeyDown(event) {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		if (handleEditorKeyDown(context, draft, event) || event.currentTarget.value !== "") return;
+		const last = context.items.at(-1);
+		if (event.key === "Backspace" && !draft && last) {
+			event.preventDefault();
+			context.remove(last);
+		} else context.navigate(event);
+	}
+	return /* @__PURE__ */ jsx(ComboboxInput, {
+		ref: inputRef,
+		size: "sm",
+		className,
+		...props,
+		onKeyDown: handleKeyDown
+	});
+}
+//#endregion
+export { FilterBarEditor, FilterBarInlineInput };

package/dist/filter-bar/model.d.ts

@@ -0,0 +1,9 @@
+import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar } from "./types.js";
+//#region src/filter-bar/model.d.ts
+export declare function fieldOperators(field: FilterBarField, operators: readonly FilterBarOperator[]): FilterBarOperator[];
+export declare function fieldOptions(field: FilterBarField): readonly FilterBarOption[];
+export declare function parseCustomValue(field: FilterBarField, query: string): FilterBarScalar | undefined;
+export declare function allowsCustomValue(field: FilterBarField): boolean;
+export declare function formatFilterValue(item: FilterBarItem, field: FilterBarField | undefined): string;
+export declare function filterNavigationKeys(items: readonly FilterBarItem[]): string[];
+//#endregion

package/dist/filter-bar/model.js

@@ -0,0 +1,48 @@
+//#region src/filter-bar/model.ts
+const booleanOptions = [{
+	value: true,
+	label: "True"
+}, {
+	value: false,
+	label: "False"
+}];
+function fieldOperators(field, operators) {
+	return operators.filter((operator) => !field.operators || field.operators.includes(operator.id));
+}
+function fieldOptions(field) {
+	return field.options ?? (field.type === "boolean" ? booleanOptions : []);
+}
+function parseCustomValue(field, query) {
+	if (!query.trim()) return void 0;
+	if (field.type === "number") {
+		if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(query.trim())) return void 0;
+		const number = Number(query);
+		return Number.isFinite(number) ? number : void 0;
+	}
+	if (field.type === "boolean") {
+		if (query.toLowerCase() === "true") return true;
+		if (query.toLowerCase() === "false") return false;
+		return;
+	}
+	return query.trim();
+}
+function allowsCustomValue(field) {
+	return field.allowCustomValue ?? (field.options === void 0 && field.type !== "boolean" && field.optionsMode !== "remote");
+}
+function formatFilterValue(item, field) {
+	if (item.value === null) return "";
+	return (Array.isArray(item.value) ? item.value : [item.value]).map((value) => field?.formatValue?.(value) ?? fieldOptionsForLabel(field, value)).join(", ");
+}
+function fieldOptionsForLabel(field, value) {
+	return (field ? fieldOptions(field).find((option) => option.value === value)?.label : void 0) ?? String(value);
+}
+function filterNavigationKeys(items) {
+	return items.flatMap((item) => [
+		"field",
+		"operator",
+		...item.value === null ? [] : ["value"],
+		"remove"
+	].map((segment) => `${item.id}:${segment}`));
+}
+//#endregion
+export { allowsCustomValue, fieldOperators, fieldOptions, filterNavigationKeys, formatFilterValue, parseCustomValue };

package/dist/filter-bar/motion.d.ts

@@ -0,0 +1,10 @@
+//#region src/filter-bar/motion.d.ts
+export declare function filterMotionEnabled(element: HTMLElement): boolean;
+export declare function useFilterBarMotion(): {
+  register(key: string, element: HTMLElement | null): void;
+  capture(): void;
+  cancel: () => void;
+  play(): void;
+  rootRef: import("react").RefObject<HTMLFieldSetElement | null>;
+};
+//#endregion

package/dist/filter-bar/motion.js

@@ -0,0 +1,84 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/filter-bar/motion.ts
+function filterMotionEnabled(element) {
+	return !window.matchMedia("(prefers-reduced-motion: reduce)").matches && Number.parseFloat(getComputedStyle(element).getPropertyValue("--duration-fast")) > 0;
+}
+function animateMovement(element, before, after, duration, easing) {
+	const x = before.left - after.left;
+	const y = before.top - after.top;
+	if (Math.abs(x) < 1 && Math.abs(y) < 1) return null;
+	return element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "translate(0, 0)" }], {
+		duration,
+		easing
+	});
+}
+function animateLayout(elements, before, after, animations, duration, easing) {
+	for (const [key, bounds] of after) {
+		const origin = before.get(key);
+		const element = elements.get(key);
+		if (!origin || !element) continue;
+		const animation = animateMovement(element, origin, bounds, duration, easing);
+		if (animation) animations.set(key, animation);
+	}
+}
+function useFilterBarMotion() {
+	const rootRef = useRef(null);
+	const [motion] = useState(() => {
+		const elements = /* @__PURE__ */ new Map();
+		const animations = /* @__PURE__ */ new Map();
+		let captured = null;
+		function measure() {
+			return new Map([...elements].map(([key, element]) => [key, element.getBoundingClientRect()]));
+		}
+		function cancel() {
+			for (const animation of animations.values()) animation.cancel();
+			animations.clear();
+		}
+		return {
+			register(key, element) {
+				if (element) elements.set(key, element);
+				else elements.delete(key);
+			},
+			capture() {
+				captured = measure();
+			},
+			cancel,
+			play() {
+				const root = rootRef.current;
+				if (!root || !filterMotionEnabled(root)) {
+					cancel();
+					captured = null;
+					return;
+				}
+				if (!captured) return;
+				const origin = captured;
+				captured = null;
+				cancel();
+				const next = measure();
+				const computed = getComputedStyle(root);
+				const duration = Number.parseFloat(computed.getPropertyValue("--duration-fast"));
+				const easing = computed.getPropertyValue("--ease-standard").trim();
+				animateLayout(elements, origin, next, animations, duration, easing);
+			}
+		};
+	});
+	useLayoutEffect(() => motion.play());
+	useLayoutEffect(() => {
+		const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+		function cancelReducedMotion() {
+			if (media.matches) motion.cancel();
+		}
+		media.addEventListener("change", cancelReducedMotion);
+		return () => {
+			media.removeEventListener("change", cancelReducedMotion);
+			motion.cancel();
+		};
+	}, [motion]);
+	return {
+		rootRef,
+		...motion
+	};
+}
+//#endregion
+export { filterMotionEnabled, useFilterBarMotion };

package/dist/filter-bar/parts.d.ts

@@ -0,0 +1,19 @@
+import { ButtonProps } from "../ui/button.js";
+import { FilterBarKnobStyle } from "../knob-contracts/filter-bar-knobs.js";
+import { FilterBarInlineInput } from "./editor.js";
+import { FilterBarItem } from "./types.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/filter-bar/parts.d.ts
+export type FilterBarChipProps = ComponentProps<"div"> & {
+  item: FilterBarItem;
+  readOnly?: boolean;
+  style?: CSSProperties & FilterBarKnobStyle;
+};
+export declare function FilterBarChip(props: FilterBarChipProps): import("react").JSX.Element;
+export declare function FilterBarChips({ renderChip }: {
+  renderChip?: (item: FilterBarItem) => ReactNode;
+}): import("react").JSX.Element;
+export declare function FilterBarAddButton({ className, children, onClick, onKeyDown, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function FilterBarInput({ className, ...props }: Omit<Parameters<typeof FilterBarInlineInput>[0], "owner" | "inputRef">): import("react").JSX.Element;
+export declare function FilterBarClear({ children, onClick, ...props }: ButtonProps): import("react").JSX.Element | null;
+//#endregion