import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { composeRefs, userRef } from "../internals/compose-refs.jsx";
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";
/**
 * A button component that can be used to trigger actions.
 * Renders a `<button>` element (or `as` override).
 *
 * Solid 2.0-native rewire (§1 wave 1): replaces `renderElement` with
 * `dynamic(() => props.as ?? "button")` and threads the
 * `useButton` reactive bag plus a local `data-disabled` getter through
 * `mergeRootProps`. Consumer's `type` still wins over the primitive's
 * default via `mergeRootProps`'s "user-defined wins" rule.
 */
export function Button(props) {
  const disabled = () => Boolean(props.disabled);
  const focusableWhenDisabled = () => props.focusableWhenDisabled;
  const nativeButton = () => props.nativeButton ?? true;
  const {
    props: buttonProps,
    ref: buttonRef
  } = useButton({
    disabled,
    focusableWhenDisabled,
    native: nativeButton
  });

  // State-attr projection: emit `data-disabled` (presence) when disabled.
  const stateAttrs = {
    get "data-disabled"() {
      return disabled() ? "" : undefined;
    }
  };

  // Strip our own API props so they don't leak onto the DOM.
  const userStyling = resolveClassStyle(props, () => ({
    disabled: disabled()
  }));
  const userProps = omit(props, "class", "style", "attrs", "as", "disabled", "focusableWhenDisabled", "nativeButton");

  // Compose: state-attrs + buttonProps form the "internal" side; userProps
  // forms the "user" side. mergeRootProps gives user precedence on plain keys
  // (so consumer `type="submit"` overrides the primitive's `type="button"`),
  // composes class/style, and chains event handlers (internal first, user
  // gated by defaultPrevented).
  const internal = mergeRootProps(stateAttrs, buttonProps);
  const styledUserProps = mergeRootProps(userStyling, userProps);
  const merged = mergeRootProps(internal, styledUserProps);
  const Tag = dynamic(() => props.as ?? "button");
  return <Tag {...merged} ref={composeRefs(buttonRef, userRef(props))} />;
}
//# sourceMappingURL=button.jsx.map