@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/core/hooks/use-reveal-on-scroll-up.js

@@ -0,0 +1,141 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-reveal-on-scroll-up.tsx
+var DEFAULT_THRESHOLD = 24;
+var OPEN_POPUP_SELECTOR = "[aria-expanded=\"true\"], [data-state=\"open\"]";
+var STATIC = {
+	state: "static",
+	animate: false
+};
+function getScrollParent(element) {
+	let parent = element.parentElement;
+	while (parent) {
+		const { overflowY } = getComputedStyle(parent);
+		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return parent;
+		parent = parent.parentElement;
+	}
+	return window;
+}
+function useMediaMatch(query, enabled) {
+	const [matches, setMatches] = React$1.useState(false);
+	React$1.useEffect(() => {
+		if (!enabled || query === void 0) {
+			setMatches(enabled);
+			return;
+		}
+		if (typeof window.matchMedia !== "function") {
+			setMatches(false);
+			return;
+		}
+		const mql = window.matchMedia(query);
+		const onChange = () => setMatches(mql.matches);
+		onChange();
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, [query, enabled]);
+	return matches;
+}
+function readScroll(scroller) {
+	if (scroller instanceof Window) {
+		const max = document.documentElement.scrollHeight - window.innerHeight;
+		return {
+			top: window.scrollY,
+			max,
+			viewportTop: 0
+		};
+	}
+	return {
+		top: scroller.scrollTop,
+		max: scroller.scrollHeight - scroller.clientHeight,
+		viewportTop: scroller.getBoundingClientRect().top
+	};
+}
+/**
+* Headroom-style visibility for a page header inside a scroll container: the
+* header scrolls away normally, slides back in pinned at the top once the user
+* scrolls up by `threshold`, and slides away again on the next scroll down.
+* Back at the header's natural position it returns to the normal flow.
+*/
+function useRevealOnScrollUp(ref, { enabled: enabledOption, mediaQuery, threshold = DEFAULT_THRESHOLD }) {
+	const enabled = useMediaMatch(mediaQuery, enabledOption);
+	const [reveal, setReveal] = React$1.useState(STATIC);
+	const stateRef = React$1.useRef("static");
+	const transition = React$1.useCallback((next) => {
+		const previous = stateRef.current;
+		if (previous === next) return;
+		stateRef.current = next;
+		setReveal({
+			state: next,
+			animate: previous !== "static" && next !== "static"
+		});
+	}, []);
+	React$1.useEffect(() => {
+		const element = ref.current;
+		if (!enabled || !element) {
+			stateRef.current = "static";
+			setReveal(STATIC);
+			return;
+		}
+		const scroller = getScrollParent(element);
+		let lastTop = readScroll(scroller).top;
+		let upDistance = 0;
+		let naturalTop = 0;
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			const scroll = readScroll(scroller);
+			const top = Math.min(Math.max(scroll.top, 0), Math.max(scroll.max, 0));
+			const delta = top - lastTop;
+			lastTop = top;
+			const rect = element.getBoundingClientRect();
+			if (stateRef.current === "static") naturalTop = rect.top - scroll.viewportTop + top;
+			const naturalBottom = naturalTop + rect.height;
+			if (top <= naturalTop) {
+				transition("static");
+				return;
+			}
+			if (stateRef.current === "static") {
+				if (top >= naturalBottom) transition("hidden");
+				return;
+			}
+			if (delta > 0) {
+				upDistance = 0;
+				if (stateRef.current === "revealed" && element.querySelector(OPEN_POPUP_SELECTOR)) return;
+				transition(top < naturalBottom ? "static" : "hidden");
+				return;
+			}
+			if (delta < 0) {
+				upDistance -= delta;
+				if (stateRef.current !== "hidden") return;
+				if (top < naturalBottom) {
+					transition("static");
+					return;
+				}
+				if (upDistance >= threshold) transition("revealed");
+			}
+		};
+		const onScroll = () => {
+			if (frame === 0) frame = requestAnimationFrame(update);
+		};
+		update();
+		scroller.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			scroller.removeEventListener("scroll", onScroll);
+			if (frame !== 0) cancelAnimationFrame(frame);
+		};
+	}, [
+		ref,
+		enabled,
+		threshold,
+		transition
+	]);
+	const revealNow = React$1.useCallback(() => {
+		if (stateRef.current === "hidden") transition("revealed");
+	}, [transition]);
+	return {
+		state: reveal.state,
+		animate: reveal.animate,
+		reveal: revealNow
+	};
+}
+//#endregion
+export { useRevealOnScrollUp };

package/dist/core/hooks/use-scroll-overflow.js

@@ -0,0 +1,50 @@
+import * as React$1 from "react";
+//#region src/core/hooks/use-scroll-overflow.tsx
+var NO_OVERFLOW = {
+	start: false,
+	end: false
+};
+/** Tracks whether a horizontal scroller has content hidden on either side. */
+function useScrollOverflow(ref, { enabled = true, getContent, onResize } = {}) {
+	const [overflow, setOverflow] = React$1.useState(NO_OVERFLOW);
+	const getContentRef = React$1.useRef(getContent);
+	const onResizeRef = React$1.useRef(onResize);
+	React$1.useEffect(() => {
+		getContentRef.current = getContent;
+		onResizeRef.current = onResize;
+	});
+	React$1.useEffect(() => {
+		const scroller = ref.current;
+		if (!enabled || !scroller) {
+			setOverflow(NO_OVERFLOW);
+			return;
+		}
+		const update = () => {
+			const max = scroller.scrollWidth - scroller.clientWidth;
+			const pos = Math.abs(scroller.scrollLeft);
+			const start = pos > 1;
+			const end = pos < max - 1;
+			setOverflow((prev) => prev.start === start && prev.end === end ? prev : {
+				start,
+				end
+			});
+		};
+		update();
+		scroller.addEventListener("scroll", update, { passive: true });
+		if (typeof ResizeObserver === "undefined") return () => scroller.removeEventListener("scroll", update);
+		const observer = new ResizeObserver(() => {
+			update();
+			onResizeRef.current?.();
+		});
+		observer.observe(scroller);
+		const content = getContentRef.current?.(scroller);
+		if (content) observer.observe(content);
+		return () => {
+			scroller.removeEventListener("scroll", update);
+			observer.disconnect();
+		};
+	}, [ref, enabled]);
+	return overflow;
+}
+//#endregion
+export { useScrollOverflow };

package/dist/core/index.js

@@ -1,52 +1,18 @@
-export { Badge, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, badgeVariants, buttonGroupVariants, useIsInView } from '../chunk-ABBHGIFI.js';
-export { Avatar, AvatarFallback, AvatarImage, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator, Skeleton, buttonVariants, getStrictContext, useControlledState, useDataState, useIsMobile } from '../chunk-OKB2WTX7.js';
-import { cn } from '../chunk-VU4CZ76T.js';
-import '../chunk-TRTQSARU.js';
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
-
-var alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    role: "alert",
-    className: cn(alertVariants({ variant }), className),
-    ...props
-  }
-));
-Alert.displayName = "Alert";
-var AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h5",
-  {
-    ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
-    ...props
-  }
-));
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
-    ...props
-  }
-));
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertDescription, AlertTitle };
+import { useControlledState } from "./hooks/use-controlled-state.js";
+import { getStrictContext } from "./utils/get-strict-context.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { useDataState } from "./hooks/use-data-state.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { Button, buttonVariants } from "./button.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+import { useIsMobile } from "./hooks/use-mobile.js";
+import { Separator } from "./separator.js";
+import { Skeleton } from "./skeleton.js";
+import { Label } from "./label.js";
+import { Badge, badgeVariants } from "./badge.js";
+import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./button-group.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+import { useIsInView } from "./hooks/use-is-in-view.js";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Separator, Skeleton, badgeVariants, buttonGroupVariants, buttonVariants, getStrictContext, useControlledState, useDataState, useIsInView, useIsMobile };

package/dist/core/input/input-password.js

@@ -0,0 +1,30 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Input } from "./input.js";
+import * as React$1 from "react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+//#region src/core/input/input-password.tsx
+var InputPassword = React$1.forwardRef(({ className, ...props }, ref) => {
+	const [isVisible, setIsVisible] = useState(false);
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		type: isVisible ? "text" : "password",
+		className: cn("pr-9", className),
+		endIcon: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setIsVisible((prev) => !prev),
+			className: "pointer-events-auto cursor-pointer text-muted-foreground hover:text-foreground",
+			tabIndex: -1,
+			children: [isVisible ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: isVisible ? "Hide password" : "Show password"
+			})]
+		}),
+		...props
+	});
+});
+InputPassword.displayName = "InputPassword";
+//#endregion
+export { InputPassword };

package/dist/core/input/input.js

@@ -0,0 +1,147 @@
+import { cn } from "../../utils/cn.js";
+import { FieldLabelRow, fieldHintClassName, inputLabelClassName } from "../field-label-row.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/core/input/input.tsx
+var sizeClasses = {
+	sm: "h-8 px-2 text-xs",
+	default: "h-10 px-3 py-2 text-base md:text-sm",
+	lg: "h-12 px-4 text-lg"
+};
+var Input = React$1.forwardRef(({ className, type, label, size, rounded, startHelperContent, endHelperContent, hintContent, error, errorContent, startIcon, endIcon, startAddOnContent, endAddOnContent, startAddOn, endAddOn, floatingLabel, charLimit, onChange, value, defaultValue, id, required, placeholder, ...restProps }, ref) => {
+	const autoId = React$1.useId();
+	const inputId = id || autoId;
+	const [charCount, setCharCount] = React$1.useState(() => {
+		if (charLimit === void 0) return 0;
+		if (typeof value === "string") return value.length;
+		if (typeof defaultValue === "string") return defaultValue.length;
+		return 0;
+	});
+	React$1.useEffect(() => {
+		if (charLimit !== void 0 && typeof value === "string") setCharCount(value.length);
+	}, [value, charLimit]);
+	if (!(label !== void 0 || size !== void 0 || rounded !== void 0 || startHelperContent !== void 0 || endHelperContent !== void 0 || hintContent !== void 0 || error !== void 0 || errorContent !== void 0 || startIcon !== void 0 || endIcon !== void 0 || startAddOnContent !== void 0 || endAddOnContent !== void 0 || startAddOn !== void 0 || endAddOn !== void 0 || floatingLabel !== void 0 || charLimit !== void 0)) return /* @__PURE__ */ jsx("input", {
+		type,
+		id,
+		className: cn("flex h-10 w-full 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 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 read-only:bg-muted md:text-sm", className),
+		ref,
+		onChange,
+		value,
+		defaultValue,
+		required,
+		placeholder,
+		...restProps
+	});
+	const effectiveSize = size || "default";
+	const hasError = error || !!errorContent;
+	const handleChange = (e) => {
+		if (charLimit !== void 0) setCharCount(e.target.value.length);
+		onChange?.(e);
+	};
+	const effectivePlaceholder = floatingLabel ? " " : placeholder;
+	const resolveAddOn = (content, text) => content != null && content !== false && content !== "" ? content : text || void 0;
+	const startAddOnNode = resolveAddOn(startAddOnContent, startAddOn);
+	const endAddOnNode = resolveAddOn(endAddOnContent, endAddOn);
+	const hasAddOn = startAddOnNode != null || endAddOnNode != null;
+	const hasOverlay = !!startIcon || !!endIcon || charLimit !== void 0 || !!floatingLabel;
+	const helperStartId = `${inputId}-helper-start`;
+	const helperEndId = `${inputId}-helper-end`;
+	const describedBy = [
+		errorContent && `${inputId}-error`,
+		startHelperContent && !errorContent && helperStartId,
+		endHelperContent && !errorContent && helperEndId
+	].filter(Boolean).join(" ") || void 0;
+	const inputElement = /* @__PURE__ */ jsx("input", {
+		type,
+		id: inputId,
+		ref,
+		className: cn("flex w-full border border-input bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 read-only:bg-muted z-10", floatingLabel ? "h-12 px-3 pt-4 pb-1 text-base md:text-sm" : sizeClasses[effectiveSize], rounded ? "rounded-full" : "rounded-md", hasError && "border-destructive focus-visible:ring-destructive", startIcon && "ps-9", endIcon && "pe-9", charLimit !== void 0 && !endIcon && "pe-14", charLimit !== void 0 && endIcon && "pe-20", startAddOnNode != null && "rounded-s-none shadow-none", endAddOnNode != null && "rounded-e-none shadow-none", "peer", floatingLabel && "placeholder:text-transparent", className),
+		required,
+		"aria-invalid": hasError || void 0,
+		"aria-describedby": describedBy,
+		onChange: handleChange,
+		value,
+		defaultValue,
+		maxLength: charLimit,
+		placeholder: effectivePlaceholder,
+		...restProps
+	});
+	let inputContainer = inputElement;
+	if (hasOverlay) inputContainer = /* @__PURE__ */ jsxs("div", {
+		className: "group relative min-w-0 flex-1",
+		children: [
+			inputElement,
+			startIcon && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50",
+				children: startIcon
+			}),
+			(endIcon || charLimit !== void 0) && /* @__PURE__ */ jsxs("div", {
+				className: "pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center gap-2 pe-3 text-muted-foreground/80 peer-disabled:opacity-50",
+				children: [charLimit !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-xs tabular-nums text-muted-foreground",
+					children: [
+						charCount,
+						"/",
+						charLimit
+					]
+				}), endIcon]
+			}),
+			floatingLabel && label && /* @__PURE__ */ jsxs("label", {
+				htmlFor: inputId,
+				className: "absolute start-2 top-0 z-10 block -translate-y-1/2 bg-background px-2 text-xs font-medium text-foreground/70 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-placeholder-shown:font-normal peer-focus:top-0 peer-focus:text-xs peer-focus:font-medium",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: " *"
+				})]
+			})
+		]
+	});
+	if (hasAddOn) inputContainer = /* @__PURE__ */ jsxs("div", {
+		className: "flex rounded-lg",
+		children: [
+			startAddOnNode != null && /* @__PURE__ */ jsx("span", {
+				className: "-me-px inline-flex items-center rounded-s-lg border border-input bg-background px-3 text-sm text-muted-foreground",
+				children: startAddOnNode
+			}),
+			inputContainer,
+			endAddOnNode != null && /* @__PURE__ */ jsx("span", {
+				className: "-ms-px inline-flex items-center rounded-e-lg border border-input bg-background px-3 text-sm text-muted-foreground",
+				children: endAddOnNode
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 flex-1",
+		children: [
+			label && !floatingLabel && /* @__PURE__ */ jsx(FieldLabelRow, {
+				htmlFor: inputId,
+				label,
+				required,
+				hintContent
+			}),
+			!label && hintContent && /* @__PURE__ */ jsx("span", {
+				className: fieldHintClassName,
+				children: hintContent
+			}),
+			inputContainer,
+			errorContent && /* @__PURE__ */ jsx("div", {
+				id: `${inputId}-error`,
+				className: "text-sm text-destructive",
+				children: errorContent
+			}),
+			startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", {
+				id: helperStartId,
+				className: "text-sm text-muted-foreground",
+				children: startHelperContent
+			}),
+			endHelperContent && !errorContent && /* @__PURE__ */ jsx("div", {
+				id: helperEndId,
+				className: "text-sm text-end text-muted-foreground",
+				children: endHelperContent
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+//#endregion
+export { Input, inputLabelClassName };

package/dist/core/input-otp/input-otp.js

@@ -0,0 +1,183 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { inputLabelClassName } from "../field-label-row.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MinusIcon } from "lucide-react";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+//#region src/core/input-otp/input-otp.tsx
+var LENGTH_MIN = 2;
+var LENGTH_MAX = 12;
+var LENGTH_DEFAULT = 6;
+var slotSizeClasses = {
+	sm: "h-8 w-8 text-xs",
+	default: "h-10 w-10 text-base md:text-sm",
+	lg: "h-12 w-12 text-lg"
+};
+/** Expanded mode: keep the height and font size but let the slot flex-grow. */
+var slotExpandedSizeClasses = {
+	sm: "h-8 text-xs",
+	default: "h-10 text-base md:text-sm",
+	lg: "h-12 text-lg"
+};
+/**
+* Standalone visual divider used between OTP slot groups. Exported for callers
+* that want to render their own custom slot layout; the default `InputOTP`
+* component renders it automatically based on the `separators` prop.
+*/
+var InputOTPSeparator = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role: "separator",
+	"aria-hidden": "true",
+	className: cn("flex items-center text-muted-foreground", className),
+	...props,
+	children: /* @__PURE__ */ jsx(MinusIcon, { size: 16 })
+}));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+/**
+* Renders one slot box. Mirrors `Input`'s border/focus/error tokens so a row of
+* slots visually lines up with an `Input` of the same `size`.
+*/
+var SlotBox = ({ index, size, expand, rounded, hasError, cornerClass }) => {
+	const slot = React$1.useContext(OTPInputContext).slots[index];
+	if (!slot) return null;
+	const { char, hasFakeCaret, isActive } = slot;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-active": isActive || void 0,
+		className: cn("relative flex items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs", "transition-[box-shadow,border-color] duration-200 ease-in-out", "ring-offset-background", "data-[active=true]:z-10 data-[active=true]:ring-2 data-[active=true]:ring-ring data-[active=true]:ring-offset-2", hasError && "border-destructive data-[active=true]:ring-destructive", rounded ? "rounded-full" : "rounded-md", cornerClass, expand ? cn("min-w-0 flex-1", slotExpandedSizeClasses[size]) : slotSizeClasses[size]),
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
+		})]
+	});
+};
+/** Splits `[0, 1, …, length-1]` into groups per `separators`. */
+function buildGroups(length, separators) {
+	if (!separators || separators.length === 0) return [Array.from({ length }, (_, i) => i)];
+	const sum = separators.reduce((a, b) => a + b, 0);
+	if (sum !== length) {
+		console.warn(`[InputOTP] separators sum (${sum}) does not equal length (${length}); ignoring separators.`);
+		return [Array.from({ length }, (_, i) => i)];
+	}
+	const groups = [];
+	let cursor = 0;
+	for (const size of separators) {
+		groups.push(Array.from({ length: size }, (_, i) => cursor + i));
+		cursor += size;
+	}
+	return groups;
+}
+function clampLength(raw) {
+	if (raw === void 0) return LENGTH_DEFAULT;
+	if (!Number.isFinite(raw)) return LENGTH_DEFAULT;
+	const rounded = Math.floor(raw);
+	if (rounded < LENGTH_MIN) {
+		console.warn(`[InputOTP] length=${raw} is below the minimum ${LENGTH_MIN}; using ${LENGTH_MIN}.`);
+		return LENGTH_MIN;
+	}
+	if (rounded > LENGTH_MAX) {
+		console.warn(`[InputOTP] length=${raw} is above the maximum ${LENGTH_MAX}; using ${LENGTH_MAX}.`);
+		return LENGTH_MAX;
+	}
+	return rounded;
+}
+var InputOTP = React$1.forwardRef(({ length, allowAlphaNumeric, regex, separators, expand, value, defaultValue, onChange, onComplete, label, required, size, rounded, disabled, startHelperContent, endHelperContent, hintContent, error, errorContent, id, name, autoFocus, autoComplete, className, containerClassName, ...restProps }, ref) => {
+	const autoId = React$1.useId();
+	const inputId = id || autoId;
+	const effectiveLength = React$1.useMemo(() => clampLength(length), [length]);
+	const effectiveSize = size || "default";
+	const hasError = !!error || !!errorContent;
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = React$1.useState(typeof defaultValue === "string" ? defaultValue : "");
+	const effectiveValue = isControlled ? value : uncontrolledValue;
+	const handleChange = React$1.useCallback((next) => {
+		if (!isControlled) setUncontrolledValue(next);
+		onChange?.(next);
+	}, [isControlled, onChange]);
+	const pattern = regex && regex.length > 0 ? regex : allowAlphaNumeric ? REGEXP_ONLY_DIGITS_AND_CHARS : REGEXP_ONLY_DIGITS;
+	const groups = React$1.useMemo(() => buildGroups(effectiveLength, separators), [effectiveLength, separators]);
+	const helperStartId = `${inputId}-helper-start`;
+	const helperEndId = `${inputId}-helper-end`;
+	const describedBy = [
+		errorContent && `${inputId}-error`,
+		startHelperContent && !errorContent && helperStartId,
+		endHelperContent && !errorContent && helperEndId
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 flex-1",
+		"data-disabled": disabled || void 0,
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: inputId,
+					className: inputLabelClassName,
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					})]
+				}), hintContent && /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: hintContent
+				})]
+			}),
+			!label && hintContent && /* @__PURE__ */ jsx("span", {
+				className: "text-sm text-muted-foreground",
+				children: hintContent
+			}),
+			/* @__PURE__ */ jsx(OTPInput, {
+				ref,
+				id: inputId,
+				name,
+				value: effectiveValue,
+				onChange: handleChange,
+				onComplete,
+				maxLength: effectiveLength,
+				pattern,
+				disabled,
+				required,
+				autoFocus,
+				autoComplete: autoComplete ?? "one-time-code",
+				"aria-invalid": hasError || void 0,
+				"aria-describedby": describedBy,
+				containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed", expand && "w-full", containerClassName),
+				...restProps,
+				children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [groupIndex > 0 && /* @__PURE__ */ jsx(InputOTPSeparator, {}), /* @__PURE__ */ jsx("div", {
+					className: cn("flex items-center", className),
+					style: expand ? { flex: `${group.length} 1 0%` } : void 0,
+					children: group.map((slotIndex, positionInGroup) => {
+						const isFirst = positionInGroup === 0;
+						const isLast = positionInGroup === group.length - 1;
+						const cornerClass = cn(!isFirst && "-ms-px rounded-s-none", !isLast && "rounded-e-none");
+						return /* @__PURE__ */ jsx(SlotBox, {
+							index: slotIndex,
+							size: effectiveSize,
+							expand: !!expand,
+							rounded: !!rounded,
+							hasError,
+							cornerClass
+						}, slotIndex);
+					})
+				})] }, `g-${groupIndex}`))
+			}),
+			errorContent && /* @__PURE__ */ jsx("div", {
+				id: `${inputId}-error`,
+				className: "text-sm text-destructive",
+				children: errorContent
+			}),
+			startHelperContent && !errorContent && /* @__PURE__ */ jsx("div", {
+				id: helperStartId,
+				className: "text-sm text-muted-foreground",
+				children: startHelperContent
+			}),
+			endHelperContent && !errorContent && /* @__PURE__ */ jsx("div", {
+				id: helperEndId,
+				className: "text-sm text-end text-muted-foreground",
+				children: endHelperContent
+			})
+		]
+	});
+});
+InputOTP.displayName = "InputOTP";
+//#endregion
+export { InputOTP, InputOTPSeparator };

package/dist/core/label.js

@@ -0,0 +1,15 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as LabelPrimitive from "@radix-ui/react-label";
+//#region src/core/label.tsx
+var labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+var Label = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label.displayName = LabelPrimitive.Root.displayName;
+//#endregion
+export { Label };

package/dist/core/popover.js

@@ -0,0 +1,31 @@
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+//#region src/core/popover.tsx
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, portal = true, onWheel, onTouchMove, ...props }, ref) => {
+	const handleWheel = (event) => {
+		onWheel?.(event);
+		event.stopPropagation();
+	};
+	const handleTouchMove = (event) => {
+		onTouchMove?.(event);
+		event.stopPropagation();
+	};
+	const content = /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+		ref,
+		align,
+		sideOffset,
+		onWheel: handleWheel,
+		onTouchMove: handleTouchMove,
+		className: cn("z-50 w-72 rounded-2xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]", className),
+		...props
+	});
+	return portal ? /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content }) : content;
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };