ropav 0.6.0 → 0.7.0

package/dist/components/typography/index.js

@@ -4,13 +4,4 @@ import heading_default from "./heading.js";
 import paragraph_default from "./paragraph.js";
 import prose_default from "./prose.js";
 import { typographyVariants } from "@ropav/styles";
-//#region src/components/typography/index.ts
-var Typography = Object.assign(typography_root_default, {
-	Code: code_default,
-	Heading: heading_default,
-	Paragraph: paragraph_default,
-	Prose: prose_default,
-	Root: typography_root_default
-});
-//#endregion
-export { code_default as Code, heading_default as Heading, paragraph_default as Paragraph, prose_default as Prose, Typography, typography_root_default as TypographyRoot, typographyVariants };
+export { code_default as Code, heading_default as Heading, paragraph_default as Paragraph, prose_default as Prose, typography_root_default as Typography, typographyVariants };

package/dist/components/typography/paragraph.js

@@ -24,8 +24,8 @@ var paragraph_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			type: () => type.value,
 			weight: () => props.weight
 		}, extend(() => {
-			return createSlot("default", null, null, 36);
-		}, { _: 8 }), true);
+			return createSlot("default", null, null, 4);
+		}, { _: 1 }), true);
 	}
 });
 //#endregion

package/dist/components/typography/typography-root.js

@@ -30,8 +30,8 @@ var typography_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			"data-slot": "typography",
 			"data-type": () => resolvedType.value
 		}, extend(() => {
-			return createSlot("default", null, null, 36);
-		}, { _: 8 }), 1);
+			return createSlot("default", null, null, 4);
+		}, { _: 1 }), 1);
 	}
 });
 //#endregion

package/dist/composables/use-calendar-grid.js

@@ -2,6 +2,7 @@ import { useLocale } from "./use-locale.js";
 import { useDateFormatter } from "./use-date-formatter.js";
 import { useLabels } from "./use-labels.js";
 import { isRangeCalendarState, useVisibleRangeDescription } from "./use-calendar.js";
+import "../utils/calendar.js";
 import { computed, toValue } from "vue";
 import { startOfWeek, today } from "@internationalized/date";
 //#region src/composables/use-calendar-grid.ts
@@ -84,7 +85,7 @@ var useCalendarGrid = (options, state, shared) => {
 	};
 	const dayFormatter = useDateFormatter(() => ({
 		timeZone: state.timeZone.value,
-		weekday: toValue(options.weekdayStyle) || "narrow"
+		weekday: toValue(options.weekdayStyle) || "short"
 	}));
 	const weekDays = computed(() => {
 		const duration = state.visibleDuration.value;

package/dist/composables/use-calendar-year-picker.js

@@ -4,6 +4,16 @@ import { computed, toValue } from "vue";
 import { isSameYear, toCalendarDate } from "@internationalized/date";
 //#region src/composables/use-calendar-year-picker.ts
 /**
+* A year is read off the calendar date in UTC, the one zone that never skips an hour or a day.
+*
+* A bare date has no zone of its own, so resolving one through the calendar's zone has to pick a
+* moment for it, and midnight is not always available: where a zone drops the end of December 31 —
+* or the whole day, as the ones that crossed the date line did — the moment slides forward into
+* January and the year comes back one too high. Reading and writing the date in the same
+* gapless zone keeps every label the year it was built from.
+*/
+var LABEL_TIME_ZONE = "UTC";
+/**
 * The list of years a calendar can jump to.
 *
 * Ported from react-aria's `packages/react-aria/src/calendar/useCalendarYearPicker.ts`
@@ -20,7 +30,7 @@ var useCalendarYearPicker = (options, state) => {
 		return {
 			calendar: focused.calendar.identifier,
 			era: format?.era || (focused.calendar.identifier === "gregory" && focused.era === "BC" ? "short" : void 0),
-			timeZone: state.timeZone.value,
+			timeZone: LABEL_TIME_ZONE,
 			year: format?.year || "numeric"
 		};
 	});
@@ -45,13 +55,12 @@ var useCalendarYearPicker = (options, state) => {
 	});
 	const items = computed(() => {
 		const { maxDate, minDate } = bounds.value;
-		const timeZone = state.timeZone.value;
 		const years = [];
 		let date = minDate;
 		while (date.compare(maxDate) <= 0) {
 			years.push({
 				date,
-				formatted: formatter.value.format(date.toDate(timeZone)),
+				formatted: formatter.value.format(date.toDate(LABEL_TIME_ZONE)),
 				id: years.length
 			});
 			date = date.add({ years: 1 });

package/dist/composables/use-color-slider.d.ts

@@ -63,7 +63,7 @@ export interface UseColorSliderReturn {
  * uses. Three things are particular to a colour and are the reason this exists at all:
  *
  * - **The group is the track.** Upstream merges `groupProps` into `trackProps`, so `role="group"`
- *   and the accessible name sit on `.color-slider__track` rather than on the root the way they do
+ *   and the accessible name sit on `.rp-color-slider__track` rather than on the root the way they do
  *   on a plain slider. Binding them on the root instead gives a slider two mislabelled elements
  *   and no visible sign of it.
  * - **The gradient is computed, not styled.** The track's `background` is generated from the

package/dist/composables/use-color-slider.js

@@ -22,7 +22,7 @@ var HUE_STOPS = [
 * uses. Three things are particular to a colour and are the reason this exists at all:
 *
 * - **The group is the track.** Upstream merges `groupProps` into `trackProps`, so `role="group"`
-*   and the accessible name sit on `.color-slider__track` rather than on the root the way they do
+*   and the accessible name sit on `.rp-color-slider__track` rather than on the root the way they do
 *   on a plain slider. Binding them on the root instead gives a slider two mislabelled elements
 *   and no visible sign of it.
 * - **The gradient is computed, not styled.** The track's `background` is generated from the

package/dist/composables/use-press.d.ts

@@ -77,6 +77,11 @@ export declare const isVirtualClick: (event: MouseEvent) => boolean;
  *
  * A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
  * such events the wrong coordinates and target, so they have to be left to the click handler.
+ *
+ * Android needs a shape of its own, and the zero-size test is turned off there rather than left
+ * to miss: TalkBack's double tap reports a one-by-one pointer claiming to be a mouse. Every part
+ * of that is load-bearing — pressure alone would catch real presses in Safari, which reports zero
+ * for those too, and the mouse claim is what separates the double tap from a touch screen press.
  */
 export declare const isVirtualPointerEvent: (event: PointerEvent) => boolean;
 /**
@@ -95,6 +100,11 @@ export declare const isVirtualPointerEvent: (event: PointerEvent) => boolean;
  * environments without `PointerEvent`; every browser this package targets has it, and so does
  * jsdom, so the fallback would be untested code.
  *
+ * Whether the pointer is still over the element is read from the element's own enter and leave,
+ * where React Aria hit-tests a global pointer move. The cheaper pair costs one thing: a touch
+ * dragged off its element keeps looking pressed until the release rules on it, rather than
+ * un-pressing under the finger on the way out.
+ *
  * @example
  * ```ts
  * const press = usePress({

package/dist/composables/use-press.js

@@ -1,4 +1,4 @@
-import { isMac } from "../utils/platform.js";
+import { isAndroid, isMac } from "../utils/platform.js";
 import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-press.ts
 /**
@@ -10,6 +10,7 @@ import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 */
 var isVirtualClick = (event) => {
 	if (event.pointerType === "" && event.isTrusted) return true;
+	if (isAndroid() && event.pointerType) return event.type === "click" && event.buttons === 1;
 	return event.detail === 0 && !event.pointerType;
 };
 /**
@@ -17,8 +18,25 @@ var isVirtualClick = (event) => {
 *
 * A screen reader activating an element reports a zero-sized pointer. Safari on iOS gives
 * such events the wrong coordinates and target, so they have to be left to the click handler.
+*
+* Android needs a shape of its own, and the zero-size test is turned off there rather than left
+* to miss: TalkBack's double tap reports a one-by-one pointer claiming to be a mouse. Every part
+* of that is load-bearing — pressure alone would catch real presses in Safari, which reports zero
+* for those too, and the mouse claim is what separates the double tap from a touch screen press.
+*/
+var isVirtualPointerEvent = (event) => !isAndroid() && event.width === 0 && event.height === 0 || isAndroid() && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse";
+/**
+* Whether an enter or a leave came from a pointer with no hover to report.
+*
+* A touch pointer is created where the finger lands and destroyed where it lifts, and the browser
+* reports each as an enter and a leave. Neither is the finger crossing the element's edge, and the
+* leave is the damaging one: it arrives immediately after the release, ahead of the click that
+* completes a touch press, so a press that acted on it would end itself before it could activate.
+*
+* Where the finger actually went is answered by the release instead — a press released outside its
+* target is abandoned there.
 */
-var isVirtualPointerEvent = (event) => event.width === 0 && event.height === 0;
+var cannotHover = (event) => event.pointerType === "touch";
 var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
 	"button",
 	"checkbox",
@@ -83,6 +101,11 @@ var contains = (root, target) => root instanceof Node && target instanceof Node
 * environments without `PointerEvent`; every browser this package targets has it, and so does
 * jsdom, so the fallback would be untested code.
 *
+* Whether the pointer is still over the element is read from the element's own enter and leave,
+* where React Aria hit-tests a global pointer move. The cheaper pair costs one thing: a touch
+* dragged off its element keeps looking pressed until the release rules on it, rather than
+* un-pressing under the finger on the way out.
+*
 * @example
 * ```ts
 * const press = usePress({
@@ -340,12 +363,14 @@ var usePress = (options = {}) => {
 				if (shouldStopPropagation) event.stopPropagation();
 			},
 			onPointerenter: (event) => {
+				if (cannotHover(event)) return;
 				if (event.pointerId === state.activePointerId && state.target && !state.isOverTarget && state.pointerType !== null) {
 					state.isOverTarget = true;
 					triggerPressStart({ target: state.target }, state.pointerType);
 				}
 			},
 			onPointerleave: (event) => {
+				if (cannotHover(event)) return;
 				if (event.pointerId === state.activePointerId && state.target && state.isOverTarget && state.pointerType !== null) {
 					state.isOverTarget = false;
 					triggerPressEnd({ target: state.target }, state.pointerType, false);

package/dist/composables/use-prevent-scroll.d.ts

@@ -6,15 +6,21 @@ export interface UsePreventScrollOptions {
  * Block page scrolling while a modal overlay is open, ported from React Aria's
  * `usePreventScroll`.
  *
- * An overlay is positioned once, against where its trigger was. Scrolling the page behind it
- * moves the trigger and leaves the overlay pointing at nothing, so a modal overlay stops the page
- * moving rather than trying to follow it.
+ * A modal overlay covers the page, and content nobody can reach should not move under the cover.
+ * An overlay is positioned once, in document coordinates, so a page that scrolled would carry the
+ * overlay along with its trigger — still aligned, but travelling out of view. Only a scroll inside
+ * some region between the two actually breaks the alignment, and that one closes the overlay
+ * rather than being blocked here.
  *
  * The count is module-level because the page has one scroll position: two overlays open at once
  * both want it held, and the second closing must not release it while the first is still open.
  *
- * React Aria carries a second implementation for Safari on iOS, which scrolls the page even with
- * `overflow: hidden`. That is not ported.
+ * React Aria carries a second implementation for Safari on iOS, built on holding the body in place
+ * and replaying the scroll position afterwards. It is deliberately not ported. The behaviour it
+ * works around belongs to an older WebKit — `overflow: hidden` on the root holds the page on
+ * current iOS — and the technique would cost more here than it gives: it makes the body the
+ * containing block, and every overlay is placed in document coordinates measured before the lock,
+ * so each one would be displaced by the scroll offset on the way open.
  *
  * @example
  * ```ts

package/dist/composables/use-prevent-scroll.js

@@ -25,15 +25,21 @@ var preventScroll = () => {
 * Block page scrolling while a modal overlay is open, ported from React Aria's
 * `usePreventScroll`.
 *
-* An overlay is positioned once, against where its trigger was. Scrolling the page behind it
-* moves the trigger and leaves the overlay pointing at nothing, so a modal overlay stops the page
-* moving rather than trying to follow it.
+* A modal overlay covers the page, and content nobody can reach should not move under the cover.
+* An overlay is positioned once, in document coordinates, so a page that scrolled would carry the
+* overlay along with its trigger — still aligned, but travelling out of view. Only a scroll inside
+* some region between the two actually breaks the alignment, and that one closes the overlay
+* rather than being blocked here.
 *
 * The count is module-level because the page has one scroll position: two overlays open at once
 * both want it held, and the second closing must not release it while the first is still open.
 *
-* React Aria carries a second implementation for Safari on iOS, which scrolls the page even with
-* `overflow: hidden`. That is not ported.
+* React Aria carries a second implementation for Safari on iOS, built on holding the body in place
+* and replaying the scroll position afterwards. It is deliberately not ported. The behaviour it
+* works around belongs to an older WebKit — `overflow: hidden` on the root holds the page on
+* current iOS — and the technique would cost more here than it gives: it makes the body the
+* containing block, and every overlay is placed in document coordinates measured before the lock,
+* so each one would be displaced by the scroll offset on the way open.
 *
 * @example
 * ```ts

package/dist/composables/use-range-calendar.js

@@ -1,3 +1,4 @@
+import { isVirtualPointerEvent } from "./use-press.js";
 import { useCalendar } from "./use-calendar.js";
 import { onScopeDispose, toValue, watch } from "vue";
 //#region src/composables/use-range-calendar.ts
@@ -32,7 +33,7 @@ var useRangeCalendar = (options, state) => {
 	};
 	let isVirtualClick = false;
 	const onWindowPointerdown = (event) => {
-		isVirtualClick = event.width === 0 && event.height === 0;
+		isVirtualClick = isVirtualPointerEvent(event);
 	};
 	const onWindowPointerup = (event) => {
 		if (isVirtualClick) {

package/dist/composables/use-text-field.js

@@ -35,7 +35,7 @@ var useTextField = (options = {}) => {
 	const registerElement = (next) => {
 		element.value = next;
 	};
-	const isTextArea = computed(() => element.value instanceof HTMLTextAreaElement);
+	const isTextArea = computed(() => typeof HTMLTextAreaElement !== "undefined" && element.value instanceof HTMLTextAreaElement);
 	const { setState, state: value } = useControllableState({
 		defaultValue: toValue(options.defaultValue) ?? "",
 		onValueChange: options.onChange,

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export * from "./components/index.js";
 export * from "./composables/index.js";
 export * from "./utils/index.js";
 export { ROPAV_VERSION } from "./version.js";
-export { tv, cn, type VariantProps } from "tailwind-variants";
+export type { VariantProps } from "@ropav/styles";