@webflare/ui 0.0.0-stage → 0.1.0

package/dist/components/Tab/index.d.ts

@@ -0,0 +1,97 @@
+import TabRoot from './TabRoot.vue';
+import TabItem from './TabItem.vue';
+export { TabRoot, TabItem };
+export type { TabItemData, TabChangePayload, TabRootCss, TabItemCss } from './types';
+declare const _default: {
+    Root: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+            modelValue?: string;
+            defaultValue?: string;
+            orientation?: "horizontal" | "vertical";
+            loop?: boolean;
+            items?: import("./types").TabItemData[];
+            css?: import("./types").TabRootCss;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            onChange?: ((payload: import("./types").TabChangePayload) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:modelValue": (value: string) => any;
+            change: (payload: import("./types").TabChangePayload) => any;
+        }, import("vue").PublicProps, {
+            orientation: "horizontal" | "vertical";
+            items: import("./types").TabItemData[];
+            loop: boolean;
+        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            modelValue?: string;
+            defaultValue?: string;
+            orientation?: "horizontal" | "vertical";
+            loop?: boolean;
+            items?: import("./types").TabItemData[];
+            css?: import("./types").TabRootCss;
+        }> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            onChange?: ((payload: import("./types").TabChangePayload) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            orientation: "horizontal" | "vertical";
+            items: import("./types").TabItemData[];
+            loop: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{
+        modelValue?: string;
+        defaultValue?: string;
+        orientation?: "horizontal" | "vertical";
+        loop?: boolean;
+        items?: import("./types").TabItemData[];
+        css?: import("./types").TabRootCss;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onChange?: ((payload: import("./types").TabChangePayload) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: string) => any;
+        change: (payload: import("./types").TabChangePayload) => any;
+    }, string, {
+        orientation: "horizontal" | "vertical";
+        items: import("./types").TabItemData[];
+        loop: boolean;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
+    Item: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types").TabItemData & {
+            css?: import("./types").TabItemCss;
+        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("./types").TabItemData & {
+            css?: import("./types").TabItemCss;
+        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("./types").TabItemData & {
+        css?: import("./types").TabItemCss;
+    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            icon?: (props: {}) => any;
+        } & {
+            default?: (props: {}) => any;
+        };
+    });
+};
+export default _default;

package/dist/components/Tab/styles.d.ts

@@ -0,0 +1 @@
+export declare const tabStyles: import("../../../styled-system/types").SvaRuntimeFn<"root" | "item" | "icon", import("../../../styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "icon">>;

package/dist/components/Tab/types.d.ts

@@ -0,0 +1,14 @@
+import type { CssMap } from '../../internal/css';
+export interface TabItemData {
+    value: string;
+    /** Tab label, rendered as HTML. */
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface TabChangePayload {
+    value: string;
+    direction: 'prev' | 'next';
+}
+export type TabRootCss = CssMap<'root'>;
+export type TabItemCss = CssMap<'root' | 'icon'>;

package/dist/composables/carousel.d.ts

@@ -0,0 +1,29 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export type CarouselScrollMode = 'item' | 'viewport';
+export interface CarouselOptions {
+    scrollMode: MaybeRefOrGetter<CarouselScrollMode>;
+}
+/**
+ * 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.
+ */
+export declare function useCarousel(options: CarouselOptions, carousel: Ref<HTMLElement | null>): {
+    handleNext: () => void;
+    handlePrev: () => void;
+    handleWheel: (event: WheelEvent) => void;
+    carouselItems: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
+    carouselItem: import("vue").ComputedRef<HTMLElement | null>;
+    currentCarouselItemIndex: Ref<number, number>;
+    visibleCarouselItems: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
+    scrollDirection: Ref<"prev" | "next" | null, "prev" | "next" | null>;
+    allItemsVisible: import("vue").ComputedRef<boolean>;
+    pages: import("vue").ComputedRef<number>;
+};

package/dist/composables/flyout.d.ts

@@ -0,0 +1,30 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export type FlyoutOpenReason = 'hover' | 'click';
+export interface FlyoutOptions {
+    /** Open while a mouse hovers the flyout. @default true */
+    openOnHover?: MaybeRefOrGetter<boolean>;
+    /** Delay before a hover-opened flyout closes after the pointer leaves, in ms. @default 150 */
+    closeDelay?: number;
+    /**
+     * Element to bind the hover listeners to. `FlyoutRoot` binds them itself;
+     * pass `el` only when you build your own flyout markup.
+     */
+    el?: Ref<HTMLElement | null | undefined>;
+}
+/**
+ * Open state for a hover-and-click flyout.
+ *
+ * - A mouse hover opens it; leaving closes it after `closeDelay`.
+ * - A click while it is hover-open pins it open instead of closing it.
+ * - A click while it is closed or pinned toggles it.
+ * Touch and pen input ignore hover and only use clicks.
+ */
+export declare function useFlyout(options?: FlyoutOptions): {
+    open: Readonly<Ref<boolean, boolean>>;
+    openedBy: Readonly<Ref<FlyoutOpenReason | null, FlyoutOpenReason | null>>;
+    setOpen: (value: boolean, reason?: FlyoutOpenReason) => void;
+    toggle: () => void;
+    pin: () => void;
+    onPointerEnter: (event: PointerEvent | MouseEvent) => void;
+    onPointerLeave: (event: PointerEvent | MouseEvent) => void;
+};

package/dist/composables/form.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeRefOrGetter } from 'vue';
+export type FormJson = Record<string, FormDataEntryValue>;
+/**
+ * Read a form's current values on demand.
+ *
+ * Accepts the element, a template ref, or a getter, so it can be called in
+ * `setup` before the form mounts. Each call reads the DOM at that moment;
+ * nothing is cached.
+ *
+ * @example
+ * const form = useTemplateRef<HTMLFormElement>('form')
+ * const { getJson } = useFormData(form)
+ * const onSubmit = () => send(getJson())
+ */
+export declare function useFormData(form: MaybeRefOrGetter<HTMLFormElement | null | undefined>): {
+    getFormData: () => FormData | null;
+    getJson: () => FormJson | null;
+};

package/dist/composables/injection-key.d.ts

@@ -0,0 +1,2 @@
+import type { InjectionKey } from 'vue';
+export declare function createInjectionKey<T>(name: string): InjectionKey<T>;

package/dist/context-Bk4uIMQS.js

@@ -0,0 +1,4 @@
+import { t as createInjectionKey } from "./injection-key-BQYV9vIr.js";
+// src/internal/controls/context.ts
+var fieldContextKey = createInjectionKey("fieldContext");
+export { fieldContextKey as t };

package/dist/context-cK3z69qT.cjs

@@ -0,0 +1,8 @@
+// src/internal/controls/context.ts
+var fieldContextKey = require("./injection-key-DPb_AXnh.cjs").createInjectionKey("fieldContext");
+Object.defineProperty(exports, "fieldContextKey", {
+	enumerable: true,
+	get: function() {
+		return fieldContextKey;
+	}
+});

package/dist/controlStyles-Bf6fx2rL.js

@@ -0,0 +1,92 @@
+import { cva } from "@webflare/ui/css";
+// src/internal/controls/controlStyles.ts
+/** Text-like field controls: input, textarea, and the select trigger. */
+var controlStyles = cva({
+	base: {
+		display: "flex",
+		alignItems: "center",
+		width: "100%",
+		minWidth: "200px",
+		backgroundColor: "surface",
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "border",
+		borderRadius: "lg",
+		outlineWidth: "3px",
+		outlineColor: "transparent",
+		outlineOffset: "0px",
+		outlineStyle: "solid",
+		fontWeight: "450",
+		fontFamily: "inherit",
+		lineHeight: "1.5",
+		color: "neutral",
+		transition: "all 300ms",
+		_placeholder: { color: "text.placeholder" },
+		_hover: { borderColor: "border.hover" },
+		_focus: {
+			outlineColor: "primary/50",
+			borderColor: "primary"
+		},
+		_disabled: {
+			opacity: "0.5",
+			cursor: "not-allowed"
+		}
+	},
+	variants: {
+		element: {
+			input: {},
+			textarea: {
+				alignItems: "flex-start",
+				resize: "vertical",
+				minHeight: "6rem"
+			},
+			select: {
+				justifyContent: "space-between",
+				gap: "md",
+				cursor: "pointer",
+				textAlign: "left",
+				_disabled: { cursor: "not-allowed" }
+			}
+		},
+		size: {
+			sm: {
+				paddingX: "md",
+				paddingY: "xs",
+				fontSize: "sm"
+			},
+			md: {
+				paddingX: "lg",
+				paddingY: "sm",
+				fontSize: "md"
+			},
+			lg: {
+				paddingX: "xl",
+				paddingY: "md",
+				fontSize: "lg"
+			}
+		},
+		valid: {
+			true: {
+				borderColor: "success.subtle !important",
+				_focus: {
+					borderColor: "success.subtle !important",
+					outlineColor: "success.subtle/50 !important"
+				}
+			},
+			false: {
+				borderColor: "danger.subtle !important",
+				_focus: {
+					borderColor: "danger.subtle !important",
+					outlineColor: "danger.subtle/50 !important"
+				}
+			},
+			none: {}
+		}
+	},
+	defaultVariants: {
+		element: "input",
+		size: "md",
+		valid: "none"
+	}
+});
+export { controlStyles as t };

package/dist/controlStyles-CClWH9EG.cjs

@@ -0,0 +1,96 @@
+// src/internal/controls/controlStyles.ts
+/** Text-like field controls: input, textarea, and the select trigger. */
+var controlStyles = (0, require("@webflare/ui/css").cva)({
+	base: {
+		display: "flex",
+		alignItems: "center",
+		width: "100%",
+		minWidth: "200px",
+		backgroundColor: "surface",
+		borderWidth: "1px",
+		borderStyle: "solid",
+		borderColor: "border",
+		borderRadius: "lg",
+		outlineWidth: "3px",
+		outlineColor: "transparent",
+		outlineOffset: "0px",
+		outlineStyle: "solid",
+		fontWeight: "450",
+		fontFamily: "inherit",
+		lineHeight: "1.5",
+		color: "neutral",
+		transition: "all 300ms",
+		_placeholder: { color: "text.placeholder" },
+		_hover: { borderColor: "border.hover" },
+		_focus: {
+			outlineColor: "primary/50",
+			borderColor: "primary"
+		},
+		_disabled: {
+			opacity: "0.5",
+			cursor: "not-allowed"
+		}
+	},
+	variants: {
+		element: {
+			input: {},
+			textarea: {
+				alignItems: "flex-start",
+				resize: "vertical",
+				minHeight: "6rem"
+			},
+			select: {
+				justifyContent: "space-between",
+				gap: "md",
+				cursor: "pointer",
+				textAlign: "left",
+				_disabled: { cursor: "not-allowed" }
+			}
+		},
+		size: {
+			sm: {
+				paddingX: "md",
+				paddingY: "xs",
+				fontSize: "sm"
+			},
+			md: {
+				paddingX: "lg",
+				paddingY: "sm",
+				fontSize: "md"
+			},
+			lg: {
+				paddingX: "xl",
+				paddingY: "md",
+				fontSize: "lg"
+			}
+		},
+		valid: {
+			true: {
+				borderColor: "success.subtle !important",
+				_focus: {
+					borderColor: "success.subtle !important",
+					outlineColor: "success.subtle/50 !important"
+				}
+			},
+			false: {
+				borderColor: "danger.subtle !important",
+				_focus: {
+					borderColor: "danger.subtle !important",
+					outlineColor: "danger.subtle/50 !important"
+				}
+			},
+			none: {}
+		}
+	},
+	defaultVariants: {
+		element: "input",
+		size: "md",
+		valid: "none"
+	}
+});
+Object.defineProperty(exports, "controlStyles", {
+	enumerable: true,
+	get: function() {
+		return controlStyles;
+	}
+});

package/dist/css-BRRSQx3P.cjs

@@ -0,0 +1,21 @@
+let styled_system_css = require("@webflare/ui/css");
+// src/internal/css.ts
+/**
+* Class for one slot: the component's style object merged with the consumer's
+* override.
+*
+* Component styles are atomic classes, so appending an override class would
+* leave both `bg_x` and `bg_y` on the element and let stylesheet order decide.
+* Merging the objects first gives one class per property, and the override wins.
+*
+* Pass `styles.raw(…)` (or a slot of it), not the class string from `styles(…)`.
+*/
+function withCss(style, override) {
+	return (0, styled_system_css.css)(style, override ?? void 0);
+}
+Object.defineProperty(exports, "withCss", {
+	enumerable: true,
+	get: function() {
+		return withCss;
+	}
+});

package/dist/css-DWYlz0rn.js

@@ -0,0 +1,16 @@
+import { css } from "@webflare/ui/css";
+// src/internal/css.ts
+/**
+* Class for one slot: the component's style object merged with the consumer's
+* override.
+*
+* Component styles are atomic classes, so appending an override class would
+* leave both `bg_x` and `bg_y` on the element and let stylesheet order decide.
+* Merging the objects first gives one class per property, and the override wins.
+*
+* Pass `styles.raw(…)` (or a slot of it), not the class string from `styles(…)`.
+*/
+function withCss(style, override) {
+	return css(style, override ?? void 0);
+}
+export { withCss as t };

package/dist/flyout-BaVoXePQ.cjs

@@ -0,0 +1,67 @@
+let vue = require("vue");
+// src/composables/flyout.ts
+/**
+* Open state for a hover-and-click flyout.
+*
+* - A mouse hover opens it; leaving closes it after `closeDelay`.
+* - A click while it is hover-open pins it open instead of closing it.
+* - A click while it is closed or pinned toggles it.
+* Touch and pen input ignore hover and only use clicks.
+*/
+function useFlyout(options = {}) {
+	const open = (0, vue.ref)(false);
+	const openedBy = (0, vue.ref)(null);
+	const closeDelay = options.closeDelay ?? 150;
+	let closeTimer;
+	const clearCloseTimer = () => {
+		if (closeTimer !== void 0) {
+			clearTimeout(closeTimer);
+			closeTimer = void 0;
+		}
+	};
+	const setOpen = (value, reason = "click") => {
+		clearCloseTimer();
+		open.value = value;
+		openedBy.value = value ? reason : null;
+	};
+	const toggle = () => setOpen(!open.value, "click");
+	/** Keep a hover-opened flyout open after the pointer leaves. */
+	const pin = () => {
+		if (open.value && openedBy.value === "hover") openedBy.value = "click";
+	};
+	const hoverEnabled = (event) => ((0, vue.toValue)(options.openOnHover) ?? true) && (!("pointerType" in event) || event.pointerType === "mouse");
+	const onPointerEnter = (event) => {
+		if (!hoverEnabled(event)) return;
+		clearCloseTimer();
+		if (!open.value) setOpen(true, "hover");
+	};
+	const onPointerLeave = (event) => {
+		if (!hoverEnabled(event) || openedBy.value !== "hover") return;
+		clearCloseTimer();
+		closeTimer = setTimeout(() => setOpen(false), closeDelay);
+	};
+	(0, vue.onMounted)(() => {
+		options.el?.value?.addEventListener("pointerenter", onPointerEnter);
+		options.el?.value?.addEventListener("pointerleave", onPointerLeave);
+	});
+	(0, vue.onUnmounted)(() => {
+		clearCloseTimer();
+		options.el?.value?.removeEventListener("pointerenter", onPointerEnter);
+		options.el?.value?.removeEventListener("pointerleave", onPointerLeave);
+	});
+	return {
+		open: (0, vue.readonly)(open),
+		openedBy: (0, vue.readonly)(openedBy),
+		setOpen,
+		toggle,
+		pin,
+		onPointerEnter,
+		onPointerLeave
+	};
+}
+Object.defineProperty(exports, "useFlyout", {
+	enumerable: true,
+	get: function() {
+		return useFlyout;
+	}
+});

package/dist/flyout-QHh1jKmV.js

@@ -0,0 +1,62 @@
+import { onMounted, onUnmounted, readonly, ref, toValue } from "vue";
+// src/composables/flyout.ts
+/**
+* Open state for a hover-and-click flyout.
+*
+* - A mouse hover opens it; leaving closes it after `closeDelay`.
+* - A click while it is hover-open pins it open instead of closing it.
+* - A click while it is closed or pinned toggles it.
+* Touch and pen input ignore hover and only use clicks.
+*/
+function useFlyout(options = {}) {
+	const open = ref(false);
+	const openedBy = ref(null);
+	const closeDelay = options.closeDelay ?? 150;
+	let closeTimer;
+	const clearCloseTimer = () => {
+		if (closeTimer !== void 0) {
+			clearTimeout(closeTimer);
+			closeTimer = void 0;
+		}
+	};
+	const setOpen = (value, reason = "click") => {
+		clearCloseTimer();
+		open.value = value;
+		openedBy.value = value ? reason : null;
+	};
+	const toggle = () => setOpen(!open.value, "click");
+	/** Keep a hover-opened flyout open after the pointer leaves. */
+	const pin = () => {
+		if (open.value && openedBy.value === "hover") openedBy.value = "click";
+	};
+	const hoverEnabled = (event) => (toValue(options.openOnHover) ?? true) && (!("pointerType" in event) || event.pointerType === "mouse");
+	const onPointerEnter = (event) => {
+		if (!hoverEnabled(event)) return;
+		clearCloseTimer();
+		if (!open.value) setOpen(true, "hover");
+	};
+	const onPointerLeave = (event) => {
+		if (!hoverEnabled(event) || openedBy.value !== "hover") return;
+		clearCloseTimer();
+		closeTimer = setTimeout(() => setOpen(false), closeDelay);
+	};
+	onMounted(() => {
+		options.el?.value?.addEventListener("pointerenter", onPointerEnter);
+		options.el?.value?.addEventListener("pointerleave", onPointerLeave);
+	});
+	onUnmounted(() => {
+		clearCloseTimer();
+		options.el?.value?.removeEventListener("pointerenter", onPointerEnter);
+		options.el?.value?.removeEventListener("pointerleave", onPointerLeave);
+	});
+	return {
+		open: readonly(open),
+		openedBy: readonly(openedBy),
+		setOpen,
+		toggle,
+		pin,
+		onPointerEnter,
+		onPointerLeave
+	};
+}
+export { useFlyout as t };

package/dist/form-BtxAsfYs.cjs

@@ -0,0 +1,34 @@
+let vue = require("vue");
+// src/composables/form.ts
+/**
+* Read a form's current values on demand.
+*
+* Accepts the element, a template ref, or a getter, so it can be called in
+* `setup` before the form mounts. Each call reads the DOM at that moment;
+* nothing is cached.
+*
+* @example
+* const form = useTemplateRef<HTMLFormElement>('form')
+* const { getJson } = useFormData(form)
+* const onSubmit = () => send(getJson())
+*/
+function useFormData(form) {
+	const getFormData = () => {
+		const element = (0, vue.toValue)(form);
+		return element ? new FormData(element) : null;
+	};
+	const getJson = () => {
+		const data = getFormData();
+		return data ? Object.fromEntries(data.entries()) : null;
+	};
+	return {
+		getFormData,
+		getJson
+	};
+}
+Object.defineProperty(exports, "useFormData", {
+	enumerable: true,
+	get: function() {
+		return useFormData;
+	}
+});

package/dist/form-CB12X8xv.js

@@ -0,0 +1,29 @@
+import { toValue } from "vue";
+// src/composables/form.ts
+/**
+* Read a form's current values on demand.
+*
+* Accepts the element, a template ref, or a getter, so it can be called in
+* `setup` before the form mounts. Each call reads the DOM at that moment;
+* nothing is cached.
+*
+* @example
+* const form = useTemplateRef<HTMLFormElement>('form')
+* const { getJson } = useFormData(form)
+* const onSubmit = () => send(getJson())
+*/
+function useFormData(form) {
+	const getFormData = () => {
+		const element = toValue(form);
+		return element ? new FormData(element) : null;
+	};
+	const getJson = () => {
+		const data = getFormData();
+		return data ? Object.fromEntries(data.entries()) : null;
+	};
+	return {
+		getFormData,
+		getJson
+	};
+}
+export { useFormData as t };