@evolve.ui/core-components 1.0.0

package/timePicker-Bs25zweI.cjs

@@ -0,0 +1,381 @@
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_Button = require("./Button.cjs");
+require("./TimePickerTarget-BHceCsfc.cjs");
+const require_IconButton = require("./IconButton.cjs");
+const require_effectEventListener = require("./effectEventListener-DmVY5Sgy.cjs");
+const require_Input = require("./Input.cjs");
+const require_utils = require("./utils-CvmfGpqu.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+let date_fns = require("date-fns");
+//#region src/DateTimeInput/utils/parseTimeValue.ts
+const normalize = (value) => value.replace(/\s*:\s*/g, ":").replace(/(\d)(am|pm)/gi, "$1 $2").replace(/\s+/g, " ").trim();
+/**
+* Parses supported time input formats without relying on browser-specific Date string parsing.
+* Accepts 12-hour (e.g. "6:00 PM", "6:00PM") and 24-hour (e.g. "14:30") formats, with lenient whitespace.
+* @param value - User-entered time value.
+* @returns Local 24-hour time parts, or undefined when the value is unsupported.
+*/
+const parseTimeValue = (value) => {
+	const normalized = normalize(value);
+	const date12 = (0, date_fns.parse)(normalized, "h:mm a", /* @__PURE__ */ new Date());
+	if ((0, date_fns.isValid)(date12)) return {
+		hours: date12.getHours(),
+		minutes: date12.getMinutes()
+	};
+	const date24 = (0, date_fns.parse)(normalized, "HH:mm", /* @__PURE__ */ new Date());
+	if ((0, date_fns.isValid)(date24)) return {
+		hours: date24.getHours(),
+		minutes: date24.getMinutes()
+	};
+};
+function createDateWithParsedTime(parsedTime, baseDate) {
+	if (!parsedTime) return parsedTime;
+	const base = baseDate ?? /* @__PURE__ */ new Date();
+	return new Date(base.getFullYear(), base.getMonth(), base.getDate(), parsedTime.hours, parsedTime.minutes);
+}
+//#endregion
+//#region src/DateTimeInput/timeInput/TimeInput.tsx
+const TimeInput = (0, react.forwardRef)(({ errorText = "Invalid time", hasError: propsHasError = false, is24hour = false, labelText = "Select Time", onBlur, onChange, onValidTimeChange, placeholder = "00 : 00 AM", time, ...rest }, ref) => {
+	const [timeErr, setTimeErr] = (0, react.useState)(false);
+	const hasError = propsHasError || timeErr;
+	const [displayValue, setDisplayValue] = (0, react.useState)(time !== void 0 ? require_utils.getDisplayTime(time, is24hour) : "");
+	(0, react.useEffect)(() => {
+		if (time === void 0 || time.toString() !== "Invalid Date") {
+			setTimeErr(false);
+			setDisplayValue(time !== void 0 ? require_utils.getDisplayTime(time, is24hour) : "");
+		}
+	}, [time, is24hour]);
+	const validateAndFormatTime = (0, react.useCallback)((value) => {
+		if (value === "") {
+			setTimeErr(false);
+			onValidTimeChange?.(void 0);
+			return;
+		}
+		const parsedTime = parseTimeValue(value);
+		if (parsedTime === void 0) {
+			setTimeErr(true);
+			return;
+		}
+		const inputTime = createDateWithParsedTime(parsedTime, time !== void 0 && time.toString() !== "Invalid Date" ? time : void 0);
+		const displayTime = require_utils.getDisplayTime(inputTime, is24hour);
+		setDisplayValue(displayTime);
+		setTimeErr(false);
+		onValidTimeChange?.(inputTime);
+	}, [
+		is24hour,
+		onValidTimeChange,
+		time
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.TextInput, {
+		"data-testid": "time-input",
+		errorText,
+		hasError,
+		labelText,
+		onBlur: (0, react.useCallback)((e) => {
+			const value = e.currentTarget.value;
+			if (value === "") setTimeErr(false);
+			validateAndFormatTime(value);
+			onBlur?.(e);
+		}, [onBlur, validateAndFormatTime]),
+		onChange: (0, react.useCallback)((e) => {
+			setDisplayValue(e.currentTarget.value);
+			onChange?.(e);
+		}, [onChange]),
+		placeholder,
+		ref,
+		type: "text",
+		value: displayValue,
+		...rest
+	});
+});
+//#endregion
+//#region src/DateTimeInput/timePicker/components/TimePopover/AmPmSwitch.tsx
+const AmPmSwitch = ({ isAM, isVisible, onChange }) => {
+	const [isAnimating, setIsAnimating] = (0, react.useState)(false);
+	const amRef = (0, react.useRef)(null);
+	const pmRef = (0, react.useRef)(null);
+	const backgroundRef = (0, react.useRef)(null);
+	const [style, setStyle] = (0, react.useState)({
+		height: "0px",
+		left: "0px",
+		top: "0px",
+		width: "0px"
+	});
+	(0, react.useEffect)(() => {
+		if (backgroundRef.current && amRef.current && pmRef.current) {
+			const selectedRef = isAM ? amRef : pmRef;
+			if (selectedRef.current) {
+				const { clientHeight, clientWidth, offsetLeft, offsetTop } = selectedRef.current;
+				setStyle({
+					height: `${clientHeight}px`,
+					left: `${offsetLeft}px`,
+					top: `${offsetTop}px`,
+					width: `${clientWidth}px`
+				});
+			}
+		}
+	}, [isAM]);
+	if (!isVisible) return null;
+	const handleAmKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			onChange(true);
+			setIsAnimating(true);
+		}
+	};
+	const handlePmKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			onChange(false);
+			setIsAnimating(true);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex cursor-pointer self-end rounded-input border border-border-secondary bg-background-disabled p-[1px]",
+		"data-testid": "ampm-switch",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _evolve_ui_theme_system.cn)("pointer-events-none absolute rounded-input bg-background-primary", { "transition-all duration-[400ms] ease-in-out": isAnimating }),
+				"data-testid": "ampm-switch-background",
+				onAnimationEnd: () => {
+					setIsAnimating(false);
+				},
+				ref: backgroundRef,
+				style
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "z-[1] flex h-[30px] select-none items-center rounded-input px-sm",
+				onClick: () => {
+					onChange(true);
+					setIsAnimating(true);
+				},
+				onKeyDown: handleAmKeyDown,
+				ref: amRef,
+				role: "button",
+				tabIndex: 0,
+				children: isAM ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H5, { children: "AM" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, { children: "AM" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "z-[1] flex h-[30px] select-none items-center rounded-input px-sm",
+				onClick: () => {
+					onChange(false);
+					setIsAnimating(true);
+				},
+				onKeyDown: handlePmKeyDown,
+				ref: pmRef,
+				role: "button",
+				tabIndex: 0,
+				children: isAM ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, { children: "PM" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H5, { children: "PM" })
+			})
+		]
+	});
+};
+//#endregion
+//#region src/DateTimeInput/timePicker/components/TimePopover/TimeFieldInput.tsx
+const TimeFieldInput = ({ labelText, onValueChange, testId, value }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.TextInput, {
+		className: "max-w-[75px]",
+		"data-testid": testId,
+		labelText,
+		onChange: ({ currentTarget }) => {
+			if (!isNaN(Number(currentTarget.value))) onValueChange(currentTarget.value);
+		},
+		placeholder: labelText === "Hour" ? "HH" : "MM",
+		small: true,
+		value
+	});
+};
+//#endregion
+//#region src/DateTimeInput/timePicker/components/TimePopover/TimePopover.utils.ts
+const HOURS_IN_A_DAY = 24;
+const HOURS_IN_AM_PM_CLOCK = 12;
+const MIDNIGHT_ON_AM_PM_CLOCK = 12;
+const convertTo12Hours = (hours) => {
+	return (hours + HOURS_IN_A_DAY) % HOURS_IN_AM_PM_CLOCK || MIDNIGHT_ON_AM_PM_CLOCK;
+};
+const getDisplayHours = (time, is24Hour) => {
+	const hours = time?.getHours();
+	if (!is24Hour && hours !== void 0) return convertTo12Hours(hours);
+	return hours;
+};
+const createSelectedTime = (hour, minute, is24Hour, isAM, time) => {
+	if (!hour || !minute) return;
+	let meridiem = "";
+	if (!is24Hour) meridiem = isAM ? "AM" : "PM";
+	return createDateWithParsedTime(parseTimeValue(`${hour}:${minute} ${meridiem}`.trim()), time);
+};
+const getEnterKeyAction = (event) => {
+	if (event.key !== "Enter") return;
+	return event.target.getAttribute("data-testid") === "time-picker-reset-button" ? "reset" : "done";
+};
+const useEnterKeyHandlers = (handleDone, handleReset) => {
+	(0, react.useEffect)(() => {
+		return require_effectEventListener.effectEventListener(window, "keydown", (event) => {
+			const action = getEnterKeyAction(event);
+			if (action === "reset") handleReset();
+			if (action === "done") handleDone();
+		});
+	}, [handleDone, handleReset]);
+};
+//#endregion
+//#region src/DateTimeInput/timePicker/components/TimePopover/TimePopoverActions.tsx
+const TimePopoverActions = ({ onDone, onReset }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex justify-end gap-sm border-t border-border-secondary p-md",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			"data-testid": "time-picker-reset-button",
+			onClick: onReset,
+			variant: "transparent",
+			children: "Reset"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			"data-testid": "time-picker-done-button",
+			onClick: onDone,
+			children: "Done"
+		})]
+	});
+};
+//#endregion
+//#region src/DateTimeInput/timePicker/components/TimePopover/TimePopover.tsx
+const TimePopover = ({ is24Hour = false, onClose, onSetValidTime, time: timeProp }) => {
+	const [time, setTime] = (0, react.useState)(timeProp);
+	const [hour, setHour] = (0, react.useState)(getDisplayHours(timeProp, is24Hour)?.toString().padStart(2, "0") ?? "");
+	const [minute, setMinute] = (0, react.useState)(timeProp?.getMinutes().toString().padStart(2, "0") ?? "");
+	const [isAM, setIsAM] = (0, react.useState)((timeProp?.getHours() ?? 0) < 12);
+	const handleReset = (0, react.useCallback)(() => {
+		setTime(void 0);
+		setHour("");
+		setMinute("");
+		setIsAM(true);
+		onSetValidTime?.(void 0);
+	}, [onSetValidTime]);
+	const handleDone = (0, react.useCallback)(() => {
+		const newTime = createSelectedTime(hour, minute, is24Hour, isAM, time);
+		if (newTime !== void 0) onSetValidTime?.(newTime);
+		onClose?.();
+	}, [
+		hour,
+		is24Hour,
+		isAM,
+		minute,
+		onClose,
+		onSetValidTime,
+		time
+	]);
+	useEnterKeyHandlers(handleDone, handleReset);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-row gap-xs p-md",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row items-end gap-xs",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeFieldInput, {
+						labelText: "Hour",
+						onValueChange: setHour,
+						testId: "time-input-hour",
+						value: hour
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "pb-[6px]",
+						children: ":"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeFieldInput, {
+						labelText: "Minute",
+						onValueChange: setMinute,
+						testId: "time-input-minute",
+						value: minute
+					})
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AmPmSwitch, {
+				isAM,
+				isVisible: !is24Hour,
+				onChange: setIsAM
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimePopoverActions, {
+			onDone: handleDone,
+			onReset: handleReset
+		})]
+	});
+};
+//#endregion
+//#region src/DateTimeInput/timePicker/TimePicker.tsx
+const TimePicker = (0, react.forwardRef)(({ disabled, is24hour, onClear, onValidTimeChange, time: timeProp, zIndex = 15, ...props }, ref) => {
+	const [time, setTime] = (0, react.useState)(timeProp);
+	(0, react.useEffect)(() => {
+		setTime(timeProp);
+	}, [timeProp]);
+	const handleOnClear = (0, react.useCallback)(() => {
+		setTime(void 0);
+		onClear?.();
+	}, [onClear, setTime]);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const { context, floatingStyles, refs } = (0, _floating_ui_react.useFloating)({
+		middleware: [
+			(0, _floating_ui_react.shift)(),
+			(0, _floating_ui_react.offset)({
+				crossAxis: -8,
+				mainAxis: 12
+			}),
+			(0, _floating_ui_react.flip)()
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: "bottom-start",
+		whileElementsMounted: _floating_ui_react.autoUpdate
+	});
+	const { getFloatingProps, getReferenceProps } = (0, _floating_ui_react.useInteractions)([(0, _floating_ui_react.useDismiss)(context), (0, _floating_ui_react.useRole)(context)]);
+	const mergedRef = (0, _floating_ui_react.useMergeRefs)([ref, refs.setReference]);
+	const handleOnSetTime = (0, react.useCallback)((time) => {
+		setTime(time);
+		onValidTimeChange?.(time);
+	}, [onValidTimeChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeInput, {
+		clearAriaLabel: "Clear time",
+		disabled,
+		onClear: handleOnClear,
+		onValidTimeChange: handleOnSetTime,
+		ref: mergedRef,
+		suffix: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+			"aria-label": "Open Time Picker",
+			className: "!rounded-button",
+			"data-testid": "open-time-picker-button",
+			disabled,
+			icon: require_Icons.Clock,
+			onClick: () => setIsOpen(!isOpen),
+			size: "sm",
+			type: "button"
+		}),
+		time,
+		...getReferenceProps(),
+		...props
+	}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, {
+		id: "hui-timepicker-target",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02",
+			"data-testid": "time-picker-popover",
+			ref: refs.setFloating,
+			style: {
+				...floatingStyles,
+				zIndex
+			},
+			...getFloatingProps(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimePopover, {
+				is24Hour: is24hour,
+				onClose: () => setIsOpen(false),
+				onSetValidTime: handleOnSetTime,
+				time
+			})
+		})
+	})] });
+});
+//#endregion
+Object.defineProperty(exports, "TimePicker", {
+	enumerable: true,
+	get: function() {
+		return TimePicker;
+	}
+});
+
+//# sourceMappingURL=timePicker-Bs25zweI.cjs.map

package/timePicker-Bs25zweI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"timePicker-Bs25zweI.cjs","names":["getDisplayTime","TextInput","H5","BodyPrimary","TextInput","effectEventListener","Button","autoUpdate","IconButton","Clock","FloatingPortal"],"sources":["../src/DateTimeInput/utils/parseTimeValue.ts","../src/DateTimeInput/timeInput/TimeInput.tsx","../src/DateTimeInput/timePicker/components/TimePopover/AmPmSwitch.tsx","../src/DateTimeInput/timePicker/components/TimePopover/TimeFieldInput.tsx","../src/DateTimeInput/timePicker/components/TimePopover/TimePopover.utils.ts","../src/DateTimeInput/timePicker/components/TimePopover/TimePopoverActions.tsx","../src/DateTimeInput/timePicker/components/TimePopover/TimePopover.tsx","../src/DateTimeInput/timePicker/TimePicker.tsx"],"sourcesContent":["import { isValid, parse } from 'date-fns';\n\nexport type ParsedTimeValue = {\n    hours: number;\n    minutes: number;\n};\n\nconst normalize = (value: string) =>\n    value\n        .replace(/\\s*:\\s*/g, ':')\n        .replace(/(\\d)(am|pm)/gi, '$1 $2')\n        .replace(/\\s+/g, ' ')\n        .trim();\n\n/**\n * Parses supported time input formats without relying on browser-specific Date string parsing.\n * Accepts 12-hour (e.g. \"6:00 PM\", \"6:00PM\") and 24-hour (e.g. \"14:30\") formats, with lenient whitespace.\n * @param value - User-entered time value.\n * @returns Local 24-hour time parts, or undefined when the value is unsupported.\n */\nexport const parseTimeValue = (value: string): ParsedTimeValue | undefined => {\n    const normalized = normalize(value);\n\n    const date12 = parse(normalized, 'h:mm a', new Date());\n    if (isValid(date12)) {\n        return { hours: date12.getHours(), minutes: date12.getMinutes() };\n    }\n\n    const date24 = parse(normalized, 'HH:mm', new Date());\n    if (isValid(date24)) {\n        return { hours: date24.getHours(), minutes: date24.getMinutes() };\n    }\n\n    return undefined;\n};\n\n/**\n * Creates a local Date from parsed time parts and an optional base date.\n * Returns undefined when parsedTime is undefined.\n * @param parsedTime - Parsed 24-hour time parts, or undefined.\n * @param baseDate - Date whose local calendar day should be preserved.\n * @returns A Date on the base date with the parsed local time, or undefined.\n */\nexport function createDateWithParsedTime(parsedTime: ParsedTimeValue, baseDate?: Date): Date;\nexport function createDateWithParsedTime(parsedTime: ParsedTimeValue | undefined, baseDate?: Date): Date | undefined;\nexport function createDateWithParsedTime(parsedTime: ParsedTimeValue | undefined, baseDate?: Date): Date | undefined {\n    if (!parsedTime) {\n        return parsedTime;\n    }\n\n    const base = baseDate ?? new Date();\n\n    return new Date(base.getFullYear(), base.getMonth(), base.getDate(), parsedTime.hours, parsedTime.minutes);\n}\n","import { ComponentProps, FocusEvent, FormEvent, forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { TextInput } from '../../TextInput/TextInput';\nimport { getDisplayTime } from '../utils';\nimport { createDateWithParsedTime, parseTimeValue } from '../utils/parseTimeValue';\n\ntype Props = {\n    /**\n     * Whether the input is in 24-hour format\n     */\n    is24hour?: boolean;\n    /**\n     * label for the input field, defaults to 'Select Time'\n     */\n    labelText?: ComponentProps<typeof TextInput>['labelText'];\n    /**\n     * The setter of a `useState<Date>` that indicates whether the input time is valid.\n     * NOTE: if props.time is valid that will be used to set the time date object, otherwise\n     * the date object will use today's date with the input time.\n     */\n    onValidTimeChange?: (time: Date | undefined) => void;\n    /**\n     * Input fields placeholder defaults to '00 : 00 AM'\n     */\n    placeholder?: ComponentProps<typeof TextInput>['placeholder'];\n    /**\n     * This is the time that will be displayed in HH:MM (AM/PM) format\n     */\n    time?: Date;\n} & Partial<Omit<ComponentProps<typeof TextInput>, 'type' | 'secure'>>;\nexport const TimeInput = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            errorText = 'Invalid time',\n            hasError: propsHasError = false,\n            is24hour = false,\n            labelText = 'Select Time',\n            onBlur,\n            onChange,\n            onValidTimeChange,\n            placeholder = '00 : 00 AM',\n            time,\n            ...rest\n        },\n        ref\n    ) => {\n        const [timeErr, setTimeErr] = useState<boolean>(false);\n\n        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n        const hasError = propsHasError || timeErr;\n\n        const [displayValue, setDisplayValue] = useState<string>(\n            time !== undefined ? getDisplayTime(time, is24hour) : ''\n        );\n        useEffect(() => {\n            if (time === undefined || time.toString() !== 'Invalid Date') {\n                setTimeErr(false);\n                setDisplayValue(time !== undefined ? getDisplayTime(time, is24hour) : '');\n            }\n        }, [time, is24hour]);\n\n        const validateAndFormatTime = useCallback(\n            (value: string) => {\n                if (value === '') {\n                    setTimeErr(false);\n                    onValidTimeChange?.(undefined);\n                    return;\n                }\n\n                const parsedTime = parseTimeValue(value);\n                if (parsedTime === undefined) {\n                    setTimeErr(true);\n                    return;\n                }\n\n                const validBaseDate = time !== undefined && time.toString() !== 'Invalid Date' ? time : undefined;\n                const inputTime = createDateWithParsedTime(parsedTime, validBaseDate);\n\n                // localize date format\n                const displayTime = getDisplayTime(inputTime, is24hour);\n\n                setDisplayValue(displayTime);\n                setTimeErr(false);\n                onValidTimeChange?.(inputTime);\n            },\n            [is24hour, onValidTimeChange, time]\n        );\n\n        const handleOnBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                const value = e.currentTarget.value;\n\n                // empty time clears errors\n                if (value === '') {\n                    setTimeErr(false);\n                }\n\n                validateAndFormatTime(value);\n                onBlur?.(e);\n            },\n            [onBlur, validateAndFormatTime]\n        );\n\n        const handleOnChange = useCallback(\n            (e: FormEvent<HTMLInputElement>) => {\n                setDisplayValue(e.currentTarget.value);\n                onChange?.(e);\n            },\n            [onChange]\n        );\n\n        return (\n            <TextInput\n                data-testid=\"time-input\"\n                errorText={errorText}\n                hasError={hasError}\n                labelText={labelText}\n                onBlur={handleOnBlur}\n                onChange={handleOnChange}\n                placeholder={placeholder}\n                ref={ref}\n                type=\"text\"\n                value={displayValue}\n                {...rest}\n            />\n        );\n    }\n);\n","import { cn } from '@evolve.ui/theme-system';\nimport { KeyboardEvent, useEffect, useRef, useState } from 'react';\n\nimport { BodyPrimary, H5 } from '../../../../Typography/Text/Text';\n\ntype Props = {\n    isAM: boolean;\n    isVisible: boolean;\n    onChange: (isAM: boolean) => void;\n};\n\nexport const AmPmSwitch = ({ isAM, isVisible, onChange }: Props) => {\n    const [isAnimating, setIsAnimating] = useState<boolean>(false);\n    const amRef = useRef<HTMLDivElement>(null);\n    const pmRef = useRef<HTMLDivElement>(null);\n    const backgroundRef = useRef<HTMLDivElement>(null);\n\n    const [style, setStyle] = useState<Record<string, string>>({\n        height: '0px',\n        left: '0px',\n        top: '0px',\n        width: '0px',\n    });\n\n    useEffect(() => {\n        if (backgroundRef.current && amRef.current && pmRef.current) {\n            const selectedRef = isAM ? amRef : pmRef;\n\n            if (selectedRef.current) {\n                const { clientHeight, clientWidth, offsetLeft, offsetTop } = selectedRef.current;\n                setStyle({\n                    height: `${clientHeight}px`,\n                    left: `${offsetLeft}px`,\n                    top: `${offsetTop}px`,\n                    width: `${clientWidth}px`,\n                });\n            }\n        }\n    }, [isAM]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    const handleAmKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n            onChange(true);\n            setIsAnimating(true);\n        }\n    };\n\n    const handlePmKeyDown = (e: KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n            onChange(false);\n            setIsAnimating(true);\n        }\n    };\n\n    return (\n        <div\n            className=\"relative flex cursor-pointer self-end rounded-input border border-border-secondary bg-background-disabled p-[1px]\"\n            data-testid=\"ampm-switch\"\n        >\n            <div\n                className={cn('pointer-events-none absolute rounded-input bg-background-primary', {\n                    'transition-all duration-[400ms] ease-in-out': isAnimating,\n                })}\n                data-testid=\"ampm-switch-background\"\n                onAnimationEnd={() => {\n                    setIsAnimating(false);\n                }}\n                ref={backgroundRef}\n                style={style}\n            />\n            <div\n                className=\"z-[1] flex h-[30px] select-none items-center rounded-input px-sm\"\n                onClick={() => {\n                    onChange(true);\n                    setIsAnimating(true);\n                }}\n                onKeyDown={handleAmKeyDown}\n                ref={amRef}\n                role=\"button\"\n                tabIndex={0}\n            >\n                {isAM ? <H5>AM</H5> : <BodyPrimary>AM</BodyPrimary>}\n            </div>\n            <div\n                className=\"z-[1] flex h-[30px] select-none items-center rounded-input px-sm\"\n                onClick={() => {\n                    onChange(false);\n                    setIsAnimating(true);\n                }}\n                onKeyDown={handlePmKeyDown}\n                ref={pmRef}\n                role=\"button\"\n                tabIndex={0}\n            >\n                {isAM ? <BodyPrimary>PM</BodyPrimary> : <H5>PM</H5>}\n            </div>\n        </div>\n    );\n};\n","import { TextInput } from '../../../../TextInput/TextInput';\n\ntype Props = {\n    labelText: string;\n    onValueChange: (value: string) => void;\n    testId: string;\n    value: string;\n};\n\nexport const TimeFieldInput = ({ labelText, onValueChange, testId, value }: Props) => {\n    return (\n        <TextInput\n            className=\"max-w-[75px]\"\n            data-testid={testId}\n            labelText={labelText}\n            onChange={({ currentTarget }) => {\n                if (!isNaN(Number(currentTarget.value))) {\n                    onValueChange(currentTarget.value);\n                }\n            }}\n            placeholder={labelText === 'Hour' ? 'HH' : 'MM'}\n            small\n            value={value}\n        />\n    );\n};\n","import { useEffect } from 'react';\n\nimport { effectEventListener } from '../../../../utils/effectEventListener';\nimport { createDateWithParsedTime, parseTimeValue } from '../../../utils/parseTimeValue';\n\nconst HOURS_IN_A_DAY = 24;\nconst HOURS_IN_AM_PM_CLOCK = 12;\nconst MIDNIGHT_ON_AM_PM_CLOCK = 12;\n\nexport const convertTo12Hours = (hours: number) => {\n    return (hours + HOURS_IN_A_DAY) % HOURS_IN_AM_PM_CLOCK || MIDNIGHT_ON_AM_PM_CLOCK;\n};\n\nexport const getDisplayHours = (time: Date | undefined, is24Hour: boolean) => {\n    const hours = time?.getHours();\n\n    if (!is24Hour && hours !== undefined) {\n        return convertTo12Hours(hours);\n    }\n\n    return hours;\n};\n\nexport const createSelectedTime = (\n    hour: string,\n    minute: string,\n    is24Hour: boolean,\n    isAM: boolean,\n    time: Date | undefined\n) => {\n    if (!hour || !minute) {\n        return undefined;\n    }\n\n    let meridiem = '';\n    if (!is24Hour) {\n        meridiem = isAM ? 'AM' : 'PM';\n    }\n\n    const parsedTime = parseTimeValue(`${hour}:${minute} ${meridiem}`.trim());\n\n    return createDateWithParsedTime(parsedTime, time);\n};\n\nexport const getEnterKeyAction = (event: Event) => {\n    if ((event as KeyboardEvent).key !== 'Enter') {\n        return undefined;\n    }\n\n    return (event.target as HTMLElement).getAttribute('data-testid') === 'time-picker-reset-button' ? 'reset' : 'done';\n};\n\nexport const useEnterKeyHandlers = (handleDone: () => void, handleReset: () => void) => {\n    useEffect(() => {\n        return effectEventListener(window, 'keydown', (event) => {\n            const action = getEnterKeyAction(event);\n\n            if (action === 'reset') {\n                handleReset();\n            }\n\n            if (action === 'done') {\n                handleDone();\n            }\n        });\n    }, [handleDone, handleReset]);\n};\n","import { Button } from '../../../../Button/Button';\n\ntype Props = {\n    onDone: () => void;\n    onReset: () => void;\n};\n\nexport const TimePopoverActions = ({ onDone, onReset }: Props) => {\n    return (\n        <div className=\"flex justify-end gap-sm border-t border-border-secondary p-md\">\n            <Button\n                data-testid=\"time-picker-reset-button\"\n                onClick={onReset}\n                variant=\"transparent\"\n            >\n                Reset\n            </Button>\n            <Button\n                data-testid=\"time-picker-done-button\"\n                onClick={onDone}\n            >\n                Done\n            </Button>\n        </div>\n    );\n};\n","import { useCallback, useState } from 'react';\n\nimport { AmPmSwitch } from './AmPmSwitch';\nimport { TimeFieldInput } from './TimeFieldInput';\nimport { createSelectedTime, getDisplayHours, useEnterKeyHandlers } from './TimePopover.utils';\nimport { TimePopoverActions } from './TimePopoverActions';\n\ntype Props = {\n    /**\n     * Whether the input is in 24-hour format\n     */\n    is24Hour?: boolean;\n    /**\n     * Fires when the popover is closed\n     */\n    onClose?: () => void;\n    /**\n     * Fires when a valid time is set\n     */\n    onSetValidTime?: (time: Date | undefined) => void;\n    /**\n     * This is the time that will be displayed in HH:MM (AM/PM) format\n     */\n    time?: Date;\n};\n\nexport const TimePopover = ({ is24Hour = false, onClose, onSetValidTime, time: timeProp }: Props) => {\n    const [time, setTime] = useState<Date | undefined>(timeProp);\n    const hours = getDisplayHours(timeProp, is24Hour);\n    const [hour, setHour] = useState<string>(hours?.toString().padStart(2, '0') ?? '');\n    const [minute, setMinute] = useState<string>(timeProp?.getMinutes().toString().padStart(2, '0') ?? '');\n    const [isAM, setIsAM] = useState<boolean>((timeProp?.getHours() ?? 0) < 12);\n\n    const handleReset = useCallback(() => {\n        setTime(undefined);\n        setHour('');\n        setMinute('');\n        setIsAM(true);\n        onSetValidTime?.(undefined);\n    }, [onSetValidTime]);\n\n    const handleDone = useCallback(() => {\n        const newTime = createSelectedTime(hour, minute, is24Hour, isAM, time);\n\n        if (newTime !== undefined) {\n            onSetValidTime?.(newTime);\n        }\n\n        onClose?.();\n    }, [hour, is24Hour, isAM, minute, onClose, onSetValidTime, time]);\n\n    useEnterKeyHandlers(handleDone, handleReset);\n\n    return (\n        <div className=\"flex flex-col\">\n            <div className=\"flex flex-row gap-xs p-md\">\n                <div className=\"flex flex-row items-end gap-xs\">\n                    <TimeFieldInput\n                        labelText=\"Hour\"\n                        onValueChange={setHour}\n                        testId=\"time-input-hour\"\n                        value={hour}\n                    />\n                    <span className=\"pb-[6px]\">:</span>\n                    <TimeFieldInput\n                        labelText=\"Minute\"\n                        onValueChange={setMinute}\n                        testId=\"time-input-minute\"\n                        value={minute}\n                    />\n                </div>\n                <AmPmSwitch\n                    isAM={isAM}\n                    isVisible={!is24Hour}\n                    onChange={setIsAM}\n                />\n            </div>\n            <TimePopoverActions\n                onDone={handleDone}\n                onReset={handleReset}\n            />\n        </div>\n    );\n};\n","import {\n    autoUpdate,\n    flip,\n    FloatingPortal,\n    offset,\n    shift,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from '@floating-ui/react';\nimport { ComponentProps, forwardRef, useCallback, useEffect, useState } from 'react';\n\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Clock } from '../../Icons';\nimport { TimePickerTargetId } from '../../providers/targets/TimePickerTarget';\nimport { TimeInput } from '../timeInput/TimeInput';\nimport { TimePopover } from './components/TimePopover/TimePopover';\n\ntype Props = {\n    is24hour?: boolean;\n    zIndex?: number;\n} & Partial<ComponentProps<typeof TimeInput>>;\n\nexport const TimePicker = forwardRef<HTMLInputElement, Props>(\n    ({ disabled, is24hour, onClear, onValidTimeChange, time: timeProp, zIndex = 15, ...props }, ref) => {\n        const [time, setTime] = useState<Date | undefined>(timeProp);\n        useEffect(() => {\n            setTime(timeProp);\n        }, [timeProp]);\n\n        const handleOnClear = useCallback(() => {\n            setTime(undefined);\n            onClear?.();\n        }, [onClear, setTime]);\n\n        // #region floating-ui\n        const [isOpen, setIsOpen] = useState(false);\n        const middleware = [\n            shift(),\n            offset({\n                crossAxis: -8,\n                mainAxis: 12,\n            }),\n            flip(),\n        ];\n        const { context, floatingStyles, refs } = useFloating({\n            middleware: middleware,\n            onOpenChange: setIsOpen,\n            open: isOpen,\n            placement: 'bottom-start',\n            whileElementsMounted: autoUpdate,\n        });\n        // Closes the floating element when a dismissal is requested — by default, when the user presses the escape key or outside of the floating element.\n        const dismiss = useDismiss(context);\n        // Adds the correct ARIA attributes for a dialog to the popover and reference elements\n        const role = useRole(context);\n        // A hook to merge or compose interaction event handlers together, preserving memoization.\n        const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, role]);\n        // Merges an array of refs, returning a memoized callback ref or null.\n        const mergedRef = useMergeRefs([ref, refs.setReference]);\n        // #endregion floating-ui\n\n        const handleOnSetTime = useCallback(\n            (time: Date | undefined) => {\n                setTime(time);\n                onValidTimeChange?.(time);\n            },\n            [onValidTimeChange]\n        );\n\n        return (\n            <>\n                <TimeInput\n                    clearAriaLabel=\"Clear time\"\n                    disabled={disabled}\n                    onClear={handleOnClear}\n                    onValidTimeChange={handleOnSetTime}\n                    ref={mergedRef}\n                    suffix={\n                        <IconButton\n                            aria-label=\"Open Time Picker\"\n                            className=\"!rounded-button\"\n                            data-testid=\"open-time-picker-button\"\n                            disabled={disabled}\n                            icon={Clock}\n                            onClick={() => setIsOpen(!isOpen)}\n                            size=\"sm\"\n                            type=\"button\"\n                        />\n                    }\n                    time={time}\n                    {...getReferenceProps()}\n                    {...props}\n                />\n                {isOpen && (\n                    <FloatingPortal id={TimePickerTargetId}>\n                        <div\n                            className=\"cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02\"\n                            data-testid=\"time-picker-popover\"\n                            ref={refs.setFloating}\n                            style={{ ...floatingStyles, zIndex }}\n                            {...getFloatingProps()}\n                        >\n                            <TimePopover\n                                is24Hour={is24hour}\n                                onClose={() => setIsOpen(false)}\n                                onSetValidTime={handleOnSetTime}\n                                time={time}\n                            />\n                        </div>\n                    </FloatingPortal>\n                )}\n            </>\n        );\n    }\n);\n"],"mappings":"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"}

package/timePicker.cjs

@@ -0,0 +1,9 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_TimePickerTarget = require("./TimePickerTarget-BHceCsfc.cjs");
+const require_timePicker = require("./timePicker-Bs25zweI.cjs");
+exports.TimePicker = require_timePicker.TimePicker;
+exports.TimePickerTarget = require_TimePickerTarget.TimePickerTarget;

package/timePicker.d.cts

@@ -0,0 +1,3 @@
+import { t as TimePicker } from "./index-DBYqF9Sr.cjs";
+import { t as TimePickerTarget } from "./TimePickerTarget-pYRxAfb2.cjs";
+export { TimePicker, TimePickerTarget };

package/timePicker.d.mts

@@ -0,0 +1,3 @@
+import { t as TimePicker } from "./index-dpfLYhgI.mjs";
+import { t as TimePickerTarget } from "./TimePickerTarget-pYRxAfb2.mjs";
+export { TimePicker, TimePickerTarget };

package/timePicker.mjs

@@ -0,0 +1,4 @@
+'use client';
+import { t as TimePickerTarget } from "./TimePickerTarget-DlbryTho.mjs";
+import { t as TimePicker } from "./timePicker-BPrJk5TQ.mjs";
+export { TimePicker, TimePickerTarget };

package/toast.cjs

@@ -0,0 +1,8 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Toast = require("./Toast-CPEKESLZ.cjs");
+exports.ToastContainer = require_Toast.ToastContainer;
+exports.toast = require_Toast.toast;

package/toast.d.cts

@@ -0,0 +1,2 @@
+import { n as toast, t as ToastContainer } from "./index-DwA_GqJq.cjs";
+export { ToastContainer, toast };

package/toast.d.mts

@@ -0,0 +1,2 @@
+import { n as toast, t as ToastContainer } from "./index-CEUCcUr8.mjs";
+export { ToastContainer, toast };

package/toast.mjs

@@ -0,0 +1,3 @@
+'use client';
+import { n as toast, t as ToastContainer } from "./Toast-CdUaFVpt.mjs";
+export { ToastContainer, toast };

package/toggleSwitch.cjs

@@ -0,0 +1,95 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Icons = require("./Icons.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ToggleSwitch/ToggleSwitch.tsx
+const ToggleSwitch = (0, react.forwardRef)(({ "aria-label": ariaLabel = "Toggle Switch", className, "data-testid": dataTestId = "toggle-switch", dense = false, disabled = false, hasIcon = false, id = "toggle-switch", isToggled = false, name, onToggleChange, small = false, tabIndex = 0, ...divProps }, ref) => {
+	const [toggled, setToggled] = (0, react.useState)(isToggled);
+	const handleClick = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		if (!disabled) {
+			onToggleChange?.(!toggled);
+			setToggled(!toggled);
+		}
+	}, [
+		disabled,
+		toggled,
+		onToggleChange
+	]);
+	(0, react.useEffect)(() => {
+		setToggled(isToggled);
+	}, [isToggled]);
+	const targetAreaClasses = (0, _evolve_ui_theme_system.cn)("flex w-[48px] items-center justify-center", {
+		"cursor-not-allowed": disabled,
+		"cursor-pointer": !disabled,
+		"h-[48px]": !dense,
+		"h-min": dense
+	});
+	const buttonClasses = (0, _evolve_ui_theme_system.cn)("relative cursor-pointer rounded-full border py-0 transition-all duration-200 ease-in-out focus-visible:outline focus-visible:outline-4 focus-visible:outline-focus-primary", {
+		"bg-background-disabled": disabled && toggled,
+		"bg-background-subdued": disabled && !toggled,
+		"border-border-primary bg-background-subdued": !toggled && !disabled,
+		"border-primary-500 bg-primary-500": toggled && !disabled,
+		"cursor-not-allowed border-icon-disabled": disabled,
+		"h-4 w-8": small,
+		"h-6 w-12": !small
+	}, className);
+	const thumbClasses = (0, _evolve_ui_theme_system.cn)("absolute -translate-x-1/2 -translate-y-1/2 rounded-full border bg-background-primary transition-all duration-200 ease-in-out", {
+		"border-border-disabled": disabled,
+		"border-border-primary": !toggled && !disabled,
+		"border-primary-500": toggled && !disabled,
+		"h-4 w-4": small,
+		"h-6 w-6": !small,
+		"left-[11px]": !small && !toggled,
+		"left-[23px]": small && toggled,
+		"left-[35px]": !small && toggled,
+		"left-[7px]": small && !toggled
+	});
+	const checkIconClasses = (0, _evolve_ui_theme_system.cn)("absolute -translate-x-1/2 -translate-y-1/2 text-icon-inverse", {
+		"left-2": small,
+		"left-[13px]": !small,
+		"text-icon-disabled": disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: targetAreaClasses,
+		"data-testid": `${dataTestId}-target-area`,
+		ref,
+		...divProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			"aria-checked": toggled,
+			"aria-label": ariaLabel,
+			className: buttonClasses,
+			disabled,
+			onClick: handleClick,
+			role: "switch",
+			tabIndex,
+			type: "button",
+			children: [
+				hasIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Check, {
+					className: checkIconClasses,
+					size: "xs"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					checked: toggled,
+					className: "hidden",
+					"data-testid": dataTestId,
+					disabled,
+					id,
+					name,
+					readOnly: true,
+					type: "checkbox"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: thumbClasses })
+			]
+		})
+	});
+});
+//#endregion
+exports.ToggleSwitch = ToggleSwitch;
+
+//# sourceMappingURL=toggleSwitch.cjs.map

package/toggleSwitch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleSwitch.cjs","names":["Check"],"sources":["../src/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { forwardRef, HTMLProps, MouseEvent, Ref, useCallback, useEffect, useState } from 'react';\n\nimport { Check } from '../Icons';\n\ntype Props = {\n    /**\n     * If provided, describes the switch to screen readers via the ARIA label attribute.\n     * @default 'Toggle Switch'\n     */\n    'aria-label'?: string;\n    className?: string;\n    /**\n     * data-testid is placed on the hidden checkbox input\n     */\n    'data-testid'?: string;\n    /**\n     * sets height to min-content when true\n     * @default 'false'\n     */\n    dense?: boolean;\n    /**\n     * Determines if the switch is disabled or not\n     * @default 'false'\n     */\n    disabled?: boolean;\n    /**\n     * If provided, the switch renders a checkmark icon in its toggled state.\n     * @default 'false'\n     */\n    hasIcon?: boolean;\n    /**\n     * id is placed on the hidden checkbox input\n     */\n    id?: string;\n    /**\n     * Determines if the switch is toggled on or not\n     * @default 'false'\n     */\n    isToggled?: boolean;\n    /**\n     * If provided, populates the name attribute of the hidden checkbox input. Recommended for form usage.\n     */\n    name?: string;\n    /**\n     * If provided, provides a callback function for when the switch is toggled with optional access to the toggle state.\n     */\n    onToggleChange?: (toggled?: boolean) => void;\n    /**\n     * If provided, uses the small variant of the toggle switch.\n     * @default 'false'\n     */\n    small?: boolean;\n    /**\n     * use to enable or disable the tab focus on toggle control\n     */\n    tabIndex?: number;\n};\n\nexport const ToggleSwitch = forwardRef(\n    (\n        {\n            'aria-label': ariaLabel = 'Toggle Switch',\n            className,\n            'data-testid': dataTestId = 'toggle-switch',\n            dense = false,\n            disabled = false,\n            hasIcon = false,\n            id = 'toggle-switch',\n            isToggled = false,\n            name,\n            onToggleChange,\n            small = false,\n            tabIndex = 0,\n            ...divProps\n        }: Props & HTMLProps<HTMLDivElement>,\n        ref: Ref<HTMLDivElement>\n    ) => {\n        const [toggled, setToggled] = useState(isToggled);\n\n        const handleClick = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                e.preventDefault();\n\n                if (!disabled) {\n                    onToggleChange?.(!toggled);\n                    setToggled(!toggled);\n                }\n            },\n            [disabled, toggled, onToggleChange]\n        );\n\n        useEffect(() => {\n            setToggled(isToggled);\n        }, [isToggled]);\n\n        // Target area classes\n        const targetAreaClasses = cn('flex w-[48px] items-center justify-center', {\n            'cursor-not-allowed': disabled,\n            'cursor-pointer': !disabled,\n            'h-[48px]': !dense,\n            'h-min': dense,\n        });\n\n        // Toggle switch button classes\n        const buttonClasses = cn(\n            'relative cursor-pointer rounded-full border py-0 transition-all duration-200 ease-in-out focus-visible:outline focus-visible:outline-4 focus-visible:outline-focus-primary',\n            {\n                'bg-background-disabled': disabled && toggled,\n                'bg-background-subdued': disabled && !toggled,\n                // Default state (unchecked)\n                'border-border-primary bg-background-subdued': !toggled && !disabled,\n                // Checked state\n                'border-primary-500 bg-primary-500': toggled && !disabled,\n                // Disabled states\n                'cursor-not-allowed border-icon-disabled': disabled,\n                // Size variants\n                'h-4 w-8': small,\n                'h-6 w-12': !small,\n            },\n            className\n        );\n\n        // Switch thumb classes\n        const thumbClasses = cn(\n            'absolute -translate-x-1/2 -translate-y-1/2 rounded-full border bg-background-primary transition-all duration-200 ease-in-out',\n            {\n                'border-border-disabled': disabled,\n                // Border colors\n                'border-border-primary': !toggled && !disabled,\n                'border-primary-500': toggled && !disabled,\n                // Size variants\n                'h-4 w-4': small,\n                'h-6 w-6': !small,\n                'left-[11px]': !small && !toggled,\n                'left-[23px]': small && toggled, // calc(32px - 9px)\n                'left-[35px]': !small && toggled, // calc(48px - 13px)\n                // Position based on toggle state and size\n                'left-[7px]': small && !toggled,\n            }\n        );\n\n        // Check icon classes\n        const checkIconClasses = cn('absolute -translate-x-1/2 -translate-y-1/2 text-icon-inverse', {\n            'left-2': small, // 8px\n            'left-[13px]': !small,\n            'text-icon-disabled': disabled,\n        });\n\n        return (\n            <div\n                className={targetAreaClasses}\n                data-testid={`${dataTestId}-target-area`}\n                ref={ref}\n                {...divProps}\n            >\n                <button\n                    aria-checked={toggled}\n                    aria-label={ariaLabel}\n                    className={buttonClasses}\n                    disabled={disabled}\n                    onClick={handleClick}\n                    role=\"switch\"\n                    tabIndex={tabIndex}\n                    type=\"button\"\n                >\n                    {hasIcon && (\n                        <Check\n                            className={checkIconClasses}\n                            size=\"xs\"\n                        />\n                    )}\n                    <input\n                        checked={toggled}\n                        className=\"hidden\"\n                        data-testid={dataTestId}\n                        disabled={disabled}\n                        id={id}\n                        name={name}\n                        readOnly\n                        type=\"checkbox\"\n                    />\n                    <div className={thumbClasses} />\n                </button>\n            </div>\n        );\n    }\n);\n"],"mappings":";;;;;;;;;AA2DA,MAAa,gBAAA,GAAA,MAAA,WAAA,EAEL,EACI,cAAc,YAAY,iBAC1B,WACA,eAAe,aAAa,iBAC5B,QAAQ,OACR,WAAW,OACX,UAAU,OACV,KAAK,iBACL,YAAY,OACZ,MACA,gBACA,QAAQ,OACR,WAAW,GACX,GAAG,YAEP,QACC;CACD,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,SAAA,CAAuB,SAAS;CAEhD,MAAM,eAAA,GAAA,MAAA,YAAA,EACD,MAAqC;EAClC,EAAE,eAAe;EAEjB,IAAI,CAAC,UAAU;GACX,iBAAiB,CAAC,OAAO;GACzB,WAAW,CAAC,OAAO;EACvB;CACJ,GACA;EAAC;EAAU;EAAS;CAAc,CACtC;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,WAAW,SAAS;CACxB,GAAG,CAAC,SAAS,CAAC;CAGd,MAAM,qBAAA,GAAA,wBAAA,GAAA,CAAuB,6CAA6C;EACtE,sBAAsB;EACtB,kBAAkB,CAAC;EACnB,YAAY,CAAC;EACb,SAAS;CACb,CAAC;CAGD,MAAM,iBAAA,GAAA,wBAAA,GAAA,CACF,8KACA;EACI,0BAA0B,YAAY;EACtC,yBAAyB,YAAY,CAAC;EAEtC,+CAA+C,CAAC,WAAW,CAAC;EAE5D,qCAAqC,WAAW,CAAC;EAEjD,2CAA2C;EAE3C,WAAW;EACX,YAAY,CAAC;CACjB,GACA,SACJ;CAGA,MAAM,gBAAA,GAAA,wBAAA,GAAA,CACF,gIACA;EACI,0BAA0B;EAE1B,yBAAyB,CAAC,WAAW,CAAC;EACtC,sBAAsB,WAAW,CAAC;EAElC,WAAW;EACX,WAAW,CAAC;EACZ,eAAe,CAAC,SAAS,CAAC;EAC1B,eAAe,SAAS;EACxB,eAAe,CAAC,SAAS;EAEzB,cAAc,SAAS,CAAC;CAC5B,CACJ;CAGA,MAAM,oBAAA,GAAA,wBAAA,GAAA,CAAsB,gEAAgE;EACxF,UAAU;EACV,eAAe,CAAC;EAChB,sBAAsB;CAC1B,CAAC;CAED,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACI,WAAW;EACX,eAAa,GAAG,WAAW;EACtB;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;GACI,gBAAc;GACd,cAAY;GACZ,WAAW;GACD;GACV,SAAS;GACT,MAAK;GACK;GACV,MAAK;aART;IAUK,WACG,iBAAA,GAAA,kBAAA,IAAA,CAACA,cAAAA,OAAD;KACI,WAAW;KACX,MAAK;IACR,CAAA;IAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACI,SAAS;KACT,WAAU;KACV,eAAa;KACH;KACN;KACE;KACN,UAAA;KACA,MAAK;IACR,CAAA;IACD,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD,EAAK,WAAW,aAAe,CAAA;GAC3B;;CACP,CAAA;AAEb,CACJ"}

package/toggleSwitch.d.cts

@@ -0,0 +1,2 @@
+import { t as ToggleSwitch } from "./ToggleSwitch-D-HRkEg2.cjs";
+export { ToggleSwitch };

package/toggleSwitch.d.mts

@@ -0,0 +1,2 @@
+import { t as ToggleSwitch } from "./ToggleSwitch-D-HRkEg2.mjs";
+export { ToggleSwitch };