@tarsis/toolkit 0.6.6 → 0.7.1

package/dist/SelectBase-DPcXvMTa.js

@@ -0,0 +1,399 @@
+import { n as useMergeRefs$1 } from "./useMergeRefs-BM2-gSLn.js";
+import { useControllableState, useFormField } from "./hooks.js";
+import cn from "clsx";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, safePolygon, shift, size, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useListNavigation, useRole } from "@floating-ui/react";
+import { createPortal } from "react-dom";
+//#region src/components/primitives/VisuallyHidden/VisuallyHidden.tsx
+var hiddenStyles = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	borderWidth: 0
+};
+var VisuallyHidden = ({ children, style, ...props }) => /* @__PURE__ */ jsx("span", {
+	style: {
+		...hiddenStyles,
+		...style
+	},
+	...props,
+	children
+});
+//#endregion
+//#region src/components/primitives/Portal/Portal.tsx
+var Portal = ({ children, container }) => {
+	const mountNode = useMemo(() => typeof document !== "undefined" ? container ?? document.body : null, [container]);
+	if (!mountNode) return null;
+	return createPortal(children, mountNode);
+};
+var FormField_module_default = {
+	root: "_root_1m3zs_1",
+	label: "_label_1m3zs_8",
+	error: "_error_1m3zs_15",
+	hint: "_hint_1m3zs_22"
+};
+//#endregion
+//#region src/components/primitives/FormField/FormFieldContext.ts
+var FormFieldContext = createContext(null);
+function useFormFieldContext() {
+	const ctx = useContext(FormFieldContext);
+	if (!ctx) throw new Error("FormField compound components must be used within <FormField>");
+	return ctx;
+}
+//#endregion
+//#region src/components/primitives/FormField/FormField.tsx
+var FormFieldRoot = ({ children, className, style, id, hasError = false, hasHint = false }) => {
+	const field = useFormField({
+		id,
+		hasError,
+		hasHint
+	});
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: field,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(FormField_module_default.root, className),
+			style,
+			"data-has-error": hasError ? "" : void 0,
+			children
+		})
+	});
+};
+var FormFieldLabel = ({ children, className }) => {
+	const { labelProps } = useFormFieldContext();
+	return /* @__PURE__ */ jsx("label", {
+		...labelProps,
+		className: cn(FormField_module_default.label, className),
+		children
+	});
+};
+var FormFieldControl = ({ children }) => {
+	const { fieldProps } = useFormFieldContext();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children(fieldProps) });
+};
+var FormFieldError = ({ children, className }) => {
+	const { errorProps } = useFormFieldContext();
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...errorProps,
+		className: cn(FormField_module_default.error, className),
+		children
+	});
+};
+var FormFieldHint = ({ children, className }) => {
+	const { hintProps } = useFormFieldContext();
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("p", {
+		...hintProps,
+		className: cn(FormField_module_default.hint, className),
+		children
+	});
+};
+var FormField = Object.assign(FormFieldRoot, {
+	Label: FormFieldLabel,
+	Control: FormFieldControl,
+	Error: FormFieldError,
+	Hint: FormFieldHint
+});
+//#endregion
+//#region src/components/primitives/DialogBase/DialogBase.module.scss
+var dialog = "_dialog_bhv2h_1";
+var content = "_content_bhv2h_29";
+var DialogBase_module_default = {
+	dialog,
+	"dialog-backdrop-fade-in": "_dialog-backdrop-fade-in_bhv2h_1",
+	content,
+	"dialog-content-enter": "_dialog-content-enter_bhv2h_1"
+};
+//#endregion
+//#region src/components/primitives/DialogBase/DialogBase.tsx
+var DialogBase = ({ open, onClose, children, className, overlayClassName, style, ref: externalRef, closeOnOverlayClick = true, closeOnEscape = true, ...ariaProps }) => {
+	const internalRef = useRef(null);
+	const dialogRef = useMergeRefs$1(internalRef, externalRef ?? null);
+	useEffect(() => {
+		const dialog = internalRef.current;
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		else if (!open && dialog.open) dialog.close();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	}, [open]);
+	const handleCancel = useCallback((e) => {
+		e.preventDefault();
+		if (closeOnEscape) onClose();
+	}, [closeOnEscape, onClose]);
+	const handleBackdropClick = useCallback((e) => {
+		if (!closeOnOverlayClick) return;
+		if (e.target === internalRef.current) onClose();
+	}, [closeOnOverlayClick, onClose]);
+	return /* @__PURE__ */ jsx("dialog", {
+		ref: dialogRef,
+		className: cn(DialogBase_module_default.dialog, overlayClassName),
+		onCancel: handleCancel,
+		onClick: handleBackdropClick,
+		"aria-label": ariaProps["aria-label"],
+		"aria-labelledby": ariaProps["aria-labelledby"],
+		"aria-describedby": ariaProps["aria-describedby"],
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(DialogBase_module_default.content, className),
+			style,
+			children
+		})
+	});
+};
+var PopoverBase_module_default = {
+	popover: "_popover_stzls_1",
+	"popover-enter": "_popover-enter_stzls_1"
+};
+//#endregion
+//#region src/components/primitives/PopoverBase/PopoverBase.tsx
+var PopoverBase = ({ open, onOpenChange, trigger, children, placement = "bottom", offsetValue = 8, className, style, triggerRef: externalTriggerRef, ...ariaProps }) => {
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange,
+		placement,
+		middleware: [
+			offset(offsetValue),
+			flip(),
+			shift({ padding: 8 })
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context),
+		useDismiss(context),
+		useRole(context)
+	]);
+	const setTriggerRef = useCallback((node) => {
+		refs.setReference(node);
+	}, [refs]);
+	const setFloatingRef = useCallback((node) => {
+		refs.setFloating(node);
+	}, [refs]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: useMergeRefs$1(setTriggerRef, externalTriggerRef ?? null),
+		...getReferenceProps(),
+		style: { display: "inline-flex" },
+		children: trigger
+	}), open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setFloatingRef,
+			className: cn(PopoverBase_module_default.popover, className),
+			style: {
+				...floatingStyles,
+				...style
+			},
+			"aria-label": ariaProps["aria-label"],
+			"aria-labelledby": ariaProps["aria-labelledby"],
+			...getFloatingProps(),
+			children
+		})
+	}) })] });
+};
+var TooltipBase_module_default = {
+	tooltip: "_tooltip_n91kb_1",
+	"tooltip-enter": "_tooltip-enter_n91kb_1"
+};
+//#endregion
+//#region src/components/primitives/TooltipBase/TooltipBase.tsx
+var TooltipBase = ({ content, children, placement = "top", delayMs = 300, closeDelayMs = 0, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, style, triggerRef: externalTriggerRef }) => {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	const onOpenChange = isControlled ? controlledOnOpenChange ?? (() => {}) : setUncontrolledOpen;
+	const tooltipId = useId();
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange,
+		placement,
+		middleware: [
+			offset(6),
+			flip(),
+			shift({ padding: 8 })
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useHover(context, {
+			delay: {
+				open: delayMs,
+				close: closeDelayMs
+			},
+			handleClose: safePolygon()
+		}),
+		useFocus(context),
+		useDismiss(context),
+		useRole(context, { role: "tooltip" })
+	]);
+	const setTriggerRef = useCallback((node) => {
+		refs.setReference(node);
+	}, [refs]);
+	const setFloatingRef = useCallback((node) => {
+		refs.setFloating(node);
+	}, [refs]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: useMergeRefs$1(setTriggerRef, externalTriggerRef ?? null),
+		...getReferenceProps(),
+		"aria-describedby": open ? tooltipId : void 0,
+		style: { display: "inline-flex" },
+		children
+	}), open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", {
+		ref: setFloatingRef,
+		id: tooltipId,
+		role: "tooltip",
+		className: cn(TooltipBase_module_default.tooltip, className),
+		style: {
+			...floatingStyles,
+			...style
+		},
+		...getFloatingProps(),
+		children: content
+	}) })] });
+};
+var SelectBase_module_default = {
+	root: "_root_fausy_1",
+	trigger: "_trigger_fausy_14",
+	disabled: "_disabled_fausy_53",
+	value: "_value_fausy_59",
+	chevron: "_chevron_fausy_66",
+	listbox: "_listbox_fausy_76",
+	option: "_option_fausy_87",
+	active: "_active_fausy_102",
+	selected: "_selected_fausy_106",
+	optionDisabled: "_optionDisabled_fausy_110"
+};
+//#endregion
+//#region src/components/primitives/SelectBase/SelectBase.tsx
+var SelectContext = createContext(null);
+var SelectBase = ({ options, value: controlledValue, defaultValue, onChange, placeholder = "Select...", disabled = false, name, className, style, ref, ...ariaProps }) => {
+	const [selectedValue, setSelectedValue] = useControllableState(controlledValue, defaultValue ?? void 0, onChange);
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const listRef = useRef([]);
+	const triggerId = useId();
+	const listboxId = useId();
+	const { refs, floatingStyles, context } = useFloating({
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		whileElementsMounted: autoUpdate,
+		placement: "bottom-start",
+		middleware: [
+			offset(4),
+			flip(),
+			shift({ padding: 8 }),
+			size({ apply({ rects, elements }) {
+				Object.assign(elements.floating.style, { minWidth: `${rects.reference.width}px` });
+			} })
+		]
+	});
+	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+		useClick(context),
+		useDismiss(context),
+		useRole(context, { role: "listbox" }),
+		useListNavigation(context, {
+			listRef,
+			activeIndex,
+			onNavigate: setActiveIndex,
+			loop: true
+		})
+	]);
+	const handleSelect = useCallback((value) => {
+		setSelectedValue(value);
+		setIsOpen(false);
+	}, [setSelectedValue]);
+	const selectedOption = options.find((o) => o.value === selectedValue);
+	const getItemPropsForIndex = useCallback((_index) => getItemProps({ role: "option" }), [getItemProps]);
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: {
+			isOpen,
+			activeIndex,
+			selectedValue,
+			getItemProps: getItemPropsForIndex,
+			handleSelect,
+			listRef
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: cn(SelectBase_module_default.root, className),
+			style,
+			children: [
+				name && selectedValue !== void 0 && /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: selectedValue
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					ref: refs.setReference,
+					type: "button",
+					id: triggerId,
+					className: cn(SelectBase_module_default.trigger, disabled && SelectBase_module_default.disabled),
+					disabled,
+					"aria-expanded": isOpen,
+					"aria-haspopup": "listbox",
+					"aria-controls": isOpen ? listboxId : void 0,
+					"aria-label": ariaProps["aria-label"],
+					"aria-labelledby": ariaProps["aria-labelledby"],
+					...getReferenceProps(),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: SelectBase_module_default.value,
+						children: selectedOption ? selectedOption.label : placeholder
+					}), /* @__PURE__ */ jsx("span", {
+						className: SelectBase_module_default.chevron,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("svg", {
+							width: "12",
+							height: "12",
+							viewBox: "0 0 12 12",
+							fill: "none",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M3 4.5L6 7.5L9 4.5",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					})]
+				}),
+				isOpen && /* @__PURE__ */ jsx("div", {
+					ref: refs.setFloating,
+					id: listboxId,
+					role: "listbox",
+					className: SelectBase_module_default.listbox,
+					style: floatingStyles,
+					"aria-labelledby": triggerId,
+					...getFloatingProps(),
+					children: options.map((option, index) => /* @__PURE__ */ jsx("div", {
+						ref: (node) => {
+							listRef.current[index] = node;
+						},
+						role: "option",
+						className: cn(SelectBase_module_default.option, activeIndex === index && SelectBase_module_default.active, option.value === selectedValue && SelectBase_module_default.selected, option.disabled && SelectBase_module_default.optionDisabled),
+						"aria-selected": option.value === selectedValue,
+						"aria-disabled": option.disabled,
+						tabIndex: activeIndex === index ? 0 : -1,
+						...getItemProps({ onClick: () => {
+							if (!option.disabled) handleSelect(option.value);
+						} }),
+						children: option.label
+					}, option.value))
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { FormField as a, VisuallyHidden as c, DialogBase as i, TooltipBase as n, useFormFieldContext as o, PopoverBase as r, Portal as s, SelectBase as t };

package/dist/Slot-SOe-b2n6.cjs

@@ -0,0 +1,77 @@
+require("./chunk-CKQMccvm.cjs");
+const require_useMergeRefs = require("./useMergeRefs-C_l6omwU.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/primitives/Slot/Slot.tsx
+function isSlottable(child) {
+	return (0, react.isValidElement)(child) && child.type === Slottable;
+}
+var Slottable = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+var Slot = ({ children, ref, ...slotProps }) => {
+	const childrenArray = react.Children.toArray(children);
+	const slottable = childrenArray.find(isSlottable);
+	if (slottable) {
+		const newElement = slottable.props.children;
+		const newChildren = childrenArray.map((child) => {
+			if (child === slottable) {
+				if (react.Children.count(newElement) > 1) return react.Children.only(null);
+				return (0, react.isValidElement)(newElement) ? newElement.props.children : null;
+			}
+			return child;
+		});
+		if (!(0, react.isValidElement)(newElement)) return null;
+		const childProps = newElement.props;
+		const childRef = childProps.ref;
+		return (0, react.cloneElement)(newElement, {
+			...mergeProps(slotProps, childProps),
+			ref: ref ? require_useMergeRefs.mergeRefs(ref, childRef ?? null) : childRef
+		}, newChildren);
+	}
+	if (!(0, react.isValidElement)(children)) {
+		if (react.Children.count(children) > 1) return react.Children.only(null);
+		return null;
+	}
+	const childProps = children.props;
+	const childRef = childProps.ref;
+	return (0, react.cloneElement)(children, {
+		...mergeProps(slotProps, childProps),
+		ref: ref ? require_useMergeRefs.mergeRefs(ref, childRef ?? null) : childRef
+	});
+};
+function mergeProps(slotProps, childProps) {
+	const overrideProps = { ...childProps };
+	for (const propName in childProps) {
+		const slotValue = slotProps[propName];
+		const childValue = childProps[propName];
+		if (propName === "ref") continue;
+		if (propName === "style") overrideProps[propName] = {
+			...slotValue,
+			...childValue
+		};
+		else if (propName === "className") overrideProps[propName] = [slotValue, childValue].filter(Boolean).join(" ");
+		else if (/^on[A-Z]/.test(propName)) if (slotValue && childValue) overrideProps[propName] = (...args) => {
+			childValue(...args);
+			slotValue(...args);
+		};
+		else overrideProps[propName] = slotValue ?? childValue;
+		else if (propName !== "children") overrideProps[propName] = childValue ?? slotValue;
+	}
+	for (const propName in slotProps) {
+		if (propName === "ref") continue;
+		if (overrideProps[propName] === void 0) overrideProps[propName] = slotProps[propName];
+	}
+	return overrideProps;
+}
+//#endregion
+Object.defineProperty(exports, "Slot", {
+	enumerable: true,
+	get: function() {
+		return Slot;
+	}
+});
+Object.defineProperty(exports, "Slottable", {
+	enumerable: true,
+	get: function() {
+		return Slottable;
+	}
+});

package/dist/Slot-z71j7q57.js

@@ -0,0 +1,65 @@
+import { t as mergeRefs } from "./useMergeRefs-BM2-gSLn.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/primitives/Slot/Slot.tsx
+function isSlottable(child) {
+	return isValidElement(child) && child.type === Slottable;
+}
+var Slottable = ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children });
+var Slot = ({ children, ref, ...slotProps }) => {
+	const childrenArray = Children.toArray(children);
+	const slottable = childrenArray.find(isSlottable);
+	if (slottable) {
+		const newElement = slottable.props.children;
+		const newChildren = childrenArray.map((child) => {
+			if (child === slottable) {
+				if (Children.count(newElement) > 1) return Children.only(null);
+				return isValidElement(newElement) ? newElement.props.children : null;
+			}
+			return child;
+		});
+		if (!isValidElement(newElement)) return null;
+		const childProps = newElement.props;
+		const childRef = childProps.ref;
+		return cloneElement(newElement, {
+			...mergeProps(slotProps, childProps),
+			ref: ref ? mergeRefs(ref, childRef ?? null) : childRef
+		}, newChildren);
+	}
+	if (!isValidElement(children)) {
+		if (Children.count(children) > 1) return Children.only(null);
+		return null;
+	}
+	const childProps = children.props;
+	const childRef = childProps.ref;
+	return cloneElement(children, {
+		...mergeProps(slotProps, childProps),
+		ref: ref ? mergeRefs(ref, childRef ?? null) : childRef
+	});
+};
+function mergeProps(slotProps, childProps) {
+	const overrideProps = { ...childProps };
+	for (const propName in childProps) {
+		const slotValue = slotProps[propName];
+		const childValue = childProps[propName];
+		if (propName === "ref") continue;
+		if (propName === "style") overrideProps[propName] = {
+			...slotValue,
+			...childValue
+		};
+		else if (propName === "className") overrideProps[propName] = [slotValue, childValue].filter(Boolean).join(" ");
+		else if (/^on[A-Z]/.test(propName)) if (slotValue && childValue) overrideProps[propName] = (...args) => {
+			childValue(...args);
+			slotValue(...args);
+		};
+		else overrideProps[propName] = slotValue ?? childValue;
+		else if (propName !== "children") overrideProps[propName] = childValue ?? slotValue;
+	}
+	for (const propName in slotProps) {
+		if (propName === "ref") continue;
+		if (overrideProps[propName] === void 0) overrideProps[propName] = slotProps[propName];
+	}
+	return overrideProps;
+}
+//#endregion
+export { Slottable as n, Slot as t };

package/dist/animation-BFpILbqb.js

@@ -0,0 +1,102 @@
+//#region src/tokens/animation.ts
+/**
+* JS-accessible animation duration values (in seconds)
+* for use with GSAP, framer-motion, and Web Animations API.
+* Source of truth for the CSS var equivalents in global.css.
+*/
+var animationDuration = {
+	fastest: .1,
+	fast: .15,
+	short: .2,
+	medium: .3,
+	long: .4,
+	slow: .5,
+	slowest: .8
+};
+/**
+* Cubic-bezier tuples for programmatic use.
+* CSS equivalents live in global.css --ease-* vars.
+*/
+var easing = {
+	linear: [
+		0,
+		0,
+		1,
+		1
+	],
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	],
+	easeIn: [
+		.42,
+		0,
+		1,
+		1
+	],
+	easeOut: [
+		0,
+		0,
+		.58,
+		1
+	],
+	easeInOut: [
+		.42,
+		0,
+		.58,
+		1
+	],
+	easeInOutCubic: [
+		.4,
+		0,
+		.2,
+		1
+	],
+	easeOutCubic: [
+		.215,
+		.61,
+		.355,
+		1
+	],
+	easeOutQuad: [
+		.25,
+		.46,
+		.45,
+		.94
+	],
+	easeInOutQuad: [
+		.455,
+		.03,
+		.515,
+		.955
+	],
+	easeInQuart: [
+		.5,
+		0,
+		.75,
+		0
+	],
+	easeOutQuart: [
+		.25,
+		1,
+		.5,
+		1
+	],
+	easeInOutQuart: [
+		.76,
+		0,
+		.24,
+		1
+	],
+	easeOutExpo: [
+		.16,
+		1,
+		.3,
+		1
+	]
+};
+var staggerDelay = .03;
+//#endregion
+export { easing as n, staggerDelay as r, animationDuration as t };