ropav 0.5.0 → 0.7.0

package/dist/styles-no-preflight.css

@@ -0,0 +1,3 @@
+/* `styles.css` without Tailwind's preflight, for an app that already resets. */
+@import "@ropav/styles/no-preflight";
+@import "./styles-overrides.css";

package/dist/styles-overrides.css

@@ -0,0 +1,15 @@
+/**
+ * Rules layered on top of `@ropav/styles` rather than merged into it, so each one stays
+ * separately deletable once `packages/styles` folds it in.
+ */
+@layer components {
+  /**
+   * A vertical group stacks along the block axis, so its cross axis is the one that decides
+   * button width. `.rp-button` is `w-fit`, which would leave each button as wide as its own
+   * label and centred against the widest one - a ragged left and right edge. `min-width`
+   * squares them up without overriding the fixed width an icon-only button relies on.
+   */
+  .rp-button-group--vertical .rp-button {
+    @apply min-w-full;
+  }
+}

package/dist/styles.css

@@ -1,17 +1,2 @@
 @import "@ropav/styles";
-
-/**
- * Rules layered on top of `@ropav/styles` rather than merged into it, so each one stays
- * separately deletable once `packages/styles` folds it in.
- */
-@layer components {
-  /**
-   * A vertical group stacks along the block axis, so its cross axis is the one that decides
-   * button width. `.button` is `w-fit`, which would leave each button as wide as its own
-   * label and centred against the widest one - a ragged left and right edge. `min-width`
-   * squares them up without overriding the fixed width an icon-only button relies on.
-   */
-  .button-group--vertical .button {
-    @apply min-w-full;
-  }
-}
+@import "./styles-overrides.css";

package/dist/utils/calendar-systems.d.ts

@@ -0,0 +1,14 @@
+import { createCalendar } from "@internationalized/date";
+/**
+ * The factory that can build any calendar system, for an app serving a locale that uses one.
+ *
+ * The calendars, fields and pickers default to Gregorian instead. A factory that answers for any
+ * identifier has to carry the arithmetic for every system behind it, none of which a Gregorian
+ * locale ever reads, and nothing about a static default can be dropped by a build. Passing this
+ * back opts into the lot:
+ *
+ * ```vue
+ * <DatePicker :create-calendar="createCalendar" />
+ * ```
+ */
+export { createCalendar };

package/dist/utils/calendar-systems.js

@@ -0,0 +1,2 @@
+import { createCalendar } from "@internationalized/date";
+export { createCalendar };

package/dist/utils/calendar.d.ts

@@ -1,8 +1,11 @@
-import type { CalendarDate, DateDuration, DateValue } from "@internationalized/date";
+import type { Calendar, DateDuration, DateValue } from "@internationalized/date";
+import { CalendarDate } from "@internationalized/date";
 /** The day a week can be told to start on, spelled the way `@internationalized/date` spells it. */
 export type DayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
 /** How wide a weekday name is written. */
 export type WeekdayStyle = "narrow" | "short" | "long";
+/** How wide a weekday name is written when nothing asks for a width. */
+export declare const DEFAULT_WEEKDAY_STYLE: WeekdayStyle;
 /** Whether a date falls outside the allowed range. */
 export declare const isDateInvalid: (date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) => boolean;
 /**
@@ -30,12 +33,18 @@ export declare const previousAvailableDate: (date: CalendarDate, minValue: DateV
 /** Whether two visible durations span the same thing. */
 export declare const isEqualDuration: (a: DateDuration, b: DateDuration) => boolean;
 /**
- * How far a calendar system's year numbering sits from the Gregorian one.
+ * Default bounds spanning 1900 to 2099, expressed in `calendar`'s own year numbering.
  *
- * Used to turn the default 1900–2099 Gregorian bounds into the same span of real time in whatever
- * calendar the locale resolves to, so the year picker offers years the user recognises.
+ * Both ends are built Gregorian and converted rather than assembled from a year number, because a
+ * `CalendarDate` counts its year from the start of an era: Japanese 1900 is the 1900th year of
+ * Reiwa, two millennia out. A fixed offset per system cannot stand in for the conversion either,
+ * since an era can turn over inside the span — 1900 is Meiji, 2026 is Reiwa — and a year is not
+ * the same length in every calendar.
  */
-export declare const getGregorianYearOffset: (identifier: string) => number;
+export declare const getDefaultYearBounds: (calendar: Calendar) => {
+    maxValue: CalendarDate;
+    minValue: CalendarDate;
+};
 /**
  * Every year start from `start` to `end` inclusive.
  *

package/dist/utils/calendar.js

@@ -1,5 +1,7 @@
-import { isSameDay, maxDate, minDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
+import { CalendarDate, isSameDay, maxDate, minDate, startOfMonth, startOfWeek, startOfYear, toCalendar, toCalendarDate } from "@internationalized/date";
 //#region src/utils/calendar.ts
+/** How wide a weekday name is written when nothing asks for a width. */
+var DEFAULT_WEEKDAY_STYLE = "short";
 /** Whether a date falls outside the allowed range. */
 var isDateInvalid = (date, minValue, maxValue) => minValue != null && date.compare(minValue) < 0 || maxValue != null && date.compare(maxValue) > 0;
 /**
@@ -74,27 +76,22 @@ var previousAvailableDate = (date, minValue, isDateUnavailable) => {
 };
 /** Whether two visible durations span the same thing. */
 var isEqualDuration = (a, b) => a === b || a.days === b.days && a.weeks === b.weeks && a.months === b.months && a.years === b.years;
+/** The stretch of real time the default bounds cover, written as Gregorian years. */
+var DEFAULT_MIN_YEAR = 1900;
+var DEFAULT_MAX_YEAR = 2099;
 /**
-* How far a calendar system's year numbering sits from the Gregorian one.
+* Default bounds spanning 1900 to 2099, expressed in `calendar`'s own year numbering.
 *
-* Used to turn the default 1900–2099 Gregorian bounds into the same span of real time in whatever
-* calendar the locale resolves to, so the year picker offers years the user recognises.
+* Both ends are built Gregorian and converted rather than assembled from a year number, because a
+* `CalendarDate` counts its year from the start of an era: Japanese 1900 is the 1900th year of
+* Reiwa, two millennia out. A fixed offset per system cannot stand in for the conversion either,
+* since an era can turn over inside the span — 1900 is Meiji, 2026 is Reiwa — and a year is not
+* the same length in every calendar.
 */
-var getGregorianYearOffset = (identifier) => {
-	switch (identifier) {
-		case "buddhist": return 543;
-		case "ethiopic":
-		case "ethioaa": return -8;
-		case "coptic": return -284;
-		case "hebrew": return 3760;
-		case "indian": return -78;
-		case "islamic-civil":
-		case "islamic-tbla":
-		case "islamic-umalqura": return -579;
-		case "persian": return -600;
-		default: return 0;
-	}
-};
+var getDefaultYearBounds = (calendar) => ({
+	maxValue: toCalendar(new CalendarDate(DEFAULT_MAX_YEAR, 12, 31), calendar),
+	minValue: toCalendar(new CalendarDate(DEFAULT_MIN_YEAR, 1, 1), calendar)
+});
 /**
 * Every year start from `start` to `end` inclusive.
 *
@@ -112,7 +109,7 @@ var getYearRange = (start, end) => {
 	return years;
 };
 /** The weekday names above a day view, starting from the week `start` falls in. */
-var getDayViewWeekDayLabels = (start, locale, firstDayOfWeek, weekdayStyle = "short", timeZone = "UTC") => {
+var getDayViewWeekDayLabels = (start, locale, firstDayOfWeek, weekdayStyle = DEFAULT_WEEKDAY_STYLE, timeZone = "UTC") => {
 	const formatter = new Intl.DateTimeFormat(locale, {
 		timeZone,
 		weekday: weekdayStyle
@@ -162,4 +159,4 @@ var getDayViewGridRows = (start, end, locale, firstDayOfWeek) => {
 	return rows;
 };
 //#endregion
-export { alignCenter, alignEnd, alignStart, constrainStart, constrainValue, getDayViewGridRows, getDayViewWeekDayLabels, getGregorianYearOffset, getYearRange, isDateInvalid, isEqualDuration, previousAvailableDate };
+export { DEFAULT_WEEKDAY_STYLE, alignCenter, alignEnd, alignStart, constrainStart, constrainValue, getDayViewGridRows, getDayViewWeekDayLabels, getDefaultYearBounds, getYearRange, isDateInvalid, isEqualDuration, previousAvailableDate };

package/dist/utils/compose.d.ts

@@ -1,11 +1,9 @@
 /**
- * Resolve a `tv()` slot function into a class string, merging in a caller `class`.
+ * Resolve a `tv()` slot function into a class string, appending a caller `class`.
  *
- * Feeding the caller class through `tv()` is what lets it *override* conflicting
- * utilities, since `tailwind-variants` runs `tailwind-merge` over the result. Vue's
- * own attribute fallthrough would only concatenate, which does not override anything.
- *
- * `class` rather than `className`: `tv()` accepts either, and `class` is the Vue idiom.
+ * The slot function owns the slot's own classes, so a caller class goes through it rather
+ * than around it. Declaring `class` as a prop is what takes it out of Vue's attribute
+ * fallthrough in the first place, leaving each part to place it.
  *
  * @example
  * ```ts

package/dist/utils/compose.js

@@ -1,12 +1,10 @@
 //#region src/utils/compose.ts
 /**
-* Resolve a `tv()` slot function into a class string, merging in a caller `class`.
+* Resolve a `tv()` slot function into a class string, appending a caller `class`.
 *
-* Feeding the caller class through `tv()` is what lets it *override* conflicting
-* utilities, since `tailwind-variants` runs `tailwind-merge` over the result. Vue's
-* own attribute fallthrough would only concatenate, which does not override anything.
-*
-* `class` rather than `className`: `tv()` accepts either, and `class` is the Vue idiom.
+* The slot function owns the slot's own classes, so a caller class goes through it rather
+* than around it. Declaring `class` as a prop is what takes it out of Vue's attribute
+* fallthrough in the first place, leaving each part to place it.
 *
 * @example
 * ```ts

package/dist/utils/dnd-list-drop-target-delegate.d.ts

@@ -27,6 +27,8 @@ export declare class ListDropTargetDelegate implements DropTargetDelegate {
     private layout;
     private orientation;
     protected direction: "ltr" | "rtl";
+    /** The element found for each key, kept between calls and rechecked as each one is read. */
+    private elements;
     constructor(collection: DragCollection, element: ShallowRef<HTMLElement | null>, options?: ListDropTargetDelegateOptions);
     private getPrimaryStart;
     private getPrimaryEnd;
@@ -44,11 +46,27 @@ export declare class ListDropTargetDelegate implements DropTargetDelegate {
      */
     private resolveWithinItem;
     /**
-     * Map each item key to the element currently rendering it.
+     * Look up the element rendering a key, reusing what an earlier call found.
+     *
+     * The search above reads a handful of keys, but the map behind it is built from *every*
+     * element the container holds — for a table, every cell as well as every row. A drag asks for
+     * a target on each `dragover`, up to the display's refresh rate, so building that map per call
+     * costs more than the search it feeds.
+     *
+     * Keeping it means the DOM can move on without it, so every entry is rechecked as it is read,
+     * against the same conditions that put it there. A stale or missing one rebuilds the map —
+     * once per call, since a key the collection has and the DOM does not would otherwise rebuild
+     * it at every step of the search.
+     */
+    private createElementLookup;
+    /**
+     * Which elements carry a key.
      *
      * Scoped by `data-collection` when the container declares one, so a nested collection's rows
      * are not mistaken for this one's. Both attributes are already emitted by `ListBoxItem` and
      * `TableRow`.
      */
+    private getElementSelector;
+    /** Map each item key to the element currently rendering it. */
     private buildElementMap;
 }

package/dist/utils/dnd-list-drop-target-delegate.js

@@ -18,6 +18,8 @@ var ListDropTargetDelegate = class {
 	layout;
 	orientation;
 	direction;
+	/** The element found for each key, kept between calls and rechecked as each one is read. */
+	elements = /* @__PURE__ */ new Map();
 	constructor(collection, element, options = {}) {
 		this.collection = collection;
 		this.element = element;
@@ -57,14 +59,14 @@ var ListDropTargetDelegate = class {
 		const isPrimaryRTL = this.orientation === "horizontal" && this.direction === "rtl";
 		const isSecondaryRTL = this.layout === "grid" && this.orientation === "vertical" && this.direction === "rtl";
 		const isFlowRTL = this.layout === "stack" ? isPrimaryRTL : isSecondaryRTL;
-		const elementMap = this.buildElementMap(container);
+		const findElement = this.createElementLookup(container);
 		let low = 0;
 		let high = items.length;
 		while (low < high) {
 			const mid = Math.floor((low + high) / 2);
 			const key = items[mid];
 			if (key == null) break;
-			const element = elementMap.get(String(key));
+			const element = findElement(String(key));
 			if (!element) break;
 			const rect = element.getBoundingClientRect();
 			const update = (isGreater) => {
@@ -79,7 +81,7 @@ var ListDropTargetDelegate = class {
 		}
 		const key = items[Math.min(low, items.length - 1)];
 		if (key == null) return { type: "root" };
-		const rect = elementMap.get(String(key))?.getBoundingClientRect();
+		const rect = findElement(String(key))?.getBoundingClientRect();
 		return {
 			dropPosition: (rect != null && (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))) === isFlowRTL ? "after" : "before",
 			key,
@@ -136,15 +138,44 @@ var ListDropTargetDelegate = class {
 		return target;
 	}
 	/**
-	* Map each item key to the element currently rendering it.
+	* Look up the element rendering a key, reusing what an earlier call found.
+	*
+	* The search above reads a handful of keys, but the map behind it is built from *every*
+	* element the container holds — for a table, every cell as well as every row. A drag asks for
+	* a target on each `dragover`, up to the display's refresh rate, so building that map per call
+	* costs more than the search it feeds.
+	*
+	* Keeping it means the DOM can move on without it, so every entry is rechecked as it is read,
+	* against the same conditions that put it there. A stale or missing one rebuilds the map —
+	* once per call, since a key the collection has and the DOM does not would otherwise rebuild
+	* it at every step of the search.
+	*/
+	createElementLookup(container) {
+		const selector = this.getElementSelector(container);
+		let isRebuilt = false;
+		return (key) => {
+			const element = this.elements.get(key);
+			if (element?.dataset["key"] === key && element.matches(selector) && container.contains(element)) return element;
+			if (!isRebuilt) {
+				isRebuilt = true;
+				this.elements = this.buildElementMap(container, selector);
+			}
+			return this.elements.get(key);
+		};
+	}
+	/**
+	* Which elements carry a key.
 	*
 	* Scoped by `data-collection` when the container declares one, so a nested collection's rows
 	* are not mistaken for this one's. Both attributes are already emitted by `ListBoxItem` and
 	* `TableRow`.
 	*/
-	buildElementMap(container) {
+	getElementSelector(container) {
 		const collectionId = container.dataset["collection"];
-		const selector = collectionId ? `[data-collection="${CSS.escape(collectionId)}"]` : "[data-key]";
+		return collectionId ? `[data-collection="${CSS.escape(collectionId)}"]` : "[data-key]";
+	}
+	/** Map each item key to the element currently rendering it. */
+	buildElementMap(container, selector) {
 		const map = /* @__PURE__ */ new Map();
 		for (const element of container.querySelectorAll(selector)) if (element instanceof HTMLElement && element.dataset["key"] != null) map.set(element.dataset["key"], element);
 		return map;

package/dist/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from "./aria-hide-outside.js";
 export * from "./assertion.js";
 export * from "./block.js";
 export * from "./calendar.js";
+export * from "./calendar-systems.js";
 export * from "./color.js";
 export * from "./color-types.js";
 export * from "./compose.js";

package/dist/utils/virtualizer-list-layout.d.ts

@@ -67,6 +67,14 @@ export declare class ListLayout<Options extends ListLayoutOptions = ListLayoutOp
     protected snapVisibleRect(rect: Rect): Rect;
     /** Every layout info inside `rect`, snapped to whole rows, parents before children. */
     getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    /**
+     * The same, read off the rendered set as it stands rather than laying one out.
+     *
+     * Asking `getVisibleLayoutInfos` a question moves the window to whatever was asked about, so a
+     * caller with a rectangle narrower than the window — a drop resolving a point — would shrink
+     * the rendered set to the width of its own question and prune everything else away.
+     */
+    protected getRenderedLayoutInfos(rect: Rect): LayoutInfo[];
     update(context: InvalidationContext<Options>): void;
     shouldInvalidateLayoutOptions(newOptions: Options, oldOptions: Options): boolean;
     /**

package/dist/utils/virtualizer-list-layout.js

@@ -92,10 +92,20 @@ var ListLayout = class extends Layout {
 	getVisibleLayoutInfos(rect) {
 		const searchRect = this.snapVisibleRect(rect);
 		this.layoutFor(searchRect);
+		return this.getRenderedLayoutInfos(searchRect);
+	}
+	/**
+	* The same, read off the rendered set as it stands rather than laying one out.
+	*
+	* Asking `getVisibleLayoutInfos` a question moves the window to whatever was asked about, so a
+	* caller with a rectangle narrower than the window — a drop resolving a point — would shrink
+	* the rendered set to the width of its own question and prune everything else away.
+	*/
+	getRenderedLayoutInfos(rect) {
 		const result = [];
 		const addNodes = (nodes) => {
 			for (const node of nodes) {
-				if (!this.isVisible(node, searchRect)) continue;
+				if (!this.isVisible(node, rect)) continue;
 				result.push(node.layoutInfo);
 				addNodes(node.children);
 			}
@@ -393,7 +403,7 @@ var ListLayout = class extends Layout {
 		const searchRect = new Rect(pointX, Math.max(0, pointY - this.gap), 1, Math.max(1, this.gap * 2));
 		let key = null;
 		let minDistance = Infinity;
-		for (const candidate of this.getVisibleLayoutInfos(searchRect)) {
+		for (const candidate of this.getRenderedLayoutInfos(searchRect)) {
 			if (!this.isDropCandidate(candidate) || !candidate.rect.intersects(searchRect)) continue;
 			const distance = Math.min(Math.abs(candidate.rect.y - pointY), Math.abs(candidate.rect.maxY - pointY));
 			if (distance < minDistance) {

package/dist/utils/virtualizer-table-layout.d.ts

@@ -29,6 +29,7 @@ export declare class TableLayout<Options extends TableLayoutOptions = TableLayou
      * and nothing to clamp against.
      */
     getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    protected getRenderedLayoutInfos(): LayoutInfo[];
     private addVisibleLayoutInfos;
     protected getEstimatedRowHeight(): number;
     protected buildCollection(): LayoutNode[];

package/dist/utils/virtualizer-table-layout.js

@@ -62,6 +62,9 @@ var TableLayout = class extends ListLayout {
 	*/
 	getVisibleLayoutInfos(rect) {
 		this.layoutFor(this.snapVisibleRect(rect));
+		return this.getRenderedLayoutInfos();
+	}
+	getRenderedLayoutInfos() {
 		const result = [];
 		for (const node of this.rootNodes) {
 			result.push(node.layoutInfo);

package/dist/version.js

@@ -1,4 +1,4 @@
 //#region src/version.ts
-var ROPAV_VERSION = "0.5.0";
+var ROPAV_VERSION = "0.6.0";
 //#endregion
 export { ROPAV_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "🚀 Beautiful and modern Vue UI library built with Vapor Mode and Tailwind CSS 4.0.",
   "keywords": [
     "components",
@@ -41,6 +41,10 @@
       "style": "./dist/styles.css",
       "default": "./dist/styles.css"
     },
+    "./styles/no-preflight": {
+      "style": "./dist/styles-no-preflight.css",
+      "default": "./dist/styles-no-preflight.css"
+    },
     "./accordion": {
       "import": "./dist/components/accordion/index.js",
       "types": "./dist/components/accordion/index.d.ts"
@@ -165,6 +169,10 @@
       "import": "./dist/components/drawer/index.js",
       "types": "./dist/components/drawer/index.d.ts"
     },
+    "./drop-zone": {
+      "import": "./dist/components/drop-zone/index.js",
+      "types": "./dist/components/drop-zone/index.d.ts"
+    },
     "./dropdown": {
       "import": "./dist/components/dropdown/index.js",
       "types": "./dist/components/dropdown/index.d.ts"
@@ -402,14 +410,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@internationalized/date": "3.12.3",
-    "@internationalized/number": "3.6.7",
+    "@internationalized/date": "3.12.4",
+    "@internationalized/number": "3.6.8",
     "@internationalized/string": "3.2.10",
-    "tailwind-variants": "3.3.1",
-    "@ropav/styles": "0.5.0"
+    "@ropav/styles": "0.7.0"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0",
-    "vue": "^3.6.0-rc.6"
+    "vue": "^3.6.0-rc.7"
   }
 }