"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../../styles/styler.js";
import { IconSlot } from "../../IconSlot.js";
import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
import { Pressable } from "../Pressable.js";
import React, { forwardRef, useCallback, useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { Cross } from "@yahoo/uds-icons";

//#region src/components/client/Chip/ChipDismissible.tsx
const ChipDismissible = forwardRef(function ChipDismissible({ dismissButtonAriaLabel, onDismiss, dismissIcon, variant = VARIANT_DEFAULT, disabled, slotProps, className, ...rest }, ref) {
	const classNames = useMemo(() => ({
		root: getStyles({
			chipDismissibleVariantRoot: variant,
			className
		}),
		icon: getStyles({ chipDismissibleVariantIcon: variant }),
		iconPressable: cx("uds-chip-dismissible-button", "uds-hit-target", "uds-ring", "rounded-full")
	}), [className, variant]);
	/**
	* Handlers
	*/
	const handleDismissClick = useCallback((e) => {
		e.stopPropagation();
		onDismiss?.();
	}, [onDismiss]);
	const mergedSlotProps = mergeSlotProps(slotProps, {
		startIcon: { className: classNames.icon },
		endIcon: { className: classNames.icon }
	});
	return /* @__PURE__ */ jsx(ChipBase, {
		ref,
		disabled,
		tabIndex: -1,
		endIcon: (iconProps) => /* @__PURE__ */ jsx(Pressable, {
			"aria-label": dismissButtonAriaLabel,
			className: classNames.iconPressable,
			onClick: handleDismissClick,
			disabled,
			children: /* @__PURE__ */ jsx(IconSlot, {
				icon: dismissIcon ?? Cross,
				iconProps
			})
		}),
		className: classNames.root,
		slotProps: mergedSlotProps,
		...rest
	});
});
ChipDismissible.displayName = "ChipDismissible";

//#endregion
export { ChipDismissible };