@sprawlify/primitives 0.0.1

package/dist/machines/hover-card/index.cjs

@@ -0,0 +1,383 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+require('../../interact-outside-C8-oFBpB.cjs');
+const require_dismissable = require('../../dismissable-CTfKZ4OG.cjs');
+const require_popper = require('../../popper-D0FAW_p7.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/hover-card/hover-card.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/hover-card/hover-card.dom.ts
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `hover-card:${ctx.id}:trigger`;
+const getContentId = (ctx) => ctx.ids?.content ?? `hover-card:${ctx.id}:content`;
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `hover-card:${ctx.id}:popper`;
+const getArrowId = (ctx) => ctx.ids?.arrow ?? `hover-card:${ctx.id}:arrow`;
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+
+//#endregion
+//#region src/machines/hover-card/hover-card.connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, context, scope } = service;
+	const open = state.hasTag("open");
+	const popperStyles = require_popper.getPlacementStyles({
+		...prop("positioning"),
+		placement: context.get("currentPlacement")
+	});
+	return {
+		open,
+		setOpen(nextOpen) {
+			if (state.hasTag("open") === nextOpen) return;
+			if (prop("disabled")) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		reposition(options = {}) {
+			send({
+				type: "POSITIONING.SET",
+				options
+			});
+		},
+		getArrowProps() {
+			return normalize.element({
+				id: getArrowId(scope),
+				...parts.arrow.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrow
+			});
+		},
+		getArrowTipProps() {
+			return normalize.element({
+				...parts.arrowTip.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrowTip
+			});
+		},
+		getTriggerProps() {
+			return normalize.element({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				"data-placement": context.get("currentPlacement"),
+				id: getTriggerId(scope),
+				"data-state": open ? "open" : "closed",
+				onPointerEnter(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_ENTER",
+						src: "trigger"
+					});
+				},
+				onPointerLeave(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_LEAVE",
+						src: "trigger"
+					});
+				},
+				onFocus() {
+					if (prop("disabled")) return;
+					send({ type: "TRIGGER_FOCUS" });
+				},
+				onBlur() {
+					if (prop("disabled")) return;
+					send({ type: "TRIGGER_BLUR" });
+				}
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				id: getPositionerId(scope),
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				style: popperStyles.floating
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: getContentId(scope),
+				hidden: !open,
+				tabIndex: -1,
+				"data-state": open ? "open" : "closed",
+				"data-placement": context.get("currentPlacement"),
+				onPointerEnter(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_ENTER",
+						src: "content"
+					});
+				},
+				onPointerLeave(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_LEAVE",
+						src: "content"
+					});
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/hover-card/hover-card.machine.ts
+const { not, and } = require_core.createGuards();
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			disabled: false,
+			openDelay: 600,
+			closeDelay: 300,
+			...props$1,
+			positioning: {
+				placement: "bottom",
+				...props$1.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ prop, bindable }) {
+		return {
+			open: bindable(() => ({
+				defaultValue: prop("defaultOpen"),
+				value: prop("open"),
+				onChange(value) {
+					prop("onOpenChange")?.({ open: value });
+				}
+			})),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			isPointer: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	watch({ track, context, action, prop, send }) {
+		track([() => prop("disabled")], () => {
+			if (prop("disabled")) send({
+				type: "CLOSE",
+				src: "disabled.change"
+			});
+		});
+		track([() => context.get("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	states: {
+		closed: {
+			tags: ["closed"],
+			entry: ["clearIsPointer"],
+			on: {
+				"CONTROLLED.OPEN": { target: "open" },
+				POINTER_ENTER: {
+					target: "opening",
+					actions: ["setIsPointer"]
+				},
+				TRIGGER_FOCUS: { target: "opening" },
+				OPEN: { target: "opening" }
+			}
+		},
+		opening: {
+			tags: ["closed"],
+			effects: ["waitForOpenDelay"],
+			on: {
+				OPEN_DELAY: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}],
+				"CONTROLLED.OPEN": { target: "open" },
+				"CONTROLLED.CLOSE": { target: "closed" },
+				POINTER_LEAVE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				TRIGGER_BLUR: [{
+					guard: and("isOpenControlled", not("isPointer")),
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					guard: not("isPointer"),
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}]
+			}
+		},
+		open: {
+			tags: ["open"],
+			effects: ["trackDismissableElement", "trackPositioning"],
+			on: {
+				"CONTROLLED.CLOSE": { target: "closed" },
+				POINTER_ENTER: { actions: ["setIsPointer"] },
+				POINTER_LEAVE: { target: "closing" },
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				TRIGGER_BLUR: [{
+					guard: and("isOpenControlled", not("isPointer")),
+					actions: ["invokeOnClose"]
+				}, {
+					guard: not("isPointer"),
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"POSITIONING.SET": { actions: ["reposition"] }
+			}
+		},
+		closing: {
+			tags: ["open"],
+			effects: ["trackPositioning", "waitForCloseDelay"],
+			on: {
+				CLOSE_DELAY: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"CONTROLLED.CLOSE": { target: "closed" },
+				"CONTROLLED.OPEN": { target: "open" },
+				POINTER_ENTER: {
+					target: "open",
+					actions: ["setIsPointer"]
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			isPointer: ({ context }) => !!context.get("isPointer"),
+			isOpenControlled: ({ prop }) => prop("open") != null
+		},
+		effects: {
+			waitForOpenDelay({ send, prop }) {
+				const id = setTimeout(() => {
+					send({ type: "OPEN_DELAY" });
+				}, prop("openDelay"));
+				return () => clearTimeout(id);
+			},
+			waitForCloseDelay({ send, prop }) {
+				const id = setTimeout(() => {
+					send({ type: "CLOSE_DELAY" });
+				}, prop("closeDelay"));
+				return () => clearTimeout(id);
+			},
+			trackPositioning({ context, prop, scope }) {
+				if (!context.get("currentPlacement")) context.set("currentPlacement", prop("positioning").placement);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				return require_popper.getPlacement(getTriggerEl(scope), getPositionerEl$1, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			trackDismissableElement({ send, scope, prop }) {
+				const getContentEl$1 = () => getContentEl(scope);
+				return require_dismissable.trackDismissableElement(getContentEl$1, {
+					type: "popover",
+					defer: true,
+					exclude: [getTriggerEl(scope)],
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside"
+						});
+					},
+					onInteractOutside: prop("onInteractOutside"),
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onFocusOutside(event) {
+						event.preventDefault();
+						prop("onFocusOutside")?.(event);
+					}
+				});
+			}
+		},
+		actions: {
+			invokeOnClose({ prop }) {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnOpen({ prop }) {
+				prop("onOpenChange")?.({ open: true });
+			},
+			setIsPointer({ context }) {
+				context.set("isPointer", true);
+			},
+			clearIsPointer({ context }) {
+				context.set("isPointer", false);
+			},
+			reposition({ context, prop, scope, event }) {
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				require_popper.getPlacement(getTriggerEl(scope), getPositionerEl$1, {
+					...prop("positioning"),
+					...event.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			toggleVisibility({ prop, event, send }) {
+				queueMicrotask(() => {
+					send({
+						type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+						previousEvent: event
+					});
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/hover-card/hover-card.props.ts
+const props = require_create_props.createProps()([
+	"closeDelay",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"disabled",
+	"onOpenChange",
+	"defaultOpen",
+	"open",
+	"openDelay",
+	"positioning",
+	"onInteractOutside",
+	"onPointerDownOutside",
+	"onFocusOutside"
+]);
+const splitProps = require_utils.createSplitProps(props);
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/machines/hover-card/index.d.cts

@@ -0,0 +1,69 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C9-feK5c.cjs";
+import { c as Placement, d as PositioningOptions } from "../../types-DiIdKZ3K.cjs";
+
+//#region src/machines/hover-card/hover-card.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "arrow" | "positioner" | "arrowTip">;
+//#endregion
+//#region src/machines/hover-card/hover-card.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  trigger: string;
+  content: string;
+  positioner: string;
+  arrow: string;
+}>;
+interface HoverCardProps extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  openDelay?: number | undefined;
+  closeDelay?: number | undefined;
+  disabled?: boolean | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  positioning?: PositioningOptions | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "positioning";
+interface PrivateContext {
+  currentPlacement: Placement | undefined;
+  isPointer: boolean;
+  open: boolean;
+}
+interface HoverCardSchema {
+  props: RequiredBy<HoverCardProps, PropsWithDefault>;
+  context: PrivateContext;
+  state: "opening" | "open" | "closing" | "closed";
+  tag: "open" | "closed";
+  action: string;
+  event: EventObject;
+  guard: string;
+  effect: string;
+}
+type HoverCardService = Service<HoverCardSchema>;
+type HoverCardMachine = Machine<HoverCardSchema>;
+interface HoverCardApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  reposition: (options?: Partial<PositioningOptions>) => void;
+  getArrowProps: () => T["element"];
+  getArrowTipProps: () => T["element"];
+  getTriggerProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/hover-card/hover-card.connect.d.ts
+declare function connect<T extends PropTypes>(service: HoverCardService, normalize: NormalizeProps<T>): HoverCardApi<T>;
+//#endregion
+//#region src/machines/hover-card/hover-card.machine.d.ts
+declare const machine: Machine<HoverCardSchema>;
+//#endregion
+//#region src/machines/hover-card/hover-card.props.d.ts
+declare const props: (keyof HoverCardProps)[];
+declare const splitProps: <Props extends Partial<HoverCardProps>>(props: Props) => [Partial<HoverCardProps>, Omit<Props, keyof HoverCardProps>];
+//#endregion
+export { type HoverCardApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type HoverCardMachine as Machine, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type HoverCardProps as Props, type HoverCardService as Service, anatomy, connect, machine, props, splitProps };

package/dist/machines/hover-card/index.d.mts

@@ -0,0 +1,69 @@
+import { n as AnatomyInstance } from "../../create-anatomy-B3XYc-qG.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-BkzYij2j.mjs";
+import { p as PositioningOptions, u as Placement } from "../../index-D96rs8B0.mjs";
+
+//#region src/machines/hover-card/hover-card.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "arrow" | "positioner" | "arrowTip">;
+//#endregion
+//#region src/machines/hover-card/hover-card.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  trigger: string;
+  content: string;
+  positioner: string;
+  arrow: string;
+}>;
+interface HoverCardProps extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  openDelay?: number | undefined;
+  closeDelay?: number | undefined;
+  disabled?: boolean | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  positioning?: PositioningOptions | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "positioning";
+interface PrivateContext {
+  currentPlacement: Placement | undefined;
+  isPointer: boolean;
+  open: boolean;
+}
+interface HoverCardSchema {
+  props: RequiredBy<HoverCardProps, PropsWithDefault>;
+  context: PrivateContext;
+  state: "opening" | "open" | "closing" | "closed";
+  tag: "open" | "closed";
+  action: string;
+  event: EventObject;
+  guard: string;
+  effect: string;
+}
+type HoverCardService = Service<HoverCardSchema>;
+type HoverCardMachine = Machine<HoverCardSchema>;
+interface HoverCardApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  reposition: (options?: Partial<PositioningOptions>) => void;
+  getArrowProps: () => T["element"];
+  getArrowTipProps: () => T["element"];
+  getTriggerProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/hover-card/hover-card.connect.d.ts
+declare function connect<T extends PropTypes>(service: HoverCardService, normalize: NormalizeProps<T>): HoverCardApi<T>;
+//#endregion
+//#region src/machines/hover-card/hover-card.machine.d.ts
+declare const machine: Machine<HoverCardSchema>;
+//#endregion
+//#region src/machines/hover-card/hover-card.props.d.ts
+declare const props: (keyof HoverCardProps)[];
+declare const splitProps: <Props extends Partial<HoverCardProps>>(props: Props) => [Partial<HoverCardProps>, Omit<Props, keyof HoverCardProps>];
+//#endregion
+export { type HoverCardApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type HoverCardMachine as Machine, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type HoverCardProps as Props, type HoverCardService as Service, anatomy, connect, machine, props, splitProps };