import { dynamic } from "@solidjs/web";
import { createSignal, omit } from "solid-js";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useButton } from "../../internals/use-button/use-button.jsx";
import { useToastProviderContext } from "../provider/toast-provider-context.jsx";
import { useToastRootContext } from "../root/toast-root-context.jsx";
/**
 * Close button for the toast.
 */
export function ToastClose(props) {
  const store = useToastProviderContext();
  const ctx = useToastRootContext();
  const disabled = () => Boolean(props.disabled);
  const nativeButton = () => props.nativeButton ?? true;
  const button = useButton({
    disabled,
    native: nativeButton
  });
  const [hasFocus, setHasFocus] = createSignal(false);
  const userClassStyle = resolveClassStyle(props, () => ({
    type: ctx.toast().type
  }));
  const userHtmlProps = omit(props, "as", "class", "style", "attrs", "nativeButton");
  const internalProps = {
    ref: button.ref,
    get "aria-hidden"() {
      return !ctx.expanded() && !hasFocus() ? "true" : undefined;
    },
    get "data-type"() {
      return ctx.toast().type;
    },
    onClick() {
      store.closeToast(ctx.toast().id);
    },
    onFocus() {
      setHasFocus(true);
    },
    onBlur() {
      setHasFocus(false);
    }
  };
  const merged = mergeRootProps(mergeRootProps(mergeRootProps(internalProps, button.props), userClassStyle), userHtmlProps);
  const Tag = dynamic(() => props.as ?? "button");
  return <Tag {...merged} />;
}
//# sourceMappingURL=toast-close.jsx.map