solid-baseui 0.1.0-alpha.0

package/dist/lib/server/autocomplete/index.js

@@ -0,0 +1,173 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import "../internals/reasons.js";
+import { A as getFilter, D as ComboboxTrigger, O as AriaCombobox, P as stringifyAsLabel, _ as ComboboxClear, a as ComboboxItem, c as ComboboxGroup, d as ComboboxPositioner, f as ComboboxBackdrop, g as ComboboxCollection, h as ComboboxList, i as ComboboxRow, k as useComboboxRootContext, l as ComboboxArrow, m as ComboboxStatus, n as ComboboxSeparator, p as ComboboxPortal, r as ComboboxEmpty, s as ComboboxGroupLabel, t as useFilteredItems, u as ComboboxPopup, v as ComboboxIcon, x as ComboboxInput, y as ComboboxInputGroup } from "../useFilteredItems-DvuctLt3.js";
+import { n as isSolidAccessor } from "../mergeStyleValue-Db8bRCM4.js";
+import { mergeProps } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, omit, untrack } from "solid-js";
+//#region src/autocomplete/root/AutocompleteRoot.tsx
+function AutocompleteRoot(props) {
+	const controlled = untrack(() => props.value !== void 0);
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(untrack(() => props.defaultValue ?? ""), { ownedWrite: true });
+	const [inlineValue, setInlineValue] = createSignal("", { ownedWrite: true });
+	let lastControlledValue = untrack(() => props.value);
+	let supersedesNextHighlight = false;
+	const mode = createMemo(() => props.mode ?? "list");
+	const enableInline = createMemo(() => mode() === "inline" || mode() === "both");
+	const staticItems = createMemo(() => mode() === "inline" || mode() === "none");
+	const typedValue = createMemo(() => controlled ? props.value ?? "" : uncontrolledValue());
+	const inputValue = createMemo(() => {
+		const inline = inlineValue();
+		return enableInline() && inline !== "" ? inline : typedValue();
+	});
+	const typedQuery = createMemo(() => String(typedValue()).trim());
+	const collator = createMemo(() => getFilter({ locale: props.locale }));
+	const baseFilter = createMemo(() => props.filter !== void 0 ? props.filter : collator().contains);
+	const filter = createMemo(() => {
+		if (mode() !== "both") return staticItems() ? null : baseFilter();
+		const match = baseFilter();
+		if (match === null) return null;
+		return (item, _query, itemToString) => match(item, typedQuery(), itemToString);
+	});
+	function handleInputValueChange(next, details) {
+		supersedesNextHighlight = false;
+		setInlineValue("");
+		if (!controlled) setUncontrolledValue(next);
+		props.onValueChange?.(next, details);
+	}
+	function handleItemHighlighted(highlightedValue, details) {
+		props.onItemHighlighted?.(highlightedValue, details);
+		if (details.reason === "pointer") return;
+		if (details.reason === "none" && supersedesNextHighlight) {
+			supersedesNextHighlight = false;
+			return;
+		}
+		supersedesNextHighlight = false;
+		setInlineValue(enableInline() && highlightedValue != null ? stringifyAsLabel(highlightedValue, props.itemToStringValue) : "");
+	}
+	const others = omit(props, "defaultValue", "filter", "itemToStringValue", "mode", "onItemHighlighted", "onValueChange", "openOnInputClick", "value");
+	const combobox = AriaCombobox(mergeProps({
+		selectionMode: "none",
+		fillInputOnItemPress: true,
+		get autoComplete() {
+			return mode();
+		},
+		get filter() {
+			return filter();
+		},
+		get inputValue() {
+			return inputValue();
+		},
+		get defaultInputValue() {
+			return props.defaultValue;
+		},
+		get itemToStringLabel() {
+			return props.itemToStringValue;
+		},
+		get openOnInputClick() {
+			return props.openOnInputClick ?? false;
+		},
+		onInputValueChange: handleInputValueChange,
+		onItemHighlighted: handleItemHighlighted
+	}, others));
+	createEffect(() => props.value, (next) => {
+		if (!controlled || next === lastControlledValue) return;
+		lastControlledValue = next;
+		setInlineValue("");
+		supersedesNextHighlight = true;
+	});
+	return combobox;
+}
+//#endregion
+//#region src/autocomplete/value/AutocompleteValue.tsx
+/**
+* The current value of the autocomplete.
+* Doesn't render its own HTML element.
+*/
+function AutocompleteValue(props) {
+	const context = useComboboxRootContext();
+	return createMemo(() => {
+		const child = props.children;
+		if (typeof child === "function") return isSolidAccessor(child) ? untrack(() => child()) : child(String(context.inputValue()));
+		if (child != null) return child;
+		return context.inputValue();
+	});
+}
+//#endregion
+//#region src/autocomplete/trigger/AutocompleteTrigger.tsx
+/**
+* A button that opens the popup.
+* Renders a `<button>` element.
+*/
+var AutocompleteTrigger = ComboboxTrigger;
+//#endregion
+//#region src/autocomplete/input-group/AutocompleteInputGroup.tsx
+/**
+* A wrapper for the input and its associated controls.
+* Renders a `<div>` element.
+*/
+var AutocompleteInputGroup = ComboboxInputGroup;
+//#endregion
+//#region src/autocomplete/item/AutocompleteItem.tsx
+/**
+* An individual item in the list.
+* Renders a `<div>` element.
+*/
+var AutocompleteItem = ComboboxItem;
+//#endregion
+//#region src/autocomplete/separator/AutocompleteSeparator.tsx
+/**
+* A visual separator between items or groups.
+* Renders a `<div>` element.
+*/
+var AutocompleteSeparator = ComboboxSeparator;
+//#endregion
+//#region src/autocomplete/root/utils/useFilter.ts
+/**
+* Matches items against a query using `Intl.Collator` for robust string matching.
+*
+* Options may be a plain object or an accessor; either way they are read at match time, so a
+* changing `locale` is picked up without recreating the filter.
+*/
+function useFilter(options = {}) {
+	const core = () => getFilter(typeof options === "function" ? options() : options);
+	return {
+		contains(item, query, itemToString) {
+			return core().contains(item, query, itemToString);
+		},
+		startsWith(item, query, itemToString) {
+			return core().startsWith(item, query, itemToString);
+		},
+		endsWith(item, query, itemToString) {
+			return core().endsWith(item, query, itemToString);
+		}
+	};
+}
+//#endregion
+//#region src/autocomplete/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => ComboboxArrow,
+	Backdrop: () => ComboboxBackdrop,
+	Clear: () => ComboboxClear,
+	Collection: () => ComboboxCollection,
+	Empty: () => ComboboxEmpty,
+	Group: () => ComboboxGroup,
+	GroupLabel: () => ComboboxGroupLabel,
+	Icon: () => ComboboxIcon,
+	Input: () => ComboboxInput,
+	InputGroup: () => AutocompleteInputGroup,
+	Item: () => AutocompleteItem,
+	List: () => ComboboxList,
+	Popup: () => ComboboxPopup,
+	Portal: () => ComboboxPortal,
+	Positioner: () => ComboboxPositioner,
+	Root: () => AutocompleteRoot,
+	Row: () => ComboboxRow,
+	Separator: () => AutocompleteSeparator,
+	Status: () => ComboboxStatus,
+	Trigger: () => AutocompleteTrigger,
+	Value: () => AutocompleteValue,
+	useFilter: () => useFilter,
+	useFilteredItems: () => useFilteredItems
+});
+//#endregion
+export { index_parts_exports as Autocomplete };

package/dist/lib/server/avatar/index.js

@@ -0,0 +1,199 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { t as runOnceAnimationsFinish } from "../runOnceAnimationsFinish-DCHzXWZU.js";
+import { t as createTransitionStatus } from "../createTransitionStatus-BTlrerSS.js";
+import { Dynamic, isServer, mergeProps, ssrElement } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, omit, onCleanup, untrack, useContext } from "solid-js";
+//#region src/avatar/root/AvatarRootContext.ts
+var MISSING_CONTEXT = Symbol("AvatarRootContext");
+var AvatarRootContext = createContext(MISSING_CONTEXT);
+function useAvatarRootContext() {
+	const context = useContext(AvatarRootContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>.");
+	return context;
+}
+//#endregion
+//#region src/avatar/root/AvatarRoot.tsx
+/** Displays a profile image, initials, or fallback content. */
+function AvatarRoot(props) {
+	const [imageLoadingStatus, setImageLoadingStatus] = createSignal("idle");
+	const others = omit(props, "as", "class", "style");
+	const state = createMemo(() => ({ imageLoadingStatus: imageLoadingStatus() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	return AvatarRootContext({
+		value: {
+			imageLoadingStatus,
+			setImageLoadingStatus
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "span";
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, others));
+		}
+	});
+}
+//#endregion
+//#region src/avatar/image/createImageLoadingStatus.ts
+function createImageLoadingStatus(options) {
+	const [status, setStatus] = createSignal("idle");
+	createEffect(options, (current) => {
+		if (isServer) return;
+		if (!current.src && !current.srcset) {
+			setStatus("error");
+			return;
+		}
+		let active = true;
+		const image = new window.Image();
+		const updateStatus = (nextStatus) => {
+			if (active) setStatus(nextStatus);
+		};
+		setStatus("loading");
+		image.onload = () => updateStatus("loaded");
+		image.onerror = () => updateStatus("error");
+		if (current.referrerpolicy) image.referrerPolicy = current.referrerpolicy;
+		image.crossOrigin = current.crossorigin ?? null;
+		if (current.sizes) image.sizes = current.sizes;
+		if (current.srcset) image.srcset = current.srcset;
+		if (current.src) image.src = current.src;
+		if (image.complete) setStatus(image.naturalWidth > 0 ? "loaded" : "error");
+		return () => {
+			active = false;
+			image.onload = null;
+			image.onerror = null;
+		};
+	});
+	return status;
+}
+//#endregion
+//#region src/avatar/image/AvatarImage.tsx
+/** The image displayed after its source has loaded successfully. */
+function AvatarImage(props) {
+	const context = useAvatarRootContext();
+	let imageElement;
+	let latestVisible = false;
+	let previousStatus = "idle";
+	const others = omit(props, "class", "style", "onLoadingStatusChange", "ref");
+	const imageLoadingStatus = createImageLoadingStatus(() => ({
+		src: typeof props.src === "string" ? props.src : void 0,
+		srcset: typeof props.srcset === "string" ? props.srcset : void 0,
+		sizes: typeof props.sizes === "string" ? props.sizes : void 0,
+		crossorigin: typeof props.crossorigin === "string" ? props.crossorigin : void 0,
+		referrerpolicy: typeof props.referrerpolicy === "string" ? props.referrerpolicy : void 0
+	}));
+	const visible = createMemo(() => imageLoadingStatus() === "loaded");
+	const transition = createTransitionStatus(() => visible());
+	const state = createMemo(() => ({
+		imageLoadingStatus: imageLoadingStatus(),
+		transitionStatus: transition.transitionStatus()
+	}));
+	const classValue = createMemo(() => transition.mounted() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => transition.mounted() ? resolveStyle(props.style, state()) : void 0);
+	createEffect(() => ({
+		status: imageLoadingStatus(),
+		onLoadingStatusChange: props.onLoadingStatusChange
+	}), (current) => {
+		if (current.status === previousStatus) return;
+		previousStatus = current.status;
+		if (current.status !== "idle") {
+			current.onLoadingStatusChange?.(current.status);
+			context.setImageLoadingStatus(current.status);
+		}
+	});
+	createEffect(() => ({
+		visible: visible(),
+		transitionStatus: transition.transitionStatus(),
+		element: imageElement
+	}), (current) => {
+		latestVisible = current.visible;
+		if (current.visible || current.transitionStatus !== "ending" || !current.element) return;
+		const abortController = new AbortController();
+		runOnceAnimationsFinish(current.element, () => {
+			if (!latestVisible) {
+				imageElement = void 0;
+				transition.setMounted(false);
+			}
+		}, abortController.signal);
+		return () => abortController.abort();
+	});
+	onCleanup(() => context.setImageLoadingStatus("idle"));
+	return Show({
+		get when() {
+			return transition.mounted();
+		},
+		get children() {
+			return ssrElement("img", () => {
+				return mergeProps({
+					alt: "",
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					},
+					get ["data-starting-style"]() {
+						return transition.transitionStatus() === "starting" ? "" : void 0;
+					},
+					get ["data-ending-style"]() {
+						return transition.transitionStatus() === "ending" ? "" : void 0;
+					}
+				}, others);
+			}, void 0, true);
+		}
+	});
+}
+//#endregion
+//#region src/avatar/fallback/AvatarFallback.tsx
+/** Content displayed while the image is unavailable. */
+function AvatarFallback(props) {
+	const context = useAvatarRootContext();
+	const delay = createMemo(() => props.delay ?? 0);
+	const [delayPassed, setDelayPassed] = createSignal(untrack(delay) === 0);
+	const others = omit(props, "class", "style", "delay");
+	const state = createMemo(() => ({ imageLoadingStatus: context.imageLoadingStatus() }));
+	const visible = createMemo(() => context.imageLoadingStatus() !== "loaded" && (delay() === 0 || delayPassed()));
+	const classValue = createMemo(() => visible() ? resolveClass(props.class, state()) : void 0);
+	const styleValue = createMemo(() => visible() ? resolveStyle(props.style, state()) : void 0);
+	createEffect(delay, (currentDelay) => {
+		if (currentDelay <= 0) {
+			setDelayPassed(true);
+			return;
+		}
+		const timeout = setTimeout(() => setDelayPassed(true), currentDelay);
+		return () => clearTimeout(timeout);
+	});
+	return Show({
+		get when() {
+			return visible();
+		},
+		get children() {
+			return ssrElement("span", () => {
+				return mergeProps({
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					}
+				}, others);
+			}, void 0, true);
+		}
+	});
+}
+//#endregion
+//#region src/avatar/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Fallback: () => AvatarFallback,
+	Image: () => AvatarImage,
+	Root: () => AvatarRoot
+});
+//#endregion
+export { index_parts_exports as Avatar };

package/dist/lib/server/button/index.js

@@ -0,0 +1,119 @@
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { Dynamic, mergeProps } from "@solidjs/web";
+import { createMemo, omit, onSettled, untrack } from "solid-js";
+//#region src/button/Button.tsx
+/**
+* A button that supports native semantics or accessible non-native roots.
+* Renders a `<button>` element by default.
+*/
+function Button(props) {
+	const eventProps = props;
+	const others = omit(props, "as", "class", "disabled", "focusableWhenDisabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "ref", "style");
+	const disabled = createMemo(() => props.disabled ?? false);
+	const focusableWhenDisabled = createMemo(() => props.focusableWhenDisabled ?? false);
+	const nativeButton = createMemo(() => props.nativeButton ?? true);
+	const state = createMemo(() => ({ disabled: disabled() }));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
+	const disabledAttribute = createMemo(() => nativeButton() && disabled() && !focusableWhenDisabled());
+	const ariaDisabled = createMemo(() => {
+		if (nativeButton()) return focusableWhenDisabled() ? disabled() ? "true" : "false" : void 0;
+		return disabled() ? "true" : void 0;
+	});
+	const tabIndex = createMemo(() => !nativeButton() && disabled() && !focusableWhenDisabled() ? -1 : 0);
+	const onClick = composeEventHandlers(() => untrack(() => props.disabled ?? false ? preventInteraction : void 0), () => eventProps.onClick);
+	const onMouseDown = composeEventHandlers(() => untrack(() => props.disabled ?? false ? stopInteraction : void 0), () => eventProps.onMouseDown);
+	const onPointerDown = composeEventHandlers(() => untrack(() => props.disabled ?? false ? preventInteraction : void 0), () => eventProps.onPointerDown);
+	const onKeyDown = composeEventHandlers(() => untrack(() => props.disabled ?? false ? props.focusableWhenDisabled ?? false ? preventFocusableDisabledKeyDown : stopInteraction : void 0), () => eventProps.onKeyDown, () => untrack(() => props.nativeButton ?? true ? void 0 : handleNonNativeKeyDown));
+	const onKeyUp = composeEventHandlers(() => untrack(() => props.disabled ?? false ? stopInteraction : void 0), () => eventProps.onKeyUp, () => untrack(() => props.nativeButton ?? true ? void 0 : handleNonNativeKeyUp));
+	onSettled(() => {});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((value) => value), eventProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return nativeButton() ? void 0 : "button";
+		},
+		get tabIndex() {
+			return tabIndex();
+		},
+		get disabled() {
+			return disabledAttribute();
+		},
+		get ["aria-disabled"]() {
+			return ariaDisabled();
+		},
+		onClick,
+		onMouseDown,
+		onPointerDown,
+		onKeyDown,
+		onKeyUp
+	}, stateAttributes, others));
+}
+function isValidLinkElement(element) {
+	return element.tagName === "A" && Boolean(element.href);
+}
+function preventInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function preventFocusableDisabledKeyDown(event) {
+	if (event.key !== "Tab") event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function handleNonNativeKeyDown(event) {
+	if (event.target !== event.currentTarget) return;
+	const currentTarget = event.currentTarget;
+	const isLink = isValidLinkElement(currentTarget);
+	const isEnterKey = event.key === "Enter";
+	const isSpaceKey = event.key === " ";
+	if (isLink || !isSpaceKey && !isEnterKey) {
+		if (isLink && isSpaceKey) event.preventDefault();
+		return;
+	}
+	if (event.defaultPrevented) return;
+	event.preventDefault();
+	if (isEnterKey) {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(currentTarget, event);
+	}
+}
+function handleNonNativeKeyUp(event) {
+	if (event.target === event.currentTarget && !event.defaultPrevented && event.key === " ") {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+}
+function dispatchClickWithModifiers(target, sourceEvent) {
+	const ownerWindow = target.ownerDocument.defaultView;
+	if (!ownerWindow) return;
+	const ClickEvent = ownerWindow.PointerEvent ?? ownerWindow.MouseEvent;
+	target.dispatchEvent(new ClickEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		detail: 0,
+		shiftKey: sourceEvent.shiftKey,
+		ctrlKey: sourceEvent.ctrlKey,
+		altKey: sourceEvent.altKey,
+		metaKey: sourceEvent.metaKey
+	}));
+}
+//#endregion
+export { Button };

package/dist/lib/server/buttonSemantics-BSwDxJhh.js

@@ -0,0 +1,49 @@
+//#region src/internals/buttonSemantics.ts
+function preventButtonInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopButtonInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function preventDisabledButtonKeyDown(event) {
+	if (event.key !== "Tab") event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function handleNonNativeButtonKeyDown(event) {
+	if (event.target !== event.currentTarget) return;
+	const isLink = event.currentTarget.tagName === "A" && Boolean(event.currentTarget.href);
+	if (isLink || event.key !== "Enter" && event.key !== " ") {
+		if (isLink && event.key === " ") event.preventDefault();
+		return;
+	}
+	if (event.defaultPrevented) return;
+	event.preventDefault();
+	if (event.key === "Enter") {
+		event.preventBaseUIHandler();
+		dispatchButtonClick(event.currentTarget, event);
+	}
+}
+function handleNonNativeButtonKeyUp(event) {
+	if (event.target === event.currentTarget && !event.defaultPrevented && event.key === " ") {
+		event.preventBaseUIHandler();
+		dispatchButtonClick(event.currentTarget, event);
+	}
+}
+function dispatchButtonClick(target, sourceEvent) {
+	const ownerWindow = target.ownerDocument.defaultView;
+	if (!ownerWindow) return;
+	const ClickEvent = ownerWindow.PointerEvent ?? ownerWindow.MouseEvent;
+	target.dispatchEvent(new ClickEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		detail: 0,
+		shiftKey: sourceEvent.shiftKey,
+		ctrlKey: sourceEvent.ctrlKey,
+		altKey: sourceEvent.altKey,
+		metaKey: sourceEvent.metaKey
+	}));
+}
+//#endregion
+export { stopButtonInteraction as a, preventDisabledButtonKeyDown as i, handleNonNativeButtonKeyUp as n, preventButtonInteraction as r, handleNonNativeButtonKeyDown as t };