@webflare/ui 0.0.0-stage → 0.1.0

package/dist/TabRoot-DDDJe5FC.js

@@ -0,0 +1,72 @@
+import { n as tabStyles, t as TabItem_default } from "./TabItem-BTIrtLtp.js";
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, unref, watch, withCtx } from "vue";
+import { TabsList, TabsRoot } from "reka-ui";
+// src/components/Tab/TabRoot.vue
+var TabRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "TabRoot",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		orientation: { default: "horizontal" },
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		items: { default: () => [] },
+		css: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const internalValue = ref(props.modelValue ?? props.defaultValue ?? void 0);
+		watch(() => props.modelValue, (value) => {
+			internalValue.value = value;
+		});
+		const styles = tabStyles.raw();
+		const handleUpdate = (value) => {
+			const stringValue = String(value);
+			const oldValue = internalValue.value;
+			const oldIndex = props.items.findIndex((i) => i.value === oldValue);
+			const newIndex = props.items.findIndex((i) => i.value === stringValue);
+			const direction = oldIndex !== -1 && newIndex !== -1 && newIndex < oldIndex ? "prev" : "next";
+			internalValue.value = stringValue;
+			emit("update:modelValue", stringValue);
+			emit("change", {
+				value: stringValue,
+				direction
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TabsRoot), {
+				"model-value": internalValue.value,
+				orientation: __props.orientation,
+				"onUpdate:modelValue": handleUpdate
+			}, {
+				default: withCtx(() => [createVNode(unref(TabsList), {
+					class: normalizeClass(unref(withCss)(unref(styles).root, props.css?.root)),
+					loop: __props.loop
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+						return openBlock(), createBlock(TabItem_default, {
+							key: item.value,
+							value: item.value,
+							label: item.label,
+							icon: item.icon,
+							disabled: item.disabled
+						}, null, 8, [
+							"value",
+							"label",
+							"icon",
+							"disabled"
+						]);
+					}), 128)), renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, ["class", "loop"])]),
+				_: 3
+			}, 8, ["model-value", "orientation"]);
+		};
+	}
+});
+export { TabRoot_default as t };

package/dist/carousel-BrCOR927.cjs

@@ -0,0 +1,144 @@
+let vue = require("vue");
+// src/composables/carousel.ts
+/** Minimum time between two wheel-driven moves, so one gesture moves one step. */
+var WHEEL_COOLDOWN_MS = 400;
+/**
+* Carousel scrolling for `item` and `viewport` modes.
+*
+* Navigation uses the scroller's overflow geometry (`scrollTo` + item offsets),
+* not IntersectionObserver visibility. Observer callbacks only toggle the
+* `visible` class — a `threshold` of `1` never marked items visible when the
+* viewport was smaller than an item (issue #11).
+*
+* @param options Carousel options.
+* @param options.scrollMode `item` moves one item; `viewport` moves past the visible ones.
+* @param carousel The scroll container. Its direct children are the items.
+*/
+function useCarousel(options, carousel) {
+	const carouselItems = (0, vue.shallowRef)([]);
+	const currentCarouselItemIndex = (0, vue.ref)(0);
+	const visibleCarouselItems = (0, vue.shallowRef)([]);
+	const scrollDirection = (0, vue.ref)(null);
+	let observer = null;
+	let lastWheelAt = 0;
+	const carouselItem = (0, vue.computed)(() => carouselItems.value[currentCarouselItemIndex.value] ?? null);
+	const pages = (0, vue.computed)(() => {
+		const visibleCount = visibleCarouselItems.value.length;
+		if (visibleCount === 0) return 0;
+		return Math.ceil(carouselItems.value.length / visibleCount);
+	});
+	const allItemsVisible = (0, vue.computed)(() => {
+		const total = carouselItems.value.length;
+		return total > 0 && visibleCarouselItems.value.length === total;
+	});
+	(0, vue.watch)(carouselItem, (newItem, oldItem) => {
+		newItem?.classList.add("active");
+		if (oldItem && oldItem !== newItem) oldItem.classList.remove("active");
+	});
+	const isFullyVisible = (item, scroller) => {
+		const start = item.offsetLeft;
+		const end = start + item.offsetWidth;
+		const viewStart = scroller.scrollLeft;
+		const viewEnd = viewStart + scroller.clientWidth;
+		return start >= viewStart - 1 && end <= viewEnd + 1;
+	};
+	/** First item that still reaches into the viewport. */
+	const firstOverlappingIndex = (items, scroller) => {
+		const index = items.findIndex((item) => item.offsetLeft + item.offsetWidth > scroller.scrollLeft);
+		return index === -1 ? 0 : index;
+	};
+	const scrollToIndex = (index) => {
+		const item = carouselItems.value[index];
+		const scroller = carousel.value;
+		if (!item || !scroller) return;
+		scroller.scrollTo({
+			left: item.offsetLeft,
+			behavior: "smooth"
+		});
+		currentCarouselItemIndex.value = index;
+	};
+	const viewportTargetIndex = (direction) => {
+		const items = carouselItems.value;
+		const scroller = carousel.value;
+		if (!scroller || items.length === 0) return null;
+		const fullyVisible = items.filter((item) => isFullyVisible(item, scroller));
+		if (direction === "next") {
+			const lastFullyVisible = fullyVisible.at(-1);
+			const nextIndex = lastFullyVisible ? items.indexOf(lastFullyVisible) + 1 : firstOverlappingIndex(items, scroller) + 1;
+			return nextIndex < items.length ? nextIndex : null;
+		}
+		const firstFullyVisible = fullyVisible[0];
+		const prevIndex = firstFullyVisible ? items.indexOf(firstFullyVisible) - 1 : firstOverlappingIndex(items, scroller) - 1;
+		return prevIndex >= 0 ? prevIndex : null;
+	};
+	const move = (direction) => {
+		scrollDirection.value = direction;
+		if ((0, vue.toValue)(options.scrollMode) === "viewport") {
+			const index = viewportTargetIndex(direction);
+			if (index !== null) scrollToIndex(index);
+			return;
+		}
+		scrollToIndex(currentCarouselItemIndex.value + (direction === "next" ? 1 : -1));
+	};
+	const handleNext = () => move("next");
+	const handlePrev = () => move("prev");
+	/**
+	* Wheel navigation (opt-in on `CarouselRoot` with `wheel-navigation`).
+	* Follows the dominant axis and moves at most one step per gesture.
+	*/
+	const handleWheel = (event) => {
+		const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+		if (delta === 0) return;
+		event.preventDefault();
+		const now = Date.now();
+		if (now - lastWheelAt < WHEEL_COOLDOWN_MS) return;
+		lastWheelAt = now;
+		move(delta > 0 ? "next" : "prev");
+	};
+	(0, vue.onMounted)(() => {
+		carouselItems.value = Array.from(carousel.value?.querySelectorAll(":scope > *") ?? []);
+		if (typeof IntersectionObserver === "undefined") return;
+		observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				const target = entry.target;
+				if (entry.isIntersecting) {
+					target.dataset.carouselVisibility = "visible";
+					target.classList.add("visible");
+				} else {
+					delete target.dataset.carouselVisibility;
+					target.classList.remove("visible");
+				}
+			}
+			visibleCarouselItems.value = carouselItems.value.filter((item) => item.dataset.carouselVisibility === "visible");
+		}, {
+			root: carousel.value,
+			rootMargin: "0px",
+			threshold: .01
+		});
+		carouselItems.value.forEach((item) => observer?.observe(item));
+	});
+	(0, vue.onUnmounted)(() => {
+		observer?.disconnect();
+		observer = null;
+		carouselItems.value = [];
+		currentCarouselItemIndex.value = 0;
+	});
+	return {
+		handleNext,
+		handlePrev,
+		handleWheel,
+		carouselItems,
+		carouselItem,
+		currentCarouselItemIndex,
+		visibleCarouselItems,
+		scrollDirection,
+		allItemsVisible,
+		pages
+	};
+}
+Object.defineProperty(exports, "useCarousel", {
+	enumerable: true,
+	get: function() {
+		return useCarousel;
+	}
+});

package/dist/carousel-CBw9xA_6.js

@@ -0,0 +1,139 @@
+import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch } from "vue";
+// src/composables/carousel.ts
+/** Minimum time between two wheel-driven moves, so one gesture moves one step. */
+var WHEEL_COOLDOWN_MS = 400;
+/**
+* Carousel scrolling for `item` and `viewport` modes.
+*
+* Navigation uses the scroller's overflow geometry (`scrollTo` + item offsets),
+* not IntersectionObserver visibility. Observer callbacks only toggle the
+* `visible` class — a `threshold` of `1` never marked items visible when the
+* viewport was smaller than an item (issue #11).
+*
+* @param options Carousel options.
+* @param options.scrollMode `item` moves one item; `viewport` moves past the visible ones.
+* @param carousel The scroll container. Its direct children are the items.
+*/
+function useCarousel(options, carousel) {
+	const carouselItems = shallowRef([]);
+	const currentCarouselItemIndex = ref(0);
+	const visibleCarouselItems = shallowRef([]);
+	const scrollDirection = ref(null);
+	let observer = null;
+	let lastWheelAt = 0;
+	const carouselItem = computed(() => carouselItems.value[currentCarouselItemIndex.value] ?? null);
+	const pages = computed(() => {
+		const visibleCount = visibleCarouselItems.value.length;
+		if (visibleCount === 0) return 0;
+		return Math.ceil(carouselItems.value.length / visibleCount);
+	});
+	const allItemsVisible = computed(() => {
+		const total = carouselItems.value.length;
+		return total > 0 && visibleCarouselItems.value.length === total;
+	});
+	watch(carouselItem, (newItem, oldItem) => {
+		newItem?.classList.add("active");
+		if (oldItem && oldItem !== newItem) oldItem.classList.remove("active");
+	});
+	const isFullyVisible = (item, scroller) => {
+		const start = item.offsetLeft;
+		const end = start + item.offsetWidth;
+		const viewStart = scroller.scrollLeft;
+		const viewEnd = viewStart + scroller.clientWidth;
+		return start >= viewStart - 1 && end <= viewEnd + 1;
+	};
+	/** First item that still reaches into the viewport. */
+	const firstOverlappingIndex = (items, scroller) => {
+		const index = items.findIndex((item) => item.offsetLeft + item.offsetWidth > scroller.scrollLeft);
+		return index === -1 ? 0 : index;
+	};
+	const scrollToIndex = (index) => {
+		const item = carouselItems.value[index];
+		const scroller = carousel.value;
+		if (!item || !scroller) return;
+		scroller.scrollTo({
+			left: item.offsetLeft,
+			behavior: "smooth"
+		});
+		currentCarouselItemIndex.value = index;
+	};
+	const viewportTargetIndex = (direction) => {
+		const items = carouselItems.value;
+		const scroller = carousel.value;
+		if (!scroller || items.length === 0) return null;
+		const fullyVisible = items.filter((item) => isFullyVisible(item, scroller));
+		if (direction === "next") {
+			const lastFullyVisible = fullyVisible.at(-1);
+			const nextIndex = lastFullyVisible ? items.indexOf(lastFullyVisible) + 1 : firstOverlappingIndex(items, scroller) + 1;
+			return nextIndex < items.length ? nextIndex : null;
+		}
+		const firstFullyVisible = fullyVisible[0];
+		const prevIndex = firstFullyVisible ? items.indexOf(firstFullyVisible) - 1 : firstOverlappingIndex(items, scroller) - 1;
+		return prevIndex >= 0 ? prevIndex : null;
+	};
+	const move = (direction) => {
+		scrollDirection.value = direction;
+		if (toValue(options.scrollMode) === "viewport") {
+			const index = viewportTargetIndex(direction);
+			if (index !== null) scrollToIndex(index);
+			return;
+		}
+		scrollToIndex(currentCarouselItemIndex.value + (direction === "next" ? 1 : -1));
+	};
+	const handleNext = () => move("next");
+	const handlePrev = () => move("prev");
+	/**
+	* Wheel navigation (opt-in on `CarouselRoot` with `wheel-navigation`).
+	* Follows the dominant axis and moves at most one step per gesture.
+	*/
+	const handleWheel = (event) => {
+		const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+		if (delta === 0) return;
+		event.preventDefault();
+		const now = Date.now();
+		if (now - lastWheelAt < WHEEL_COOLDOWN_MS) return;
+		lastWheelAt = now;
+		move(delta > 0 ? "next" : "prev");
+	};
+	onMounted(() => {
+		carouselItems.value = Array.from(carousel.value?.querySelectorAll(":scope > *") ?? []);
+		if (typeof IntersectionObserver === "undefined") return;
+		observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				const target = entry.target;
+				if (entry.isIntersecting) {
+					target.dataset.carouselVisibility = "visible";
+					target.classList.add("visible");
+				} else {
+					delete target.dataset.carouselVisibility;
+					target.classList.remove("visible");
+				}
+			}
+			visibleCarouselItems.value = carouselItems.value.filter((item) => item.dataset.carouselVisibility === "visible");
+		}, {
+			root: carousel.value,
+			rootMargin: "0px",
+			threshold: .01
+		});
+		carouselItems.value.forEach((item) => observer?.observe(item));
+	});
+	onUnmounted(() => {
+		observer?.disconnect();
+		observer = null;
+		carouselItems.value = [];
+		currentCarouselItemIndex.value = 0;
+	});
+	return {
+		handleNext,
+		handlePrev,
+		handleWheel,
+		carouselItems,
+		carouselItem,
+		currentCarouselItemIndex,
+		visibleCarouselItems,
+		scrollDirection,
+		allItemsVisible,
+		pages
+	};
+}
+export { useCarousel as t };

package/dist/choiceStyles-DIVBtoZF.cjs

@@ -0,0 +1,175 @@
+let styled_system_css = require("@webflare/ui/css");
+// src/internal/controls/choiceStyles.ts
+/** Checkbox: label wrapper, box, check indicator, text. */
+var checkboxStyles = (0, styled_system_css.sva)({
+	slots: [
+		"root",
+		"control",
+		"indicator",
+		"label"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "sm",
+			cursor: "pointer",
+			userSelect: "none",
+			_disabled: {
+				cursor: "not-allowed",
+				opacity: "0.5"
+			}
+		},
+		control: {
+			"display": "inline-flex",
+			"alignItems": "center",
+			"justifyContent": "center",
+			"borderWidth": "1px",
+			"borderStyle": "solid",
+			"borderColor": "border",
+			"backgroundColor": "surface",
+			"transition": "all 200ms",
+			"flexShrink": "0",
+			"_enabled": { _hover: { borderColor: "border.hover" } },
+			"_invalid": { borderColor: "danger.subtle" },
+			"borderRadius": "sm",
+			"color": "neutral",
+			"&[data-state=\"checked\"]": {
+				backgroundColor: "primary",
+				borderColor: "primary",
+				color: "grey.800"
+			}
+		},
+		indicator: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "100%",
+			height: "100%"
+		},
+		label: {
+			fontWeight: "500",
+			color: "neutral",
+			lineHeight: "1.4"
+		}
+	},
+	variants: { size: {
+		sm: {
+			control: {
+				width: "1rem",
+				height: "1rem"
+			},
+			label: { fontSize: "sm" }
+		},
+		md: {
+			control: {
+				width: "1.125rem",
+				height: "1.125rem"
+			},
+			label: { fontSize: "md" }
+		},
+		lg: {
+			control: {
+				width: "1.375rem",
+				height: "1.375rem"
+			},
+			label: { fontSize: "lg" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Radio group: shares the box, label, and size scale with the checkbox. */
+var radioGroupStyles = (0, styled_system_css.sva)({
+	slots: [
+		"root",
+		"item",
+		"control",
+		"indicator",
+		"label"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "sm",
+			border: "none",
+			p: 0,
+			m: 0,
+			minWidth: "0"
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: "sm",
+			cursor: "pointer",
+			userSelect: "none",
+			_disabled: {
+				cursor: "not-allowed",
+				opacity: "0.5"
+			}
+		},
+		control: {
+			"display": "inline-flex",
+			"alignItems": "center",
+			"justifyContent": "center",
+			"borderWidth": "1px",
+			"borderStyle": "solid",
+			"borderColor": "border",
+			"backgroundColor": "surface",
+			"transition": "all 200ms",
+			"flexShrink": "0",
+			"_enabled": { _hover: { borderColor: "border.hover" } },
+			"_invalid": { borderColor: "danger.subtle" },
+			"&[data-state=\"checked\"]": { borderColor: "primary" },
+			"borderRadius": "full"
+		},
+		indicator: {
+			display: "block",
+			width: "55%",
+			height: "55%",
+			borderRadius: "full",
+			backgroundColor: "primary"
+		},
+		label: {
+			fontWeight: "500",
+			color: "neutral",
+			lineHeight: "1.4"
+		}
+	},
+	variants: { size: {
+		sm: {
+			control: {
+				width: "1rem",
+				height: "1rem"
+			},
+			label: { fontSize: "sm" }
+		},
+		md: {
+			control: {
+				width: "1.125rem",
+				height: "1.125rem"
+			},
+			label: { fontSize: "md" }
+		},
+		lg: {
+			control: {
+				width: "1.375rem",
+				height: "1.375rem"
+			},
+			label: { fontSize: "lg" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+Object.defineProperty(exports, "checkboxStyles", {
+	enumerable: true,
+	get: function() {
+		return checkboxStyles;
+	}
+});
+Object.defineProperty(exports, "radioGroupStyles", {
+	enumerable: true,
+	get: function() {
+		return radioGroupStyles;
+	}
+});

package/dist/choiceStyles-DRjL1Y2d.js

@@ -0,0 +1,164 @@
+import { sva } from "@webflare/ui/css";
+// src/internal/controls/choiceStyles.ts
+/** Checkbox: label wrapper, box, check indicator, text. */
+var checkboxStyles = sva({
+	slots: [
+		"root",
+		"control",
+		"indicator",
+		"label"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "sm",
+			cursor: "pointer",
+			userSelect: "none",
+			_disabled: {
+				cursor: "not-allowed",
+				opacity: "0.5"
+			}
+		},
+		control: {
+			"display": "inline-flex",
+			"alignItems": "center",
+			"justifyContent": "center",
+			"borderWidth": "1px",
+			"borderStyle": "solid",
+			"borderColor": "border",
+			"backgroundColor": "surface",
+			"transition": "all 200ms",
+			"flexShrink": "0",
+			"_enabled": { _hover: { borderColor: "border.hover" } },
+			"_invalid": { borderColor: "danger.subtle" },
+			"borderRadius": "sm",
+			"color": "neutral",
+			"&[data-state=\"checked\"]": {
+				backgroundColor: "primary",
+				borderColor: "primary",
+				color: "grey.800"
+			}
+		},
+		indicator: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "100%",
+			height: "100%"
+		},
+		label: {
+			fontWeight: "500",
+			color: "neutral",
+			lineHeight: "1.4"
+		}
+	},
+	variants: { size: {
+		sm: {
+			control: {
+				width: "1rem",
+				height: "1rem"
+			},
+			label: { fontSize: "sm" }
+		},
+		md: {
+			control: {
+				width: "1.125rem",
+				height: "1.125rem"
+			},
+			label: { fontSize: "md" }
+		},
+		lg: {
+			control: {
+				width: "1.375rem",
+				height: "1.375rem"
+			},
+			label: { fontSize: "lg" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Radio group: shares the box, label, and size scale with the checkbox. */
+var radioGroupStyles = sva({
+	slots: [
+		"root",
+		"item",
+		"control",
+		"indicator",
+		"label"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "sm",
+			border: "none",
+			p: 0,
+			m: 0,
+			minWidth: "0"
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: "sm",
+			cursor: "pointer",
+			userSelect: "none",
+			_disabled: {
+				cursor: "not-allowed",
+				opacity: "0.5"
+			}
+		},
+		control: {
+			"display": "inline-flex",
+			"alignItems": "center",
+			"justifyContent": "center",
+			"borderWidth": "1px",
+			"borderStyle": "solid",
+			"borderColor": "border",
+			"backgroundColor": "surface",
+			"transition": "all 200ms",
+			"flexShrink": "0",
+			"_enabled": { _hover: { borderColor: "border.hover" } },
+			"_invalid": { borderColor: "danger.subtle" },
+			"&[data-state=\"checked\"]": { borderColor: "primary" },
+			"borderRadius": "full"
+		},
+		indicator: {
+			display: "block",
+			width: "55%",
+			height: "55%",
+			borderRadius: "full",
+			backgroundColor: "primary"
+		},
+		label: {
+			fontWeight: "500",
+			color: "neutral",
+			lineHeight: "1.4"
+		}
+	},
+	variants: { size: {
+		sm: {
+			control: {
+				width: "1rem",
+				height: "1rem"
+			},
+			label: { fontSize: "sm" }
+		},
+		md: {
+			control: {
+				width: "1.125rem",
+				height: "1.125rem"
+			},
+			label: { fontSize: "md" }
+		},
+		lg: {
+			control: {
+				width: "1.375rem",
+				height: "1.375rem"
+			},
+			label: { fontSize: "lg" }
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+export { radioGroupStyles as n, checkboxStyles as t };