solid-baseui 0.1.0-alpha.0

package/dist/lib/server/mergeStyleValue-Db8bRCM4.js

@@ -0,0 +1,67 @@
+import { $REFRESH } from "solid-js";
+//#region src/internals/itemEquality.ts
+/** Reference identity, the default used when no custom comparator is provided. */
+function defaultItemEquality(itemValue, selectedValue) {
+	return Object.is(itemValue, selectedValue);
+}
+/**
+* Nullish values always compare by identity so a custom comparator never has to guard against
+* `null` placeholders or an unselected value.
+*/
+function compareItemEquality(itemValue, selectedValue, comparer) {
+	if (itemValue == null || selectedValue == null) return Object.is(itemValue, selectedValue);
+	return comparer(itemValue, selectedValue);
+}
+function selectedValueIncludes(selectedValues, itemValue, comparer) {
+	if (!selectedValues || selectedValues.length === 0) return false;
+	return selectedValues.some((selectedValue) => selectedValue === void 0 ? false : compareItemEquality(itemValue, selectedValue, comparer));
+}
+function findItemIndex(itemValues, selectedValue, comparer) {
+	if (!itemValues || itemValues.length === 0) return -1;
+	return itemValues.findIndex((itemValue) => itemValue === void 0 ? false : compareItemEquality(itemValue, selectedValue, comparer));
+}
+/**
+* Resolves the index the popup anchors its highlight to. Only multiple selection unwraps the
+* array, because an array can itself be a valid single-selection value.
+*/
+function findSelectionIndex(itemValues, selectedValue, comparer, multiple) {
+	const index = findItemIndex(itemValues, multiple && Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue, comparer);
+	return index === -1 ? null : index;
+}
+function removeItem(selectedValues, itemValue, comparer) {
+	return selectedValues.filter((selectedValue) => !compareItemEquality(itemValue, selectedValue, comparer));
+}
+function areItemArraysEqual(first, second, comparer) {
+	return first.length === second.length && first.every((value, index) => compareItemEquality(value, second[index], comparer));
+}
+//#endregion
+//#region src/internals/isSolidAccessor.ts
+/**
+* Whether a function child is Solid's own children accessor rather than a caller's render
+* callback. Solid compiles dynamic JSX children into a bound reader, so a part that accepts
+* both `children` and a `(item) => …` render function has to tell the two apart.
+*/
+function isSolidAccessor(value) {
+	return typeof value === "function" && value.name === "bound read" && Object.prototype.hasOwnProperty.call(value, $REFRESH);
+}
+//#endregion
+//#region src/internals/mergeStyleValue.ts
+/**
+* Merges functional styles a part owns with the caller's `style` value, which wins.
+*
+* Unlike `mergeStyles` this accepts the resolved `StyleValue` shape, where a caller may pass a
+* CSS string; the internal object is serialized ahead of it so the string still overrides.
+*/
+function mergeStyleValue(internal, external) {
+	if (typeof external === "string") return `${serializeStyle(internal)}${external}`;
+	if (!external) return internal;
+	return {
+		...internal,
+		...external
+	};
+}
+function serializeStyle(style) {
+	return Object.entries(style).filter((entry) => entry[1] != null).map(([property, value]) => `${property}:${value};`).join("");
+}
+//#endregion
+export { defaultItemEquality as a, removeItem as c, compareItemEquality as i, selectedValueIncludes as l, isSolidAccessor as n, findItemIndex as o, areItemArraysEqual as r, findSelectionIndex as s, mergeStyleValue as t };

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

@@ -0,0 +1,217 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { mergeStyles } from "../internals/mergeStyles.js";
+import { Dynamic, escape, memo, mergeProps, ssr, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
+//#region src/meter/root/MeterRootContext.ts
+var MISSING_CONTEXT = Symbol("MeterRootContext");
+var MeterRootContext = createContext(MISSING_CONTEXT);
+function useMeterRootContext() {
+	const context = useContext(MeterRootContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: MeterRootContext is missing. Meter parts must be placed within <Meter.Root>.");
+	return context;
+}
+//#endregion
+//#region src/meter/root/MeterRoot.tsx
+var _tmpl$ = [
+	"<span",
+	" role=\"presentation\" style=\"",
+	"\">x</span>"
+];
+var visuallyHiddenStyle = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: 0,
+	padding: 0,
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: 0,
+	left: 0
+};
+/** Groups all meter parts and exposes the current value to assistive technology. */
+function MeterRoot(props) {
+	var _v$;
+	const rootProps = props;
+	const allProps = props;
+	const [labelId, setLabelId] = createSignal();
+	const others = omit(allProps, "as", "children", "class", "format", "getAriaValueText", "locale", "max", "min", "style", "value");
+	const min = createMemo(() => rootProps.min ?? 0);
+	const max = createMemo(() => rootProps.max ?? 100);
+	const percentageValue = createMemo(() => {
+		const percentage = (rootProps.value - min()) * 100 / (max() - min());
+		return clamp(Number.isNaN(percentage) ? 0 : percentage, 0, 100);
+	});
+	const clampedValue = createMemo(() => clamp(Number.isNaN(rootProps.value) ? min() : rootProps.value, min(), max()));
+	const formattedValue = createMemo(() => rootProps.format ? new Intl.NumberFormat(rootProps.locale, rootProps.format).format(clampedValue()) : new Intl.NumberFormat(rootProps.locale, { style: "percent" }).format(percentageValue() / 100));
+	const ariaValueText = createMemo(() => rootProps.getAriaValueText ? rootProps.getAriaValueText(formattedValue(), rootProps.value) : formattedValue());
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	return MeterRootContext({
+		value: {
+			formattedValue,
+			percentageValue,
+			setLabelId,
+			value: () => rootProps.value
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				get ["aria-labelledby"]() {
+					return labelId();
+				},
+				get ["aria-valuemax"]() {
+					return max();
+				},
+				get ["aria-valuemin"]() {
+					return min();
+				},
+				get ["aria-valuenow"]() {
+					return clampedValue();
+				},
+				get ["aria-valuetext"]() {
+					return ariaValueText();
+				},
+				role: "meter"
+			}, others, { get children() {
+				return [memo(() => {
+					return escape(allProps.children);
+				}), (_v$ = ssrHydrationKey(), ssr(_tmpl$, _v$, ssrStyle(visuallyHiddenStyle)))];
+			} }));
+		}
+	});
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+//#endregion
+//#region src/meter/track/MeterTrack.tsx
+/** Contains the indicator and represents the meter's complete range. */
+function MeterTrack(props) {
+	const others = omit(props, "as", "class", "style");
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, others));
+}
+//#endregion
+//#region src/meter/indicator/MeterIndicator.tsx
+/** Visualizes the current value's position within the meter range. */
+function MeterIndicator(props) {
+	const context = useMeterRootContext();
+	const others = omit(props, "as", "class", "style");
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const internalStyle = createMemo(() => ({
+		"inset-inline-start": "0",
+		height: "inherit",
+		width: `${context.percentageValue()}%`
+	}));
+	const styleValue = createMemo(() => {
+		const externalStyle = resolveStyle(props.style, state);
+		if (typeof externalStyle === "string") return `inset-inline-start:0;height:inherit;width:${context.percentageValue()}%;${externalStyle}`;
+		return mergeStyles(internalStyle(), externalStyle === false ? void 0 : externalStyle);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		}
+	}, others));
+}
+//#endregion
+//#region src/meter/value/MeterValue.tsx
+/** Displays the meter's formatted current value. */
+function MeterValue(props) {
+	const valueProps = props;
+	const context = useMeterRootContext();
+	const others = omit(props, "as", "children", "class", "style");
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	const content = createMemo(() => typeof valueProps.children === "function" ? valueProps.children(context.formattedValue(), context.value()) : context.formattedValue());
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "span";
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		"aria-hidden": "true"
+	}, others, { get children() {
+		return content();
+	} }));
+}
+//#endregion
+//#region src/meter/label/MeterLabel.tsx
+/** An accessible label that is automatically associated with the meter. */
+function MeterLabel(props) {
+	const context = useMeterRootContext();
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const others = omit(props, "as", "class", "id", "style");
+	const id = createMemo(() => props.id ?? generatedId);
+	const state = {};
+	const classValue = createMemo(() => resolveClass(props.class, state));
+	const styleValue = createMemo(() => resolveStyle(props.style, state));
+	createEffect(id, (currentId) => {
+		context.setLabelId(currentId);
+		return () => {
+			context.setLabelId((registeredId) => registeredId === currentId ? void 0 : registeredId);
+		};
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "span";
+		},
+		get id() {
+			return id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		role: "presentation"
+	}, others));
+}
+//#endregion
+//#region src/meter/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => MeterIndicator,
+	Label: () => MeterLabel,
+	Root: () => MeterRoot,
+	Track: () => MeterTrack,
+	Value: () => MeterValue
+});
+//#endregion
+export { index_parts_exports as Meter };