"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { getIcon } from "../icon/iconConfig.js";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
import { chip, chipContent } from "./styles.js";
/**
 * **Server Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { Chip } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <Chip>Content</Chip>;
 * }
 * ```
 *
 * @example
 * Outlined Example
 * ```tsx
 * import { Chip } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return <Chip theme="outline">Content</Chip>;
 * }
 * ```
 *
 * @example
 * Addons Example
 * ```tsx
 * import { Avatar, Chip } from "@react-md/core";
 * import AddCircleIcon from "@react-md/material-icons/AddCircleIcon";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Chip
 *       leftAddon={
 *         <Avatar>
 *           <img src="https://i.pravatar.cc/40?img=3" alt="" />
 *         </Avatar>
 *       }
 *       rightAddon={<AddCircleIcon />}
 *     >
 *       Chip
 *     </Chip>
 *   );
 * }
 * ```
 *
 * @remarks \@since 6.0.0 Renamed the `noninteractable` prop to
 * `noninteractive`.
 */ export const Chip = /*#__PURE__*/ forwardRef(function Chip(props, ref) {
    const { "aria-pressed": ariaPressed, theme = "solid", className, raisable = false, disabled = false, selected, selectedThemed = false, selectedClassName, selectedIcon: propSelectedIcon, selectedIconAfter = false, backgroundColor, noninteractive = false, disableIconTransition = false, children: propChildren, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, leftAddon: propLeftAddon, rightAddon: propRightAddon, contentProps, contentStyle, contentClassName, disableContentWrap = false, ...remaining } = props;
    let buttonProps;
    if (!noninteractive) {
        buttonProps = {
            "aria-pressed": ariaPressed ?? (!!selected || undefined),
            type: "button",
            disabled
        };
    }
    let content = propChildren;
    if (!disableContentWrap) {
        content = /*#__PURE__*/ _jsx("span", {
            style: contentStyle,
            ...contentProps,
            className: cnb(chipContent({
                className: contentClassName
            }), contentProps?.className),
            children: propChildren
        });
    }
    let leftAddon = propLeftAddon;
    let rightAddon = propRightAddon;
    const selectedIconNode = getIcon("selected", propSelectedIcon);
    const isTransitionable = !selectedThemed && typeof selected === "boolean" && typeof (selectedIconAfter ? propRightAddon : propLeftAddon) === "undefined";
    const selectedIcon = useMaxWidthTransition({
        element: selectedIconNode,
        transitionIn: !!selected,
        disabled: !isTransitionable,
        disableTransition: disableIconTransition
    });
    if (isTransitionable) {
        if (selectedIconAfter) {
            rightAddon = selectedIcon;
        } else {
            leftAddon = selectedIcon;
        }
    }
    const { pressed, pressedClassName, ripples, handlers } = useElementInteraction({
        onClick,
        onKeyDown,
        onKeyUp,
        onMouseDown,
        onMouseUp,
        onMouseLeave,
        onDragStart,
        onTouchStart,
        onTouchEnd,
        onTouchMove,
        disabled: disabled || noninteractive
    });
    const children = useHigherContrastChildren(content);
    const Component = noninteractive ? "span" : "button";
    return /*#__PURE__*/ _jsxs(Component, {
        ...remaining,
        ...buttonProps,
        ...handlers,
        className: chip({
            className,
            theme,
            pressed: raisable && pressed,
            disabled,
            selected,
            selectedThemed,
            selectedClassName,
            noninteractive,
            backgroundColor,
            pressedClassName,
            leftAddon: !!leftAddon && (selectedIconAfter || selected !== false),
            rightAddon: !!rightAddon && (!selectedIconAfter || selected !== false)
        }),
        ref: ref,
        children: [
            leftAddon,
            children,
            rightAddon,
            ripples
        ]
    });
});

//# sourceMappingURL=Chip.js.map