@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/core/checkbox/motion-checkbox.js

@@ -0,0 +1,103 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Checkbox as Checkbox$1, CheckboxIndicator } from "../../_vendor/@radix-ui/react-checkbox/dist/index.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/core/checkbox/motion-checkbox.tsx
+function getAnimateState(checked) {
+	if (checked === "indeterminate") return "indeterminate";
+	return checked ? "checked" : "unchecked";
+}
+function Checkbox({ className, onCheckedChange, ...props }) {
+	const [checkedState, setCheckedState] = React$1.useState(props?.checked ?? props?.defaultChecked ?? false);
+	React$1.useEffect(() => {
+		if (props?.checked !== void 0) setCheckedState(props.checked);
+	}, [props?.checked]);
+	const handleCheckedChange = React$1.useCallback((checked) => {
+		setCheckedState(checked);
+		onCheckedChange?.(checked);
+	}, [onCheckedChange]);
+	const animateState = getAnimateState(checkedState);
+	return /* @__PURE__ */ jsx("span", {
+		className: "relative inline-flex shrink-0",
+		children: /* @__PURE__ */ jsx(Checkbox$1, {
+			...props,
+			onCheckedChange: handleCheckedChange,
+			asChild: true,
+			children: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "checkbox",
+				className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-colors duration-500 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+				whileTap: { scale: .95 },
+				whileHover: { scale: 1.05 },
+				...props,
+				children: /* @__PURE__ */ jsx(CheckboxIndicator, {
+					forceMount: true,
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(motion.svg, {
+						"data-slot": "checkbox-indicator",
+						xmlns: "http://www.w3.org/2000/svg",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						strokeWidth: "3.5",
+						stroke: "currentColor",
+						className: "size-3.5",
+						initial: "unchecked",
+						animate: animateState,
+						children: [/* @__PURE__ */ jsx(motion.path, {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "M4.5 12.75l6 6 9-13.5",
+							variants: {
+								checked: {
+									pathLength: 1,
+									opacity: 1,
+									transition: {
+										duration: .2,
+										delay: .2
+									}
+								},
+								unchecked: {
+									pathLength: 0,
+									opacity: 0,
+									transition: { duration: .2 }
+								},
+								indeterminate: {
+									pathLength: 0,
+									opacity: 0,
+									transition: { duration: .15 }
+								}
+							}
+						}), /* @__PURE__ */ jsx(motion.path, {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							d: "M5 12h14",
+							variants: {
+								checked: {
+									pathLength: 0,
+									opacity: 0,
+									transition: { duration: .15 }
+								},
+								unchecked: {
+									pathLength: 0,
+									opacity: 0,
+									transition: { duration: .15 }
+								},
+								indeterminate: {
+									pathLength: 1,
+									opacity: 1,
+									transition: {
+										duration: .2,
+										delay: .15
+									}
+								}
+							}
+						})]
+					})
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/core/collapsible.js

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+//#region src/core/collapsible.tsx
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+/**
+* Animated container that holds the collapsible body.
+*
+* Lifecycle (inherited from Radix `@radix-ui/react-collapsible`):
+* - While the parent `Collapsible` is closed and `forceMount` is unset, the
+*   subtree is gated by Radix's `Presence` and `isOpen && children`, so it is
+*   never rendered into the DOM. `useEffect`/`useQuery`/etc. inside it do not
+*   fire.
+* - On first expand, the subtree mounts and effects fire.
+* - On collapse, the subtree unmounts after the close animation. On the next
+*   expand it remounts, so any data-fetching effect runs again. Cache at the
+*   data layer (e.g. React Query) if you need to avoid refetching per toggle.
+*
+* Footgun — JSX eager evaluation:
+* Any synchronous expression placed directly as a child of `CollapsibleContent`
+* is evaluated by the parent during its own render, before Radix sees it. No
+* collapsible primitive can prevent this. Wrap fetching/expensive work inside
+* a component so its effects fire on mount.
+*
+* @example
+* // Safe: DeviceDetails only mounts when expanded, so its fetch only runs then.
+* <CollapsibleContent>
+*   <DeviceDetails id={id} />
+* </CollapsibleContent>
+*
+* // Unsafe: fetchData(id) runs on every parent render for every card,
+* // regardless of open state.
+* <CollapsibleContent>
+*   {fetchData(id)}
+* </CollapsibleContent>
+*
+* Pass `forceMount` if you explicitly need the subtree mounted while closed
+* (e.g. SEO crawlers, layout measurement).
+*/
+var CollapsibleContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, {
+	ref,
+	className: "grid data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up",
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("overflow-hidden", className),
+		children
+	})
+}));
+CollapsibleContent.displayName = "CollapsibleContent";
+//#endregion
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/core/combobox/combobox.js

@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+//#region src/core/combobox/combobox.tsx
+function AsyncCombobox({ value, onValueChange, options, onSearchChange, isLoading = false, placeholder = "Select...", emptyText = "No results.", searchPlaceholder = "Search...", label, required, disabled, className, clearable = false, hasMore = false, onLoadMore }) {
+	const [open, setOpen] = React$1.useState(false);
+	const [inputValue, setInputValue] = React$1.useState("");
+	const displayValue = options.find((o) => o.value === value)?.label ?? (value || "");
+	const handleSelect = (selected) => {
+		onValueChange?.(value === selected && clearable ? void 0 : selected);
+		if (!clearable) setOpen(false);
+	};
+	const handleSearchChange = React$1.useCallback((q) => {
+		setInputValue(q);
+		onSearchChange?.(q);
+	}, [onSearchChange]);
+	const trigger = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "combobox",
+		"aria-expanded": open,
+		disabled,
+		className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", !displayValue && "text-muted-foreground", className),
+		onClick: () => setOpen(!open),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 flex-1",
+		children: [label != null && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-between",
+			children: /* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-2 text-sm leading-none font-medium select-none",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: "*"
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: trigger
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-[var(--radix-popover-trigger-width)] p-0",
+				align: "start",
+				children: /* @__PURE__ */ jsxs(Command, {
+					shouldFilter: false,
+					children: [/* @__PURE__ */ jsx(CommandInput, {
+						placeholder: searchPlaceholder,
+						value: inputValue,
+						onValueChange: handleSearchChange
+					}), /* @__PURE__ */ jsxs(CommandList, { children: [
+						/* @__PURE__ */ jsx(CommandEmpty, { children: isLoading ? /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center py-6",
+							children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-4 border-primary border-t-transparent" })
+						}) : emptyText }),
+						/* @__PURE__ */ jsx(CommandGroup, { children: options.map((opt) => /* @__PURE__ */ jsxs(CommandItem, {
+							value: opt.value,
+							onSelect: () => handleSelect(opt.value),
+							children: [/* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === opt.value ? "opacity-100" : "opacity-0") }), opt.label]
+						}, opt.value)) }),
+						hasMore && onLoadMore && /* @__PURE__ */ jsx("div", {
+							className: "border-t p-2",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "text-sm text-primary hover:underline w-full text-center",
+								onClick: () => onLoadMore(),
+								children: "Load more"
+							})
+						})
+					] })]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { AsyncCombobox };

package/dist/core/command.js

@@ -0,0 +1,61 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { Command } from "cmdk";
+//#region src/core/command.tsx
+var Command$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command, {
+	ref,
+	className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+	...props
+}));
+Command$1.displayName = Command.displayName;
+var CommandInput = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center border-b px-3",
+	"cmdk-input-wrapper": "",
+	children: [/* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command.Input, {
+		ref,
+		className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	})]
+}));
+CommandInput.displayName = Command.Input.displayName;
+var CommandList = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.List, {
+	ref,
+	className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+	...props
+}));
+CommandList.displayName = Command.List.displayName;
+var CommandEmpty = React$1.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command.Empty, {
+	ref,
+	className: "py-6 text-center text-sm",
+	...props
+}));
+CommandEmpty.displayName = Command.Empty.displayName;
+var CommandGroup = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Group, {
+	ref,
+	className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
+	...props
+}));
+CommandGroup.displayName = Command.Group.displayName;
+var CommandSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Separator, {
+	ref,
+	className: cn("-mx-1 h-px bg-border", className),
+	...props
+}));
+CommandSeparator.displayName = Command.Separator.displayName;
+var CommandItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command.Item, {
+	ref,
+	className: cn("relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+	...props
+}));
+CommandItem.displayName = Command.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+};
+CommandShortcut.displayName = "CommandShortcut";
+//#endregion
+export { Command$1 as Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/core/field-end-icons.js

@@ -0,0 +1,36 @@
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+//#region src/core/field-end-icons.tsx
+/** Every decorator inside an `Input` end slot renders at this size. */
+var FIELD_ICON_SIZE = 16;
+/**
+* Trailing content for an `Input` `endIcon` slot: an optional clear button
+* followed by an optional decorative icon, both 16px and inline, so a
+* clearable field keeps the same layout whether or not it has a value. The
+* slot itself is `pointer-events-none`; the button opts back in.
+*/
+function FieldEndIcons({ icon, onClear, clearLabel = "Clear", className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex items-center gap-1.5", className),
+		children: [onClear && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": clearLabel,
+			onClick: onClear,
+			className: "pointer-events-auto rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			children: /* @__PURE__ */ jsx(XIcon, {
+				size: FIELD_ICON_SIZE,
+				"aria-hidden": true
+			})
+		}), icon]
+	});
+}
+/** Input padding-end that leaves room for one or two 16px end icons. */
+function fieldEndPaddingClassName(hasClear, hasIcon) {
+	if (hasClear && hasIcon) return "pe-16";
+	if (hasClear || hasIcon) return "pe-9";
+	return "";
+}
+//#endregion
+export { FIELD_ICON_SIZE, FieldEndIcons, fieldEndPaddingClassName };

package/dist/core/field-label-row.js

@@ -0,0 +1,33 @@
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/field-label-row.tsx
+/** Shared with `MonospaceContent` and any other UI that should match non-floating field labels. */
+var inputLabelClassName = "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+/** Hint text placed at the end of a label row. `leading-none` keeps the row 14px tall like the label. */
+var fieldHintClassName = "text-sm leading-none text-muted-foreground";
+/**
+* The label row every enhanced form control shares (`Input`, `Textarea`,
+* `SelectTrigger`, the date pickers): label with an optional required
+* marker on the left, optional hint on the right, one line of `text-sm`
+* at `leading-none`. Rendering it from one place keeps the distance
+* between label text and control identical across control types.
+*/
+function FieldLabelRow({ htmlFor, label, required = false, hintContent, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-end justify-between gap-2", className),
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor,
+			className: cn(inputLabelClassName, "shrink-0 whitespace-nowrap"),
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "text-destructive",
+				children: "*"
+			})]
+		}), hintContent && /* @__PURE__ */ jsx("span", {
+			className: cn(fieldHintClassName, "min-w-0 text-end"),
+			children: hintContent
+		})]
+	});
+}
+//#endregion
+export { FieldLabelRow, fieldHintClassName, inputLabelClassName };

package/dist/core/form.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Label } from "./label.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+//#region src/core/form.tsx
+var Form = FormProvider;
+var FormFieldContext = React$1.createContext(null);
+var FormField = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: { name: props.name },
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+};
+var useFormField = () => {
+	const fieldContext = React$1.useContext(FormFieldContext);
+	const itemContext = React$1.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	if (!itemContext) throw new Error("useFormField should be used within <FormItem>");
+	const fieldState = getFieldState(fieldContext.name, formState);
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+var FormItemContext = React$1.createContext(null);
+var FormItem = React$1.forwardRef(({ className, ...props }, ref) => {
+	const id = React$1.useId();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: { id },
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("space-y-2", className),
+			...props
+		})
+	});
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { error, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(Label, {
+		ref,
+		className: cn("flex items-center gap-2", error && "text-destructive", className),
+		htmlFor: formItemId,
+		...props
+	});
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React$1.forwardRef(({ ...props }, ref) => {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		id: formItemId,
+		"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": !!error,
+		...props
+	});
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React$1.forwardRef(({ className, ...props }, ref) => {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		id: formDescriptionId,
+		className: cn("text-[0.8rem] text-muted-foreground", className),
+		...props
+	});
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React$1.forwardRef(({ className, children, ...props }, ref) => {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		id: formMessageId,
+		className: cn("text-[0.8rem] font-medium text-destructive", className),
+		...props,
+		children: body
+	});
+});
+FormMessage.displayName = "FormMessage";
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/core/hooks/use-controlled-state.js

@@ -0,0 +1,27 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-controlled-state.tsx
+/**
+* Controlled / uncontrolled state pair with React's usual semantics: while
+* `value` is defined the hook reports exactly that value and the setter only
+* notifies `onChange`; the owner decides whether the change takes effect.
+* Without `value` the hook owns the state, seeded from `defaultValue`.
+*
+* The internal copy still tracks a controlled `value` so a component that
+* later drops `value` keeps the last controlled state instead of snapping
+* back to `defaultValue`.
+*/
+function useControlledState(props) {
+	const { value, defaultValue, onChange } = props;
+	const isControlled = value !== void 0;
+	const [internalState, setInternalState] = React$1.useState(isControlled ? value : defaultValue);
+	React$1.useEffect(() => {
+		if (isControlled) setInternalState(value);
+	}, [isControlled, value]);
+	const setState = React$1.useCallback((next, ...args) => {
+		if (!isControlled) setInternalState(next);
+		onChange?.(next, ...args);
+	}, [isControlled, onChange]);
+	return [isControlled ? value : internalState, setState];
+}
+//#endregion
+export { useControlledState };

package/dist/core/hooks/use-data-state.js

@@ -0,0 +1,39 @@
+"use client";
+import * as React$1 from "react";
+//#region src/core/hooks/use-data-state.tsx
+function parseDatasetValue(value) {
+	if (value === null) return null;
+	if (value === "" || value === "true") return true;
+	if (value === "false") return false;
+	return value;
+}
+function useDataState(key, forwardedRef, onChange) {
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(forwardedRef, () => localRef.current);
+	const getSnapshot = () => {
+		const el = localRef.current;
+		return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
+	};
+	const subscribe = (callback) => {
+		const el = localRef.current;
+		if (!el) return () => {};
+		const observer = new MutationObserver((records) => {
+			for (const record of records) if (record.attributeName === `data-${key}`) {
+				callback();
+				break;
+			}
+		});
+		observer.observe(el, {
+			attributes: true,
+			attributeFilter: [`data-${key}`]
+		});
+		return () => observer.disconnect();
+	};
+	const value = React$1.useSyncExternalStore(subscribe, getSnapshot);
+	React$1.useEffect(() => {
+		if (onChange) onChange(value);
+	}, [value, onChange]);
+	return [value, localRef];
+}
+//#endregion
+export { useDataState };

package/dist/core/hooks/use-is-in-view.js

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import { useInView } from "motion/react";
+//#region src/core/hooks/use-is-in-view.tsx
+function useIsInView(ref, options = {}) {
+	const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const inViewResult = useInView(localRef, {
+		once: inViewOnce,
+		margin: inViewMargin
+	});
+	return {
+		ref: localRef,
+		isInView: !inView || inViewResult
+	};
+}
+//#endregion
+export { useIsInView };

package/dist/core/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-mobile.tsx
+var MOBILE_BREAKPOINT = 768;
+var MOBILE_MEDIA_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React$1.useState(void 0);
+	React$1.useEffect(() => {
+		const mql = window.matchMedia(MOBILE_MEDIA_QUERY);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+//#endregion
+export { MOBILE_BREAKPOINT, MOBILE_MEDIA_QUERY, useIsMobile };